Recently I have found one solution to add jQuery calendar to custom frontend form. Lets discuss in detail.

In order to add jQuery calendar to custom frontend form, we have to add text input field to custom frontend form.

As per below code create one new text input field inside form block.

<input type="text" class="input-text required-entry" id="txtcalendar" name="txtcalendar" aria-required="true" >

In order to bind jquery-ui calendar with above input field, add below jquery snippet.

<script>
     require([
          "jquery",
          "mage/calendar"
     ], function($){
         $("#txtcalendar").calendar({
              buttonText:"<?php echo __('Select Date') ?>",
         });
       });
</script>

If you want to add date ranges on front-end, then use below code.

<div class="field overview required" data-role="filter-form" id="date_range">
     <span class="field-row">
         <label for="date_from">
            <span><?php echo __('From') ?>:</span>
         </label>
         <input class="input-text required-entry"
                 type="text"
                 id="date_from"
                 name="from"
                 />
           <span id="date_from_advice"></span>
       </span>

       <span class="field-row">
             <label for="date_to">
                <span><?php echo __('To') ?>:</span>
             </label>
             <input class="input-text required-entry"
                    type="text"
                    id="date_to"
                    name="report_to"
                    />
             <span id="date_to_advice"></span>
        </span>

        <script>
            require([
                "jquery",
                "mage/calendar"
            ], function($){

               $("#date_range").dateRange({
                 buttonText:"<?php echo __('Select Date') ?>",
                    from:{
                        id:"date_from"
                    },
                    to:{
                        id:"date_to"
                    }
               });
            });
        </script>
</div>

Related Posts: