Mod
JavaScript APIs

Date Time Picker

The JavaScript API for the Date Time Picker component.

The mod.date_time_picker() method automatically attaches event listeners for the specified HTML element (a <div class="mod-date-time-picker"></div> tag) and handles interaction events for the element.

Method API

// Using mod(-plus).iife.min.js
window.mod.date_time_picker(element: HTMLElement, options: object);

// Using mod(-plus).esm.min.js
import { date_time_picker } from 'path/to/mod(-plus).esm.min.js';
date_time_picker(element: HTMLElement, options: object);

Usage Examples

Use the following usage examples to guide your implementation.

Examples Use Global JavaScript

For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.

Date Picker Only

Date Time Picker HTML

<div class="mod-date-time-picker">
  <input type="datetime-local" name="date_time" class="mod-input" />
</div>

Date Time Picker JavaScript

const element = document.querySelector('.mod-date-time-picker');
const date_picker_instance = window.mod.date_time_picker(element, {
  show_time_picker: false,
  events: {
    on_set: (iso_timestamp) => {
      console.log('on_set', iso_timestamp);
    }
  }
});

// Get the current ISO string value
console.log(date_picker_instance.get_iso_string());

Date + Time Picker

Date Time Picker HTML

<div class="mod-date-time-picker">
  <input type="datetime-local" name="date_time" class="mod-input" />
</div>

Date Time Picker JavaScript

const element = document.querySelector('.mod-date-time-picker');
const date_picker_instance = window.mod.date_time_picker(element, {
  show_time_picker: true,
  events: {
    on_set: (iso_timestamp) => {
      console.log('on_set', iso_timestamp);
    }
  }
});

Limiting Dates

The date picker supports various date limiting options to restrict which dates users can select.

Disable Past Dates

Date Time Picker HTML

<div class="mod-date-time-picker">
  <input type="datetime-local" name="date_time" class="mod-input" />
</div>

Disable Past Dates

const element = document.querySelector('.mod-date-time-picker');
window.mod.date_time_picker(element, {
  show_time_picker: false,
  disable_before_today: true,
  events: {
    on_set: (iso_timestamp) => {
      console.log('on_set', iso_timestamp);
    }
  }
});

Disable Future Dates

Date Time Picker HTML

<div class="mod-date-time-picker">
  <input type="datetime-local" name="date_time" class="mod-input" />
</div>

Disable Future Dates

const element = document.querySelector('.mod-date-time-picker');
window.mod.date_time_picker(element, {
  show_time_picker: false,
  disable_after_today: true,
  events: {
    on_set: (iso_timestamp) => {
      console.log('on_set', iso_timestamp);
    }
  }
});

Disable Before Specific Date

Date Time Picker HTML

<div class="mod-date-time-picker">
  <input type="datetime-local" name="date_time" class="mod-input" />
</div>

Disable Before Specific Date

const element = document.querySelector('.mod-date-time-picker');
const cutoff_date = new Date('2025-07-15T00:00:00Z').toISOString();
window.mod.date_time_picker(element, {
  show_time_picker: false,
  disable_before_date: cutoff_date,
  events: {
    on_set: (iso_timestamp) => {
      console.log('on_set', iso_timestamp);
    }
  }
});

Disable After Specific Date

Date Time Picker HTML

<div class="mod-date-time-picker">
  <input type="datetime-local" name="date_time" class="mod-input" />
</div>

Disable After Specific Date

const element = document.querySelector('.mod-date-time-picker');
const cutoff_date = new Date('2025-08-01T00:00:00Z').toISOString();
window.mod.date_time_picker(element, {
  show_time_picker: false,
  disable_after_date: cutoff_date,
  events: {
    on_set: (iso_timestamp) => {
      console.log('on_set', iso_timestamp);
    }
  }
});

Date Range Window

Date Time Picker HTML

<div class="mod-date-time-picker">
  <input type="datetime-local" name="date_time" class="mod-input" />
</div>

Date Range Window

const element = document.querySelector('.mod-date-time-picker');
const start_date = new Date('2025-07-01T00:00:00Z').toISOString();
const end_date = new Date('2025-07-31T23:59:59Z').toISOString();
window.mod.date_time_picker(element, {
  show_time_picker: false,
  disable_before_date: start_date,
  disable_after_date: end_date,
  events: {
    on_set: (iso_timestamp) => {
      console.log('on_set', iso_timestamp);
    }
  }
});

API

element HTMLElement required
The container element that must contain an input with class 'mod-input'.
options object
Configuration options for the date picker.
show_time_picker boolean
Enable time selection in addition to date selection. Changes input type to datetime-local.
default_value string
ISO timestamp string to set as the default value. If not provided, current date/time is used. If the default value falls outside the allowed date range, it will be automatically adjusted to the first available date.
disable_before_today boolean
Disable all dates before today. Disabled dates will receive the 'is-disabled' CSS class and cannot be selected.
disable_after_today boolean
Disable all dates after today. Disabled dates will receive the 'is-disabled' CSS class and cannot be selected.
disable_before_date string
ISO timestamp string. Disable all dates before this specific date. Disabled dates will receive the 'is-disabled' CSS class and cannot be selected.
disable_after_date string
ISO timestamp string. Disable all dates after this specific date. Disabled dates will receive the 'is-disabled' CSS class and cannot be selected.
events object
Event callbacks for date picker actions.
on_set function
Callback function when date is set. Receives the selected date/time as an ISO timestamp string.