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 | |
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>
| improve this answer | |
  • It's work for me thank a lot. – Chirag Gondaliya Aug 6 '19 at 13:12
  • We can set minDate in this code? – Chirag Gondaliya Aug 6 '19 at 13:52
  • Yes you can use like this 'min_date' => $this->getMinDate() – Mitro 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>
| improve this answer | |
  • Try but the same result gives error – Chirag Gondaliya 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 – Chirag Gondaliya 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.