Datepicker
A date, a range, a week, a month, a quarter or a year, picked from a panel or typed into the field.
Anotomy
Structure of the date picker and how its internal parts are composed. These are its semantic parts, so they are also what the
classNames and styles objects accept. The panel's parts go in a nested popup object.DatePicker
| Name | Description | |
|---|---|---|
1 | root | The field's box: border, background, radius and padding. variant, size and status change it here. |
2 | prefix | The node from prefix, before the date. |
3 | input | The text field showing the date in format, or the placeholder while empty. |
4 | suffix | The calendar glyph at the end. suffixIcon replaces it. |
5 | popup.container | The panel itself: background, radius and shadow. |
6 | popup.header | The row with the month and year and the arrows that page through them. |
7 | popup.body | The area under the header that holds the grid. |
8 | popup.content | The grid itself: weekday names and one cell per day. picker turns it into weeks, months, quarters or years. |
9 | popup.item | One cell. cellRender replaces what it draws. |
10 | popup.footer | The row under the grid with the Today link, the OK button when needConfirm is set, and anything from renderExtraFooter. |
11 | popup.root | The positioned layer around the panel. It is portalled to <body>, so these keys are how you reach it. |
DatePicker.RangePicker
The range picker takes the same keys. Its input and panel parts each appear twice.
| Name | Description | |
|---|---|---|
1 | root | The field's box, holding both inputs and the arrow between them. |
2 | prefix | The node from prefix, before the start date. |
3 | input | Each of the two text fields. The one being edited has the bar under it. |
4 | suffix | The calendar glyph at the end. |
5 | popup.container | The panel holding both months. |
6 | popup.header | A month's header. Each panel has one, and the arrows sit on the outer ends. |
7 | popup.body | A month's body. |
8 | popup.content | A month's grid. |
9 | popup.item | One cell. The cells between the two dates take the range color. |
10 | popup.footer | The row under both months, with Now and the confirm button. |
11 | popup.root | The positioned layer around the panel. |
© 2026 AntUIKit . All rights reserved.