imx-select-datepicker

A component for handling date selection via select elements for day and month. The component can be used as a single date picker or as a range date picker.

SelectDatepicker

A component for managing date inputs with support for single date and date range modes. If no date is explicitly set via setDate(), the component defaults to the first day of the first month in the available options range.

Constructor

import { SelectDatepicker } from 'imx-select-datepicker';

const selectDatepicker = new SelectDatepicker(config);

Parameters:

• config (Object) - Configuration object
  • mode (String) - Mode of the component: 'single' for single date or 'range' for date range
  • availableOptions (Object, optional)
    • start (Date, optional) - start date for the range of the day/month options - works only in monthly precision (defaults to today)
    • end (Date, optional) - end date for the range of the day/month options - works only in monthly precision (defaults to one year from now)
  • onChange (Function, optional) - Callback function that is called when the date changes - provides the selected date(s) as an array of ISO date strings (YYYY-MM-DD) and the instance of the component as parameters

Usage

Single Date Mode

const selectDatepicker = new SelectDatepicker({
    mode: 'single',
    availableOptions: {
        start: new Date('2026-01-01'),
        end: new Date('2026-12-31')
    },
    onChange: (dates, instance) => {
        console.log('Selected date:', dates);
    }
});

document.getElementById('datepicker').appendChild(selectDatepicker.getMarkup());

Date Range Mode

const selectDatepicker = new SelectDatepicker({
    mode: 'range',
    availableOptions: {
        start: new Date('2026-01-01'),
        end: new Date('2026-12-31')
    },
    onChange: (dates, instance) => {
        console.log('From:', dates[0], 'To:', dates[1]);
    }
});

document.getElementById('datepicker').appendChild(selectDatepicker.getMarkup());

Methods

getMarkup()

Returns the DOM element of the component that can be inserted into the document.

Returns: DOM Element

setDate(date)

Sets the date(s) of the component.

Parameters:

• date (Date | Array<Date>) - A single date or an array with two dates for the date range

// Single date
selectDatepicker.setDate(new Date('2026-06-15'));

// Date range
selectDatepicker.setDate([
    new Date('2026-06-01'),
    new Date('2026-06-30')
]);

setMinDate(date)

Sets the minimal selectable (non disabled) date.

Parameters:

• date (Date) - A single date.

getDate()

Returns the currently selected dates.

Returns: Array<String> - Array with one or two ISO date strings (YYYY-MM-DD)

const selectedDates = selectDatepicker.getDate();
console.log(selectedDates); // ['2026-06-01', '2026-06-30'] or ['2026-06-15']

Events

The component automatically calls the onChange callback function when the date selection changes:

const selectDatepicker = new SelectDatepicker({
    mode: 'range',
    onChange: (dates, instance) => {
        console.log('New start date:', dates[0]);
        console.log('New end date:', dates[1]);
        console.log(instance);
    }
});

InputGroup

A component for managing date inputs with separate controls for day, month, and year. If no date is explicitly set via setDate(), the component defaults to the first day of the month specified by startDate.

Constructor

import { InputGroup } from 'imx-select-datepicker';

const startDate = new Date('2026-01-01');
const endDate = new Date('2026-12-31');

const inputGroup = new InputGroup(startDate, endDate);

// or with default options
const inputGroupWithDefaultOptions = new InputGroup();

Parameters:

• startDate (Date, optional) - start date for the range of the day/month options - works only in monthly precision (defaults to today)
• endDate (Date, optional) - end date for the range of the day/month options - works only in monthly precision (defaults to one year from now)

Usage

const startDate = new Date('2026-01-01');
const endDate = new Date('2026-12-31');

const inputGroupFrom = new InputGroup(startDate, endDate);
document.getElementById('input-date').appendChild(inputGroupFrom.getMarkup());

const inputGroupTo = new InputGroup(startDate, endDate);
document.getElementById('input-date').appendChild(inputGroupTo.getMarkup());

inputGroupFrom.update(new Date('2026-01-01'));
inputGroupTo.update(new Date('2026-12-31'));

Properties

• daySelect.select - Select element for day selection
• monthSelect.select - Select element for month selection
• yearSelect.select - Select element for year selection

Methods

getMarkup()

Returns the HTML markup for the input group to append it to the DOM.

Returns: DOM Element

getMonthSelect()

Returns the month select element for registering change listeners.

Returns: HTMLSelectElement

getDaySelect()

Returns the day select element for registering change listeners.

Returns: HTMLSelectElement

getValue()

Returns the currently selected date as a ISO date string (YYYY-MM-DD).

Returns: String

update(date)

Updates the input fields with a new date.

Parameters:

• date (Date) - The new date

setMinDate(date)

Sets the minimum selectable date for the input fields.

Parameters:

• date (Date) - The minimum date

Events

inputGroupFrom.getDaySelect().addEventListener('change', (event) => {
    const newDate = new Date(inputGroupFrom.getValue());
    console.log('New date:', newDate);
});

InputRange

A wrapper component that connects two InputGroup instances for date range selection. Unlike SelectDatepicker, you manage the InputGroups individually. The InputRange validates that the "from" date doesn't exceed the "to" date.

Constructor

import { InputGroup, InputRange } from 'imx-select-datepicker';

const startDate = new Date('2026-01-01');
const endDate = new Date('2026-12-31');

const inputGroupFrom = new InputGroup(startDate, endDate);
const inputGroupTo = new InputGroup(startDate, endDate);

const inputRange = new InputRange(inputGroupFrom, inputGroupTo);

Parameters:

• inputGroupFrom (InputGroup) - The InputGroup selecting the from date of the range
• inputGroupTo (InputGroup) - The InputGroup selecting the to date of the range

Usage Examples

Single Date Picker (using InputGroup only)

const startDate = new Date('2026-01-01');
const endDate = new Date('2026-12-31');

const inputGroup = new InputGroup(startDate, endDate);
document.getElementById('datepicker').appendChild(inputGroup.getMarkup());

inputGroup.update(new Date('2026-12-01'));

Range Date Picker

const startDate = new Date('2026-01-01');
const endDate = new Date('2026-12-31');

const inputGroupFrom = new InputGroup(startDate, endDate);
document.getElementById('datepicker-from').appendChild(inputGroupFrom.getMarkup());

const inputGroupTo = new InputGroup(startDate, endDate);
document.getElementById('datepicker-to').appendChild(inputGroupTo.getMarkup());

const inputRange = new InputRange(inputGroupFrom, inputGroupTo);

inputGroupFrom.update(new Date('2026-01-01'));
inputGroupTo.update(new Date('2026-12-31'));