Here I got the solution: <div class="control customer-dob"> <input type="text" class="input-text required-entry hasDatepicker" id="calendar_inputField" name="dob" aria-required="true" /> <script> require([ "jquery", "mage/calendar" ], function ($) { $("#calendar_inputField").calendar({ changeYear: true, changeMonth: true, yearRange: "1970:2050", buttonText: "Select Date", }); }); </script> </div> Preview: [![Solution Preview][1]][1] [1]: https://i.sstatic.net/pFVgP.png