Magento 2 – How to add jQuery calendar to custom frontend form

In this blog, today I’m going to explain that how you can add jQuery calendar to any custom form on the frontend.
Recently I have found one solution to add jQuery calendar to custom form on the frontend.

In order to add jQuery calendar to custom form on the frontend, we need to add text input field to custom frontend form. As per below code create one new text input field inside form block.

<input type="text" class="input-text required-entry" id="datecalendar" name="datecalendar" aria-required="true" >

In order to bind jquery-ui calendar with above input field, add below jquery snippet.

<script>
     require([
          "jquery",
          "mage/calendar"
     ], function($){
         $("#datecalendar").calendar({
              buttonText:"<?php echo __('Select Date') ?>",
         });
       });
</script>

Thats it. Happy coding 🙂