@syncfusion/ej2-calendars

DatePicker

The DatePicker component allows users to select a date from a calendar popup. It supports various date formats and customizations.

import { DatePicker } from '@syncfusion/ej2-calendars';

let datePicker = new DatePicker({
    value: new Date(),
    placeholder: 'Select a date'
});
datePicker.appendTo('#element');

TimePicker

The TimePicker component enables users to select a time from a list of time values. It supports different time formats and customizations.

import { TimePicker } from '@syncfusion/ej2-calendars';

let timePicker = new TimePicker({
    value: new Date(),
    placeholder: 'Select a time'
});
timePicker.appendTo('#element');

DateRangePicker

The DateRangePicker component allows users to select a range of dates from a calendar popup. It supports various date formats and customizations.

import { DateRangePicker } from '@syncfusion/ej2-calendars';

let dateRangePicker = new DateRangePicker({
    startDate: new Date('1/1/2023'),
    endDate: new Date('1/10/2023'),
    placeholder: 'Select a date range'
});
dateRangePicker.appendTo('#element');

DateTimePicker

The DateTimePicker component combines the functionalities of DatePicker and TimePicker, allowing users to select both date and time from a single popup.

import { DateTimePicker } from '@syncfusion/ej2-calendars';

let dateTimePicker = new DateTimePicker({
    value: new Date(),
    placeholder: 'Select a date and time'
});
dateTimePicker.appendTo('#element');