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 daterangepicker 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.

<input type="text" class="form-field date-picker" data-datepicker="date" />
<input type="text" class="input-filter date-picker" data-datepicker="daterange" />

Example Usage

Below are examples demonstrating how to implement different types of Date Pickers using HTML and data attributes.

Single Date Picker

<input
  type="text"
  class="form-field date-picker"
  data-datepicker="date"
  data-datepicker-startdate="01/01/2020"
  data-datepicker-mindate="01/01/1900"
  data-datepicker-maxdate="12/31/2100"
  data-datepicker-opens="right"
/>

Single Date and Time Picker

<input
  type="text"
  class="input-filter date-picker"
  data-datepicker="datetime"
  data-datepicker-startdate="01/01/2020 08:00"
  data-datepicker-timepicker="true"
  data-datepicker-timepickerincrement="15"
/>

Date Range Picker

<input
  type="text"
  class="form-field date-picker"
  data-datepicker="daterange"
  data-datepicker-startdate="01/01/2023"
  data-datepicker-enddate="01/07/2023"
  data-datepicker-mindate="01/01/2000"
  data-datepicker-maxdate="12/31/2030"
/>

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();
});