Magento 2, You can add Datepicker or calendar in any custom form text field using simple coding. “mage/calendar” widget used for Date picker and DateTime picker in an input field.
Check for Date Range field in Magento 2.
Magento uses calendar.js for add date picker field in the custom form.
You can show the js file at the root of Magento instance /lib/web/mage/calendar.js
Showing date-picker field
Check the input field code. The input text field with the display date picker.
Also, You need to add below JS code to show datepicker for the input field,
1) Using datepicker widget
<input type="text" name="datepicker" id="datepicker" value="" class="datepicker"> <script> require(["jquery", "mage/calendar"], function($){ $("#datepicker").datepicker({ showMonthAfterYear: false, dateFormat:'mm/dd/yy', changeMonth: true, changeYear: true, yearRange: '2000:2020', }) }); </script>
2) Using the datetimepicker widget,
Add an input field and JS code to form, You can show Current Time and Select specific time using DateTime picker widget.
<input type="text" name="datetimepicker" id="datetimepicker" value="" class="datetimepicker"> <script> require([ 'jquery', 'mage/calendar' ], function($){ $('#datetimepicker').datetimepicker({ dateFormat: 'mm/dd/yy', timeFormat: 'HH:mm:ss', changeMonth: true, changeYear: true, showsTime: true }); }); </script>