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>
Improve this question

2 Answers 2

Reset to default
3

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>
Improve this answer
2
  • We can set minDate in this code? Commented Aug 6, 2019 at 13:52
  • Yes you can use like this 'min_date' => $this->getMinDate() Commented Aug 7, 2019 at 8:17
2

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>
Improve this answer
3
  • Try but the same result gives error Commented Aug 6, 2019 at 10:59
  • try to clean cache or s:s:d -f Commented Aug 6, 2019 at 11:08
  • all done clean cache, flush cache and also try deploy but same error Commented Aug 6, 2019 at 11:09

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.