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
3

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
  • that's very useful, do you know if there is a block for all the other input types (text, textarea, select, etc)? It would a lot better than write the html from scratch
    – Lou Nik
    Oct 14 '21 at 13:40
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
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.