Vanilla JavaScript  ·  Zero Dependencies

Custom Date Picker

A feature-rich, fully accessible date picker built with pure JavaScript and CSS. Supports 13 date formats, smart auto-positioning, date range selection — no libraries required.

Zero Dependencies ARIA Accessible Keyboard Friendly Smart Positioning Responsive Date Ranges 13 Formats
01

Getting Started

The simplest way to attach a date picker to any text input with a single line of initialization.

Basic

Simple Date Picker

Attach to any text input. Opens via icon click or input click. Supports full keyboard navigation inside the calendar, and manual entry in DD/MM/YYYY format which auto-converts to the configured output format.

JavaScript
new DatePicker(element, {
  format: 'DD MMM YYYY',
  minYear: '-99y',
  maxYear: '+10y',
  closeOnSelect: true
});
Pre-selected

Default Value

Pre-populate the picker with any Date object using picker.setValue(date). Useful for edit forms where a date is already stored. Use picker.getValue() to read the current selection back.

Initialized with today's date
JavaScript
const picker = new DatePicker(element, {
  format: 'DD MMMM YYYY'
});

// Set value programmatically
picker.setValue(new Date());

// Read value back
const date = picker.getValue();
02

Date Formats

13 output formats out of the box. Select a date in any picker below to see it rendered in that format.

Format

DD MMM YYYY

Short month name → 09 Dec 2025

Config
format: 'DD MMM YYYY'
Format

DD MMMM YYYY

Full month name → 09 December 2025

Config
format: 'DD MMMM YYYY'
Format

YYYY-MM-DD

ISO 8601 → 2025-12-09

Config
format: 'YYYY-MM-DD'
Format

MM/DD/YYYY

US slash format → 12/09/2025

Config
format: 'MM/DD/YYYY'
Format

MMMM DD, YYYY

US long format → December 09, 2025

Config
format: 'MMMM DD, YYYY'
Format

D/M/YYYY

No zero-padding → 9/12/2025

Config
format: 'D/M/YYYY'
03

Date Range Picker

Link two pickers via onChange callbacks so selecting a start date automatically limits the end, and vice versa.

Range

Hotel Booking — Check-in & Check-out

Select a Check-in date first — the Check-out picker will automatically restrict to only allow dates after it. Selecting a Check-out date will also cap the Check-in accordingly. The number of nights is calculated live.

JavaScript
const checkIn  = new DatePicker(startEl, {
  format: 'DD MMM YYYY',
  onChange: (date) => {
    checkOut.options.minDate = date || null;
  }
});

const checkOut = new DatePicker(endEl, {
  format: 'DD MMM YYYY',
  onChange: (date) => {
    checkIn.options.maxDate = date || null;
  }
});
04

Date Constraints

Restrict selectable dates using minDate and maxDate. Disabled dates appear greyed-out and cannot be clicked.

Constraint

Past Dates Only

Set maxDate: new Date() to make today the last selectable date. Ideal for date-of-birth fields, historical records, or logging past events.

Future dates are greyed out and cannot be selected
JavaScript
new DatePicker(element, {
  format: 'DD/MM/YYYY',
  maxDate: new Date()
});
Constraint

Future Dates Only

Set minDate: new Date() to make today the earliest selectable date. Perfect for booking forms, delivery scheduling, appointment picking, or event sign-ups.

Past dates are greyed out and cannot be selected
JavaScript
new DatePicker(element, {
  format: 'DD/MM/YYYY',
  minDate: new Date()
});
Constraint

Custom Date Window

Combine minDate and maxDate to lock selection to a specific window. Useful for fiscal year pickers, project timelines, or conference scheduling.

Only dates within Jan 1 – Dec 31, 2026 are selectable
JavaScript
new DatePicker(element, {
  format: 'DD MMM YYYY',
  minDate: new Date(2026, 0, 1),
  maxDate: new Date(2026, 11, 31)
});
Constraint

Year Range Limit

Use minYear / maxYear to restrict the year picker grid. Accepts absolute years (2020) or relative offsets ('-5y', '+10y'). Click the year in the header to see the year grid.

Only years 2020 – 2030 are shown in the year grid
JavaScript
new DatePicker(element, {
  format: 'DD/MM/YYYY',
  minYear: 2020,
  maxYear: 2030
  // or relative: '+10y', '-5y'
});
05

Configuration Options

Customize week start day, react to selections with callbacks, and control calendar behavior.

Config

Week Start Day

By default the week starts on Sunday. Set firstDay: 1 for a Monday start (ISO 8601 standard). Open both calendars side-by-side and compare the column order.

Sunday start firstDay: 0
Monday start firstDay: 1
JavaScript
// Default — week starts Sunday
new DatePicker(element, { firstDay: 0 });

// ISO 8601 — week starts Monday
new DatePicker(element, { firstDay: 1 });
Callback

onChange Callback

The onChange(date) fires every time a date is selected or cleared. Use it to sync with a form state, update related UI, trigger validation, or display the same date in multiple formats at once.

Pick a date above to see the callback live
JavaScript
new DatePicker(element, {
  format: 'DD MMM YYYY',
  onChange: (date) => {
    if (date) {
      console.log('Selected:', date);
      console.log('ISO:', date.toISOString());
    } else {
      console.log('Cleared');
    }
  }
});
06

Smart Positioning

The calendar detects available viewport space and auto-positions itself. You can override it with 7 orientation options.

Orientation

Auto (Default)

Automatically selects below or above based on available space. Scrolls and resizes are tracked in real time so the calendar stays in the right place even in complex layouts.

All orientation values: auto top bottom top-left top-right bottom-left bottom-right
Config
orientation: 'auto' // default
Orientation

Fixed: bottom-right

Force the calendar to always open below the input, aligned to the right edge. Useful in right-aligned layouts where the default left-aligned dropdown would overflow.

Config
orientation: 'bottom-right'