Getting started

A date field that never shifts a day, reads what people type, and works with a keyboard, a screen reader or a thumb.

1. Install#

npm install @devix-labs/date-picker

Or, with no build step, load it from the CDN as an ES module:

<link rel="stylesheet" href="https://devix.pk/cdn/oss/date-picker@1.2.0/date-picker.min.css">
<script type="module">
  import { createDatePicker } from 'https://devix.pk/cdn/oss/date-picker@1.2.0/index.js';
  createDatePicker(document.querySelector('#due'));
</script>

2. Add the field#

<label for="due">Due date</label>
<input id="due" name="due" type="date">

Starting from type="date" means the field still works before JavaScript loads. The picker switches it to a text field when it mounts, and switches it back if you call destroy().

3. Create the picker#

import { createDatePicker } from '@devix-labs/date-picker';
import '@devix-labs/date-picker/styles.css';

const due = createDatePicker(document.querySelector('#due'), {
  min: '2026-01-01',
  disabled: [{ weekdays: [6, 7] }], // no weekends
});

due.getValue(); // "2026-09-18"

What gets submitted#

The input people see shows a readable date: 18 Sept 2026, 9/18/2026 or ١٨ سبتمبر ٢٠٢٦, depending on the locale. A hidden input with the input's original name holds the ISO date, so your server always receives due=2026-09-18, whatever the locale.

Reading changes#

createDatePicker(input, {
  onChange: (iso) => console.log(iso), // "2026-09-18" or null
});

input.addEventListener('dx:datechange', (event) => console.log(event.detail));

The hidden input also fires input and change, so form libraries that listen to the named field keep working.

A range instead#

import { createDateRangePicker } from '@devix-labs/date-picker';

createDateRangePicker(document.querySelector('#stay'), {
  presets: ['last7', 'last30', 'thisMonth'],
  maxLength: 90,
});
// posts stay_start=2026-09-12 and stay_end=2026-09-18

See Date ranges.