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>

2 Answers 2

2

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>
4
  • It's work for me thank a lot. Aug 6, 2019 at 13:12
  • We can set minDate in this code? Aug 6, 2019 at 13:52
  • Yes you can use like this 'min_date' => $this->getMinDate()
    – Mitali
    Aug 7, 2019 at 8:17
  • working fine thank you! Jun 15 at 15:56
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, 2019 at 10:59
  • try to clean cache or s:s:d -f Aug 6, 2019 at 11:08
  • all done clean cache, flush cache and also try deploy but same error Aug 6, 2019 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.