How to Add Date Picker in Custom Form

In this post , we are going to see how we can add date picker in custom form at Backend or Frontend.

<div class="admin__field">
      <label for="delivery_date" class="admin__field-label"><?= $block->escapeHtml(__('Shipment Delivery Date')) ?></label>
         <div class="admin__field-control">
           <input name="delivery_date" type="text" class="input-text" id="delivery_date" />
       </div>
 </div>
<script>
    require([
        'jquery',
        'mage/calendar'
    ], function () {
        jQuery('#delivery_date').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: false,
            changeYear: false
        });
    });
</script>

We have to add HTML block and javascript code in same phtml to make date picker work. Let us know if you are facing any issue about the same.

Happy Coding 😀

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Reply

Your email address will not be published.