Magento 2.x – How to add jQuery calendar to custom frontend form as datepicker
If you need to add a datepicker in a custom frontend form, i’m going to show you the easiest way i found with 2 basic steps.
First, add the corresponding input, as follows:
|
1 |
<input type="text" class="input-text required-entry" id="date-calendar-picker" name="date-calendar-picker" aria-required="true" > |
Afterwards, you will need to run this piece of code, to bind jquery-ui-calendar in our input field:
|
1 2 3 4 5 6 7 8 9 10 |
<script> require([ "jquery", "mage/calendar" ], function($){ $("#date-calendar-picker").calendar({ buttonText:"<?php echo __('Select Date') ?>", }); }); </script> |
That’s it, remember to redeploy static content and clean cache if needed, refresh your page and you should see something like this:
Happy Coding.!