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 ?

Improve this question

4 Answers 4

Reset to default
21

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>
Improve this answer
6
  • already added the above script but not working .
    – rajat kara
    Commented Nov 18, 2016 at 13:26
  • Did you activate the datepicker in the backend?
    – Irv
    Commented Nov 18, 2016 at 13:29
  • How to activate the datepicker in backend ?
    – rajat kara
    Commented Nov 21, 2016 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
    Commented Nov 23, 2016 at 13:37
  • 2
    It works for me!
    – Charvi Parikh
    Commented Jun 6, 2018 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>
Improve this answer
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
    Commented Oct 14, 2021 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() 
?>
Improve this answer
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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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