Magento 2 When Add Date-picker On Frontend Custom Form

Question

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>

Answer 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>

Answer 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>