Magento 2 - Adding calendar to custom frontend form

Question

I'm trying to add the calendar in magento2 to custom front-end form. jquery-ui.js and jquery-ui-timepicker-addon.js are also added in header & this is the code that I think should work to call the calendar.

<div class="control">
    <input type="text" class="input-text hasDatepicker" title="From" value="" id="page_from_date" name="from_date">
   <button type="button" class="ui-datepicker-trigger v-middle"><span>Select Date</span></button>                           
</div>

I didn't found any js code like Calendar.setup({ ... }); etc in Magento 1 that may be necessary to call the calendar

Answer 1

I still don't know how to reuse the knockout Ui form components on front-end, but sharing code just in case someone needs to use jquery-ui calendar.

Add an input to your front-end form:

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

and write this js code after the input:

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

here is the code to use date ranges on front-end:

<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>

For more calendar options you can look into lib\web\mage\calendar.js

Answer 2

The Magento UI Library has a lot of useful UI components organized into reusable 'widgets'. These are things like calendar, modal (popup), tabs, etc. You initialize the widget on your element, and then the JS widget takes care of it from there.

There are a number of ways to instantiate widgets. The best way is to do it in HTML via a data-mage-init attribute. This attribute takes a JSON array of widgets to create on the current element, with your options for each one.

<nav data-mage-init='{ "<component_name>": {...} }'></nav>

The calendar widget specifically is also covered in the Magento 2 documentation.

So, give this a try:

<input type="text"
        name="from_date"
        id="page-from-date"
        title="From"
        data-mage-init='{"calendar": {"showTime": false}}' />

There is also a dateRange widget, which you may find helpful depending on your use case. Both are defined in lib/web/mage/calendar.js. Per the documentation, "most options, methods, and events for the calendar widget correspond to the jQuery Datepicker Widget options."