Magento 2 – How to Add Date Picker in Custom Form

In this post I am going to explain how to add date picker in custom form.

Date Field HTML:

<div class="field start_date">
    <label class="label" for="start_date">
        <span><?php echo __('Start Date'); ?></span>
    </label>
    <div class="control">
        <input id="start_date" name="start_date" title="<?php echo __('Start Date'); ?>" class="datepicker input-text" type="text" value=""/>
    </div>
</div>

Add the below script to apply the date picker to the field.

<script>
    require([
        'jquery',
        'mage/calendar'
    ], function () {
        jQuery('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: false,
            changeYear: false
        });
    });
</script>

Thats it. Enjoy Magento 2!!

 

Team HiddenTechies

Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!