3

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

11

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

  • could you please post your code in-detail, like include path. – Bojjaiah Dec 18 '15 at 4:56
  • @ Ahmed how can I add start-date:'2017-02-20' like this please suggest me ! – Manish Goswami Feb 15 '17 at 11:36
5

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

  • tried but no luck, I think there should be some js work included, I will post it after getting it solved. thankyou for the help – Ahmed Sep 9 '15 at 11:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.