8

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 ?

19

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>
6
  • already added the above script but not working .
    – rajat kara
    Nov 18 '16 at 13:26
  • Did you activate the datepicker in the backend?
    – Irv
    Nov 18 '16 at 13:29
  • How to activate the datepicker in backend ?
    – rajat kara
    Nov 21 '16 at 6:56
  • Go to the backend, click on shops->configuration->catalog->catalog and down to the last section with "custom date..." ore something like this.
    – Irv
    Nov 23 '16 at 13:37
  • 2
    It works for me! Jun 6 '18 at 12:41
2

In my Magento 2 template file, I added following code to display a date picker field :

<?php 
  echo $block->getLayout()
             ->createBlock('Magento\Customer\Block\Widget\Dob')
             ->toHtml() 
?>
2
2

Yet another approach:

<div class="field date">
    <label for="date" class="label"><span><?= $block->escapeHtml(__('Date')) ?></span></label>
        <div class="control">
            <?=
                $block->getLayout()->createBlock('Magento\Framework\View\Element\Html\Date')
                    ->setData([
                        'name' => 'date',
                        'id' => 'date',
                        'value' => $block->escapeHtmlAttr($block->getFormData()->getDate()),
                        'date_format' => 'dd-MM-y',
                        'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
                        'years_range' => '-120y:c+nn',
                        'max_date' => '-1d',
                        'change_month' => 'true',
                        'change_year' => 'true',
                        'show_on' => 'both',
                        'first_day' => 1
                    ])
                    ->toHtml()
            ?>
    </div>
</div>
1

Use below code to solve your point:

 <input type="text" name="datepicker" id="datepicker" value="" class="datepicker"> <script> require(["jquery", "mage/calendar"], function($){         $("#datepicker").datepicker({           dateFormat:'mm/dd/yy',           changeMonth: true,          changeYear: true,          yearRange: '2010:2025',          showMonthAfterYear: false,        }) }); </script>

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.