<>Date Picker là một thành phần giao diện cho phép người dùng chọn ngày hoặc khoảng thời gian trên một ứng dụng web hoặc mobile. Nó thường xuất hiện dưới dạng lịch thả xuống (dropdown calendar) hoặc trường nhập (input field) có hỗ trợ chọn ngày.
📌 Ứng dụng phổ biến của Date Picker:
✅ Đặt lịch hẹn (đặt vé, booking khách sạn, lịch họp)
✅ Chọn ngày sinh trong form đăng ký
✅ Lọc dữ liệu theo ngày (lịch sử giao dịch, báo cáo)
✅ Hẹn giờ nhắc nhở, báo thức
/Các loại Date Pickers
📌 1. Single Date Picker (Chọn một ngày)
👉 Người dùng chọn một ngày cụ thể.
🔹 Ví dụ: Ngày sinh, ngày đặt hàng.
📌 2. Range Date Picker (Chọn khoảng ngày)
👉 Cho phép chọn khoảng thời gian (từ ngày A đến ngày B).
🔹 Ví dụ: Tìm vé máy bay, đặt phòng khách sạn.
📌 3. Date & Time Picker (Chọn ngày + giờ)
👉 Kết hợp ngày và giờ trong cùng một component.
🔹 Ví dụ: Đặt lịch hẹn, đặt lịch phỏng vấn.
📌 4. Inline Calendar (Lịch hiển thị trực tiếp)
👉 Lịch hiển thị ngay trên màn hình thay vì dạng popup/dropdown.
🔹 Ví dụ: Bộ lọc ngày trên dashboard báo cáo.
/UX Best Practices cho Date Pickers 🎨
✅ Cung cấp định dạng ngày rõ ràng
✔ Sử dụng định dạng dễ hiểu (YYYY-MM-DD, DD/MM/YYYY).
✔ Nếu có thể, hãy tự động phát hiện múi giờ người dùng.
✅ Hỗ trợ nhập liệu bằng bàn phím
✔ Cho phép nhập ngày trực tiếp thay vì chỉ chọn từ lịch.
✔ Cung cấp gợi ý khi nhập (ví dụ: DD/MM/YYYY).
✅ Hiển thị tuần bắt đầu từ ngày phù hợp với quốc gia
✔ Mỹ 🇺🇸: Bắt đầu từ Chủ Nhật (Sunday).
✔ Châu Âu, Việt Nam 🇻🇳: Bắt đầu từ Thứ Hai (Monday).
✅ Chặn ngày không hợp lệ
✔ Không cho phép chọn ngày trong quá khứ khi đặt vé.
✔ Chỉ hiển thị ngày hợp lệ (ví dụ: lịch làm việc từ thứ Hai đến thứ Sáu).
✅ Tích hợp biểu tượng lịch 📅
✔ Nút 📅 giúp người dùng dễ dàng nhận ra Date Picker.
✅ Tối ưu trên mobile 📱
✔ Dùng bàn phím số để nhập ngày trên mobile.
✔ Sử dụng kiểu input type="date" để hiển thị Date Picker mặc định của hệ điều hành.
