Date & Time Picker

import { AXDatetimePickerModule } from '@acorex/components/datetime-picker';

Date & Time Picker allows users to select date and time through an intuitive input field and visual calendar. It supports disabled and readonly states and works with different calendar types, including Georgian and Jalali, offering a flexible and user-friendly selection experience.

Overview

In this section, you can test different options of this component and see the output in real time

Date

Time

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Calendar

Georgian

Format

yyyy/MM/dd HH:mm

Disable today

Readonly

Disabled

Usage

A simple usage of ax-datetime-picker

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-datetime-picker-md-width	20rem	Width of the datetime picker on medium and larger screens (min-width: 768px).
--ax-comp-datetime-picker-header-padding-x	0.5rem	Horizontal padding of the datetime picker header.
--ax-comp-datetime-picker-header-padding-t	0.5rem	Top padding of the datetime picker header.
--ax-comp-datetime-picker-picker-part-height	376px	Height of the time picker part.
--ax-comp-datetime-picker-picker-part-header-padding	0.75rem	Padding of the picker part header.
--ax-comp-datetime-picker-picker-part-header-font-size	1.25rem	Font size of the picker part header text.
--ax-comp-datetime-picker-picker-part-header-border-b-width	1px	Border bottom width of the picker part header.
--ax-comp-datetime-picker-picker-part-header-border-b-color	var(--ax-sys-border-color)	Border bottom color of the picker part header. Defaults to the system's border color.
--ax-comp-datetime-picker-calendar-part-padding	0.25rem	Padding of the calendar part.
--ax-comp-datetime-picker-footer-padding	0.5rem	Padding of the datetime picker footer.
--ax-comp-datetime-picker-footer-border-top-width	1px	Border top width of the datetime picker footer.
--ax-comp-datetime-picker-footer-border-color	var(--ax-sys-border-color)	Border color of the datetime picker footer. Defaults to the system's border color.