@ark-ui/react/date-picker + Tailwind CSS v4

Ark Date Picker

Bộ demo cho hai adapter Ark UI mới. Public API vẫn sử dụng Date native để tương thích với form và filter hiện tại của ChillCMS.

Ngày đơn

Controlled value, nút xoá và chuyển đổi giữa chế độ ngày, tháng, năm.

Giá trị: 04/08/2026

Ngày và giờ

showTime giữ nguyên phần thời gian khi người dùng thay đổi ngày.

Giá trị: 14:30 04/08/2026

Khoảng ngày

Hai ô nhập DD/MM/YYYY, preset mặc định, số tuần và tự đóng khi chọn đủ khoảng.

Giá trị: 04/08/2026 → 12/08/2026

Khoảng ngày nhiều tháng

numOfMonths=2 hiển thị hai tháng cạnh nhau và thông báo visible range mỗi khi chuyển lịch.

Giá trị: 20/08/2026 → 05/09/2026 | Hiển thị: 01/08/2026 → 30/09/2026

Multiple date

Chọn tối đa 5 ngày, có thể khoá cuối tuần và vẫn chọn được ngày ngoài tháng.

Ví dụ này ghép trực tiếp Ark UI primitive với calendar dùng chung vì hai adapter Ark được thiết kế riêng cho chế độ single và range.

Giá trị: 04/08/2026 → 11/08/2026 → 18/08/2026

Controlled open

Trạng thái open và value được điều khiển hoàn toàn từ component cha.

Giá trị: 04/08/2026 | Đang đóng

Month picker

Bắt đầu ở view tháng và chọn theo tháng.

Giá trị: tháng 8 năm 2026

Month range picker

Chọn khoảng tháng, bắt đầu ở view tháng và có preset quý I, quý II.

Giá trị: tháng 1 năm 2026 → tháng 6 năm 2026

Year picker

Bắt đầu ở view năm và chọn theo năm.

Giá trị: 2026

Preset tuỳ chỉnh

Preset nhận cả Date[] và preset dựng sẵn như thisMonth.

Giá trị: 01/08/2026 → 07/08/2026

Min, max và ngày không khả dụng

Giới hạn trong tháng 8/2026 và không cho chọn cuối tuần.

Chỉ cho phép ngày làm việc từ 01/08/2026 đến 31/08/2026.

Giá trị: 04/08/2026

Disabled và read only

Hai trạng thái không cho phép thay đổi dữ liệu.

Disabled

Read only

Giá trị: 04/08/2026

Inline

Lịch được hiển thị trực tiếp trong layout, không tạo portal popup.

27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6

Giá trị: 04/08/2026

© 2026. FlatVn All rights reserved. Version 4.3.40