3

When i try to add date-picker on custom frontend form then give some

Uncaught TypeError: Cannot read property 'call' of undefined at HTMLInputElement.$.datepicker._showDatepicker (calendar.js:549) at HTMLInputElement.dispatch (jquery.js:5226) at HTMLInputElement.elemData.handle

I try following code

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

This code works for me. Just put the code in your phtml template file.

<label for="signup_date" class="label">
                <span><?php /* @escapeNotVerified */ echo __('Date') ?></span>
            </label>
            <div class="control">
                <?=
                $block->getLayout()->createBlock('Magento\Framework\View\Element\Html\Date')
                    ->setData([
                        'extra_params' => $viewModel->getHtmlExtraParams(),
                        'name' => 'signup_date',
                        'id' => 'signup_date',
                        'value' => "",
                        'date_format' => 'dd-mm-yyyy',
                        'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
                        'years_range' => '-120y:c+nn',
                        'change_month' => 'true',
                        'change_year' => 'true',
                        'show_on' => 'both',
                    ])
                    ->toHtml()
                ?>
            </div>
3
  • It's work for me thank a lot. Aug 6 '19 at 13:12
  • We can set minDate in this code? Aug 6 '19 at 13:52
  • Yes you can use like this 'min_date' => $this->getMinDate()
    – Mitali
    Aug 7 '19 at 8:17
1

Try This :-

<input type="text"
       name="datepicker"
       id="datepicker"
       value=""
       class="datepicker"/>
<script type="text/javascript">
    require([
        'jquery',
        'mage/calendar'
    ], function ($, script) {
        $("#datepicker").datepicker({
            showMonthAfterYear: false,
            dateFormat: 'mm/dd/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '2000:2020',
        });
    });
</script>
3
  • Try but the same result gives error Aug 6 '19 at 10:59
  • try to clean cache or s:s:d -f
    – Rk Rathod
    Aug 6 '19 at 11:08
  • all done clean cache, flush cache and also try deploy but same error Aug 6 '19 at 11:09

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.