---
title: Date Picker - Done
slug: date-picker-done
createdAt: 2025-01-23T00:47:11.281Z
---

# 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](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:

1. **Element Detection**: Identifies elements with the data-datepicker attribute.
2. **Attribute Parsing**: Reads data attributes to determine configuration options.
3. **Initialization**: Sets up the date picker with the parsed options.
4. **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*<br />Current date (`MM/DD/YYYY`)                                                     | Sets the initial start date. Must follow the `MM/DD/YYYY` format.                   |
| `data-datepicker-enddate`             | string  | *Optional*<br />`null`                                                                          | Sets the initial end date for range pickers. Must follow the `MM/DD/YYYY` format.   |
| `data-datepicker-mindate`             | string  | *Optional*<br />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*<br />10 years from today (`MM/DD/YYYY`)                                              | Defines the maximum selectable date. Must follow the `MM/DD/YYYY` format.           |
| `data-datepicker-minyear`             | number  | *Optional*<br />Year from 100 years ago                                                         | Sets the minimum year selectable in the picker.                                     |
| `data-datepicker-maxyear`             | number  | *Optional*<br />Year 10 years from now                                                          | Sets the maximum year selectable in the picker.                                     |
| `data-datepicker-opens`               | string  | *Optional*<br />`left`                                                                          | Determines the position where the picker opens. Options: `left`, `right`, `center`. |
| `data-datepicker-autoapply`           | boolean | *Optional*<br />`true` for `date` and `daterange`, autoapply <u>does not work with datetime</u> | 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.

```html
<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

```html
<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

```html
<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

```html
<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

```javascript
$('.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.&#x20;

```javascript
$('.date-filter').on('click', function() {
    $(this).find('.input-filter.date-picker').focus();
});
```