Magento – How to add datepicker in magento 2 frontend form

datepickermagento2

I want to add a datepicker in magento 2 payment method form . Anybody have an idea how to add date picker through knockout js and data-bind in html page please help me on this ?

Best Answer

you can use the magento 2 datepicker. It use the jquery_ui datepicker.

Try this in your phtml:

<script type="text/javascript">
require([
    "jquery",
    "mage/calendar"
], function($){
  $('#datepicker').datepicker({
       prevText: '&#x3c;zurück', prevStatus: '',
        prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',
        nextText: 'Vor&#x3e;', nextStatus: '',
        nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '',
        monthNames: ['Januar','Februar','März','April','Mai','Juni',
        'Juli','August','September','Oktober','November','Dezember'],
        monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
        'Jul','Aug','Sep','Okt','Nov','Dez'],
        dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
        dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
        dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
      showMonthAfterYear: false,
      dateFormat:'d.m.yy'
    } 
  );
});
</script>

Example with form:

<div class="field col-sm-6 ">
    <div class="response-field-date">
        <div class="subtemplate-wrapper">
            <label for="" style="" class="">Terminwunsch</label>
            <div class="row">
                <div class="input-box col-sm-12">
                    <input name="terminwunsch" id="datepicker" title="Terminwunsch" value="" type="text">
                    <script type="text/javascript">
                    require([
                        "jquery",
                        "mage/calendar"
                        ], function($){
                          $('#datepicker').datepicker({
                               prevText: '&#x3c;zurück', prevStatus: '',
                                prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',
                                nextText: 'Vor&#x3e;', nextStatus: '',
                                nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '',
                                monthNames: ['Januar','Februar','März','April','Mai','Juni',
                                'Juli','August','September','Oktober','November','Dezember'],
                                monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
                                'Jul','Aug','Sep','Okt','Nov','Dez'],
                                dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
                                dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                                dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                              showMonthAfterYear: false,
                              dateFormat:'d.m.yy'
                            } 
                          );
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
Related Topic