1

Magento 2 Set Date Picker in frontend:

echo $block->getLayout()->createBlock('Magento\Framework\View\Element\Html\Date')
    ->setData([
              'extra_params' => 'data-validate="{required:true}"',
              'name' => 'delivery_date',
              'id' => 'delivery_date',
              'class' =>'',
              'value' => '',
              'date_format' => 'Y/m/d',
              'image' => $block->getViewFileUrl('Magento_Theme::calendar.png'),
              'years_range' => '-120y:c+nn',             
              'max_date' => '-1d',
              'change_month' => 'true',
              'change_year' => 'true',
              'show_on' => 'both'
            ])->toHtml() ;
  • can you please mention here in which page you want to add date picker? – Emipro Technologies Pvt. Ltd. Apr 10 '18 at 11:02
  • @EmiproTechnologiesPvt.Ltd. I would like to add the datepicker field in Checkout page. How to do it? – Siva Jun 12 '19 at 9:06
2
<script>
    require([
        "jquery",
        "mage/calendar"
    ], function ($) {

        $("#My_ID").calendar({
            showsTime: false,
            hideIfNoPrevNext: true,
            buttonText: "<?php echo __('Select Date') ?>"
        });
    });
</script>

You need to replace $("#My_ID") with your textbox ID.

  • How can I make it required ?? – anonymous May 15 '19 at 10:40
  • @Keyur Shah, Where to add this script? – Siva May 21 '19 at 8:41
2

I have added calendar by following way:

getLayout()->createBlock("Magento\Framework\View\Element\Html\Calendar")->getTemplate('Vendor_Themename::calendar.phtml')->toHtml(); ?>

Add this code in calendar.phtml file.

<script>
    require([
          'jquery',
          'mage/calendar'
        ], function ( $ ) {
          $.extend(true, $, {
            calendarConfig: { 
                minDate: 1,
                infoTitle: "<?php /* @escapeNotVerified */ echo __('About the calendar');?>",
                firstDay: 0,
                closeText: "<?php /* @escapeNotVerified */ echo __('Close');?>",
                currentText: "<?php /* @escapeNotVerified */ echo __('Go Today'); ?>",
                prevText: "<?php /* @escapeNotVerified */ echo __('Previous');?>",
                nextText: "<?php /* @escapeNotVerified */ echo __('Next');?>",
                weekHeader: "<?php /* @escapeNotVerified */ echo __('WK'); ?>",
                timeText: "<?php /* @escapeNotVerified */ echo __('Time');?>",
                hourText: "<?php /* @escapeNotVerified */ echo __('Hour');?>",
                minuteText: "<?php /* @escapeNotVerified */ echo __('Minute');?>",
                showOn: "button",
                showAnim: "",
                changeMonth: false,
                changeYear: false,
                buttonImageOnly: null,
                buttonImage: null,
                showButtonPanel: true,
                showOtherMonths: true,
                showWeek: false,
                timeFormat: '',
                showTime: false,
                showHour: false,
                showMinute: false,
                beforeShowDay: function(date){

                },

            }
          });
        }); </script>

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