Date Picker - Done

overview the date picker component provides an intuitive interface for selecting dates, date ranges, or date and time combinations within your application it leverages the popular https //www daterangepicker com/ library and is customizable through various data attributes to fit diverse requirements dependencies module global depenedency jquery yes moment js yes datarangepicker yes daterangepicker mods js yes daterangepicker css yes how it works upon document ready, the script scans for elements with the data datepicker attribute for each found element, it initializes the appropriate date picker based on the specified type (date, datetime, or daterange) the initialization respects various data attributes to configure options such as start date, end date, minimum and maximum selectable dates, and more key steps element detection identifies elements with the data datepicker attribute attribute parsing reads data attributes to determine configuration options initialization sets up the date picker with the parsed options event handling manages user interactions like applying or canceling date selections how to use attributes configure the date picker by adding data attributes to your input elements below is a table of supported attributes attribute type default value description data datepicker string required specifies the type of date picker options date , datetime , daterange data datepicker startdate string optional current date ( mm/dd/yyyy ) sets the initial start date must follow the mm/dd/yyyy format data datepicker enddate string optional null sets the initial end date for range pickers must follow the mm/dd/yyyy format data datepicker mindate string optional 100 years ago from today ( mm/dd/yyyy ) defines the minimum selectable date must follow the mm/dd/yyyy format data datepicker maxdate string optional 10 years from today ( mm/dd/yyyy ) defines the maximum selectable date must follow the mm/dd/yyyy format data datepicker minyear number optional year from 100 years ago sets the minimum year selectable in the picker data datepicker maxyear number optional year 10 years from now sets the maximum year selectable in the picker data datepicker opens string optional left determines the position where the picker opens options left , right , center data datepicker autoapply boolean optional true for date and daterange , autoapply does not work with datetime automatically applies the selection without requiring user confirmation data datepicker timepickerincrement number 1 sets the increment for time picker minutes supported elements the date picker can be applied to input fields with the following classes form field date picker use this class combination for date pickers in standard forms input filter date picker use this class combination exclusively for date pickers in the filter row of tables example usage below are examples demonstrating how to implement different types of date pickers using html and data attributes single date picker single date and time picker date range picker events & interactions example event interception $(' date picker') on('apply daterangepicker', function(ev, picker) { // handle the applied date selection console log('selected start date ' + picker startdate format('mm/dd/yyyy')); if (picker enddate) { console log('selected end date ' + picker enddate format('mm/dd/yyyy')); } }); $(' date picker') on('cancel daterangepicker', function(ev, picker) { // handle the cancellation of date selection $(this) val(''); }); trigger the picker you can trigger the picker to open by simulating a click on the field $(' date filter') on('click', function() { $(this) find(' input filter date picker') focus(); });