English
VietnameseArk UI Primitives + Tailwind CSS v4
Ark Date Input
Component nhập liệu ngày tháng dạng segmented input từng phân đoạn (ngày, tháng, năm, giờ, phút, giây) chuẩn hoá **Zero-Padded** (đệm số 0 ở đầu: 05/08/2026), hỗ trợ bàn phím đầy đủ, chế độ ngày đơn, khoảng ngày (Date Range), thời gian (Date & Time), và 4 kích thước chuẩn ChillCMS.
Single Date Input (Chuẩn Zero-Padded)
Chế độ nhập ngày chuẩn định dạng dd/mm/yyyy với ngày và tháng có số 0 ở đầu (05/08/2026) giúp giữ layout đồng đều.
<ArkDateInput
label="Ngày cấp giấy phép"
value={singleDate}
shouldForceLeadingZeros // Chuẩn zero-padded: 05/08/2026
clearable
onValueChange={(details) => setSingleDate(details.value)}
/>So sánh Zero-Padded vs Non Zero-Padded
shouldForceLeadingZeros={true} tự động giữ định dạng 2 chữ số (05/08/2026) thay vì dạng rút gọn (5/8/2026).
Zero-Padded (Khuyên dùng)05/08/2026
// Chuẩn đệm số 0 (Mặc định)
<ArkDateInput shouldForceLeadingZeros={true} value="2026-08-05" /> // => 05/08/2026
// Không đệm số 0
<ArkDateInput shouldForceLeadingZeros={false} value="2026-08-05" /> // => 5/8/2026Date & Time Input (Ngày và Giờ)
Bổ sung phân đoạn giờ, phút hoặc giây với tuỳ chọn chu kỳ 24h hoặc 12h (kèm AM/PM) đệm số 0 chuẩn (09:05:08).
Granularity:
Hour Cycle:
<ArkDateInput
label="Thời gian đặt lịch hẹn"
granularity="minute"
hourCycle={24}
shouldForceLeadingZeros // 05/08/2026 09:05
value={dateTimeValue}
clearable
/>Date Range Input (Khoảng ngày)
Hỗ trợ chọn khoảng ngày bắt đầu và ngày kết thúc với hai Segment Group tách biệt và ký hiệu phân cách tuỳ biến.
<ArkDateInput
selectionMode="range"
label="Khoảng thời gian chiến dịch"
rangeSeparator="→"
shouldForceLeadingZeros
value={rangeDate}
clearable
onValueChange={(details) => setRangeDate(details.value)}
/>Ma trận kích thước chuẩn ChillCMS (Size Matrix)
Bốn kích thước: xs (28px), sm (32px), md (36px), lg (40px) hiển thị zero-padded date đồng bộ hoàn hảo với Input chuẩn.
Trạng thái & Validation
Hỗ trợ hiển thị trạng thái hợp lệ, thông báo lỗi (invalid / error), trường bắt buộc (required), chỉ đọc (readOnly) và vô hiệu hoá (disabled).
Compound Component API (Tuỳ biến nâng cao)
Sử dụng trực tiếp các thành phần con ArkDateInput.Root, Control, SegmentGroup, Segment để tự do tuỳ chỉnh layout với shouldForceLeadingZeros.
<ArkDateInput.Root shouldForceLeadingZeros defaultValue={[parseDate('2026-08-05')]}>
<ArkDateInput.Label>Custom Composed Field</ArkDateInput.Label>
<ArkDateInput.Control className="border-primary/40">
<CalendarDays className="size-4 text-primary" />
<ArkDateInput.SegmentGroup index={0}>
<ArkDateInput.SegmentContext>
{(segment) => <ArkDateInput.Segment key={segment.type} segment={segment} />}
</ArkDateInput.SegmentContext>
</ArkDateInput.SegmentGroup>
</ArkDateInput.Control>
</ArkDateInput.Root>Interactive Playground (Thử nghiệm tương tác trực tiếp)
Điều chỉnh động tất cả thuộc tính, kích thước, chế độ ngày/khoảng ngày, bật/tắt zero-padding và theo dõi dữ liệu JSON trả về thời gian thực.