Trường ngày
Thu thập ngày tháng một cách chính xác và dễ dàng. Từ lịch hẹn đến ngày sinh với định dạng linh hoạt, giới hạn phạm vi ngày và xác thực thông minh – trường Ngày cung cấp trình chọn lịch gốc với các điều khiển mạnh mẽ cho ngày trong quá khứ, ngày trong tương lai, cuối tuần và phạm vi tùy chỉnh.
Thu thập dữ liệu chuyên nghiệp với tính năng xác thực thông minh.
Hoàn hảo cho:
Các tính năng mạnh mẽ cho mọi trường hợp sử dụng
📅 Bốn định dạng ngày tháng
Chọn khu vực ưa thích:
Năm đầu tiên: 31/12/2023 (ISO 8601)
Định dạng tiêu chuẩn quốc tế. Phù hợp nhất cho cơ sở dữ liệu, phân loại và các ứng dụng kỹ thuật.
Ngày đầu tiên của tháng: 31/12/2023 (theo giờ Mỹ)
Định dạng kiểu Mỹ. Quen thuộc nhất với người dùng Mỹ với thứ tự tháng-ngày-năm.
Ngày đầu tiên: 31/12/2023 (theo giờ Anh)
Định dạng kiểu Anh/Châu Âu với thứ tự ngày-tháng-năm. Phổ biến trên toàn thế giới.
Ngày đầu tiên có dấu gạch ngang: 31-12-2023
Định dạng châu Âu thay thế sử dụng dấu gạch ngang thay vì dấu gạch chéo.
Vì sao định dạng lại quan trọng:
Đáp ứng kỳ vọng của người dùng theo từng khu vực
Giúp tránh nhầm lẫn và sai sót.
Đảm bảo lưu trữ dữ liệu nhất quán
Cải thiện tỷ lệ hoàn thành biểu mẫu
Tùy chỉnh hiển thị:
Định dạng ảnh hưởng đến cách ngày tháng hiển thị cho người dùng trong khi vẫn duy trì định dạng lưu trữ chuẩn bên trong hệ thống.
📏 Giới hạn phạm vi ngày
Kiểm soát các ngày có thể chọn:
Ngày đầu tiên được phép (tối thiểu):
Đặt ngày sớm nhất mà người dùng có thể chọn. Các ngày trước ngày này sẽ bị vô hiệu hóa trong trình chọn lịch.
Ví dụ:
- Đăng ký sự kiện: Ngày tối thiểu = ngày công bố sự kiện
- Lịch hẹn: Ngày tối thiểu = hôm nay (không nhận đặt lịch trước đó)
- Dữ liệu lịch sử: Ngày tối thiểu = ngày thành lập công ty
- Thời hạn dự án: Ngày tối thiểu = ngày bắt đầu dự án
Ngày cuối cùng được phép (Tối đa):
Đặt ngày muộn nhất mà người dùng có thể chọn. Các ngày sau ngày này sẽ bị vô hiệu hóa trong trình chọn lịch.
Ví dụ:
- Đăng ký sớm: Ngày tối đa = hạn chót
- Số lượng có hạn: Ngày tối đa = ngày cuối cùng còn chỗ
- Hồ sơ lịch sử: Ngày tối đa = hôm nay
- Khung thời gian cụ thể: Ngày tối đa = kết thúc chương trình khuyến mãi
Các nút cài đặt nhanh:
Chỉ với một cú nhấp chuột, bạn có thể thiết lập ngày tối thiểu/tối đa thành ngày hôm nay hoặc xóa bỏ các hạn chế ngay lập tức.
⏮️ Chặn các ngày đã qua
Ngăn chặn việc chọn ngày tháng trước đó:
Kích hoạt tùy chọn “Chặn ngày trước đó” để vô hiệu hóa tất cả các ngày trước ngày hôm nay. Người dùng chỉ có thể chọn ngày hôm nay hoặc các ngày trong tương lai.
Hoàn hảo cho:
- Đặt lịch hẹn (không có lịch hẹn trước)
- Đăng ký tham dự sự kiện (chỉ dành cho các sự kiện sắp tới)
- Lựa chọn ngày giao hàng (giao hàng trong tương lai)
- Hệ thống đặt chỗ (đặt trước)
- Hạn chót (phải là trong tương lai)
Hành vi thông minh:
Tự động cập nhật hàng ngày – ngày hôm nay luôn được giữ nguyên, ngày hôm qua sẽ bị vô hiệu hóa. Không cần quản lý ngày tháng thủ công.
Kết hợp với các hạn chế khác:
Sử dụng với ngày tối đa để tạo các khoảng thời gian đặt chỗ trong tương lai (ví dụ: đặt chỗ từ hôm nay đến 30 ngày tới).
⏭️ Chặn các ngày trong tương lai
Ngăn chặn việc chọn ngày sắp tới:
Kích hoạt tùy chọn “Chặn ngày trong tương lai” để vô hiệu hóa tất cả các ngày sau ngày hôm nay. Người dùng chỉ có thể chọn ngày hôm nay hoặc các ngày trong quá khứ.
Hoàn hảo cho:
- Bộ sưu tập ngày sinh (không thể là ngày sinh trong tương lai)
- Ngày tháng của các sự kiện lịch sử (chỉ trong quá khứ)
- Ngày bắt đầu kinh nghiệm (bạn bắt đầu khi nào?)
- Ngày hoàn thành (đã hoàn thành)
- Ngày kỷ niệm (các sự kiện đã diễn ra)
Sử dụng trong thế giới thực:
Đảm bảo việc nhập liệu ngày tháng hợp lý – ngày sinh, ngày bắt đầu làm việc, ngày tốt nghiệp phải là các ngày trong quá khứ.
Chức năng xác thực được tích hợp sẵn:
Trình duyệt tự động ngăn chặn các lựa chọn không hợp lệ. Không cần các thông báo lỗi khó hiểu.
📆 Tắt chế độ cuối tuần
Chọn khối ngày thứ Bảy và Chủ Nhật:
Bật tùy chọn “Không chọn cuối tuần” để vô hiệu hóa thứ Bảy và Chủ Nhật trong trình chọn lịch. Chỉ có thể chọn các ngày trong tuần (Thứ Hai đến Thứ Sáu).
Hoàn hảo cho:
- Đặt lịch hẹn kinh doanh
- Lịch trình giao hàng văn phòng
- Lựa chọn ngày tư vấn
- Lịch hẹn dịch vụ (chỉ từ Thứ Hai đến Thứ Sáu)
- Lên lịch cuộc họp B2B
Tương tác thông minh:
Nếu người dùng vô tình chọn cuối tuần (qua bàn phím), hệ thống sẽ tự động sửa thành thứ Hai tuần sau. Bảo vệ liền mạch.
Kết hợp với các lựa chọn khác:
Hoạt động với các hạn chế trong quá khứ/tương lai – chỉ có thể chọn các ngày trong tuần nằm trong phạm vi cho phép.
🎯 Tùy chọn ngày mặc định
Chọn trước ngày bắt đầu:
Chưa chọn ngày (Để trống):
Trường này ban đầu để trống. Người dùng phải chủ động chọn ngày. Phù hợp nhất cho các ngày có sự chênh lệch lớn.
Ngày hôm nay:
Tự động điền ngày hiện tại khi biểu mẫu được tải. Cập nhật động mỗi ngày.
Trường hợp sử dụng:
- Các trường “Ngày yêu cầu”
- Biểu mẫu dấu thời gian
- Tài liệu ngày hiện tại
- Các lựa chọn lịch trình hôm nay
Ngày mai
Tự động điền ngày mai. Hoàn hảo cho các đặt chỗ vào ngày hôm sau.
Trường hợp sử dụng:
- Lựa chọn giao hàng ngày hôm sau
- Lịch hẹn ngày mai
- Mặc định sự kiện trong tương lai
- Có sẵn vào ngày hôm sau
Ngày cụ thể tùy chỉnh:
Chọn bất kỳ ngày cố định nào để chọn trước. Rất phù hợp cho các ngày được đề xuất hoặc các biểu mẫu dành riêng cho sự kiện.
Trường hợp sử dụng:
- Ngày hẹn được đề xuất
- Ngày mặc định của sự kiện
- Gợi ý hạn chót
- Ngày nộp đơn đã điền sẵn
📱 Công cụ chọn lịch gốc
Chọn ngày được tối ưu hóa cho trình duyệt:
Sử dụng các trường nhập ngày tháng gốc của HTML5 với trình chọn lịch tích hợp sẵn của trình duyệt. Cung cấp trải nghiệm quen thuộc, phù hợp với nền tảng.
Giao diện tùy thuộc vào nền tảng:
- iOS: Bộ chọn bánh xe đẹp mắt
- Android: Lịch theo phong cách Material Design
- Chrome trên máy tính: Lịch thả xuống
- Safari trên máy tính để bàn: Trình chọn thu gọn
- Tất cả đều được tối ưu hóa cho nền tảng của họ.
Lợi ích:
- Không cần thư viện JavaScript nào.
- Tải ngay lập tức
- Có thể truy cập theo mặc định
- Điều hướng bằng bàn phím
- Tối ưu hóa cảm ứng
- Kích thước tệp tối thiểu
Nhấp chuột vào bất kỳ đâu:
Toàn bộ trường có thể nhấp chuột để mở lịch. Khu vực tương tác lớn giúp cải thiện khả năng sử dụng.
✅ Xác thực ngày tháng thông minh
Các lớp xác thực tích hợp sẵn:
Kiểm tra định dạng:
Trình duyệt tự động đảm bảo định dạng ngày tháng chính xác. Người dùng không thể nhập các ngày tháng không hợp lệ như “2023-13-45”.
Xác thực phạm vi:
Ngày tối thiểu/tối đa được áp dụng ở cấp độ bộ chọn. Các ngày không hợp lệ sẽ bị vô hiệu hóa – không thể chọn được.
Kiểm tra tính hợp lệ của logic:
Các hạn chế về quá khứ/tương lai/cuối tuần được áp dụng tự động. Hệ thống ngăn chặn các lựa chọn không hợp lệ.
Xóa thông báo lỗi:
Nếu người dùng bằng cách nào đó vượt qua được các hạn chế, các thông báo rõ ràng sẽ giải thích: “Ngày phải sau ngày 01/01/2024” hoặc “Ngày phải trước ngày 31/12/2024”.
🔀 Logic điều kiện
Khả năng hiển thị trường ngày tháng động:
Hiển thị hoặc ẩn các trường ngày tháng dựa trên các giá trị khác trong biểu mẫu. Chỉ hiển thị các trường ngày tháng cần thiết khi cần.
Các quy tắc logic nâng cao:
- Logic AND – Tất cả các điều kiện phải được đáp ứng
- Logic OR – Bất kỳ điều kiện nào cũng có thể kích hoạt hành động.
- 8 toán tử – Bằng, Không bằng, Lớn hơn, Nhỏ hơn, Chứa, Rỗng, và nhiều toán tử khác
Trường hợp sử dụng:
- Chỉ hiển thị “Ngày ưu tiên” khi loại đặt chỗ là “Cuộc hẹn”.
- Hiển thị “Ngày sự kiện” khi loại sự kiện không trống.
- Hiển thị “Ngày giao hàng” khi phương thức vận chuyển là “Đã lên lịch”.
- Ẩn mục “Ngày trở về” khi loại vé là “Một chiều”.
🎯 Trải nghiệm người dùng được nâng cao
Các tính năng thông minh được tích hợp sẵn:
- Hiển thị ngày tháng trực quan – Ngày đã chọn được hiển thị ở định dạng dễ đọc.
- Biểu tượng lịch – Chỉ báo trực quan cho công cụ chọn ngày
- Điều hướng bằng bàn phím – Sử dụng phím mũi tên để điều hướng lịch
- Trợ năng Tab – Hỗ trợ đầy đủ bàn phím
- Tối ưu hóa cảm ứng – Vùng cảm ứng lớn trên thiết bị di động
- Tự động sửa lỗi – Ngày tháng không hợp lệ sẽ tự động được điều chỉnh thành ngày hợp lệ gần nhất.
- Hôm nay được tô sáng – Ngày hiện tại được tô sáng trong trình chọn ngày
- Chọn nhanh – Nhấp vào ngày, trình chọn sẽ tự động đóng lại.
- Hỗ trợ văn bản trợ giúp – Thêm gợi ý hoặc hướng dẫn về định dạng ngày tháng
- Xác thực bắt buộc – Bắt buộc chọn ngày
- Lớp CSS tùy chỉnh – Áp dụng kiểu dáng tùy chỉnh
- Hỗ trợ khả năng truy cập – Nhãn ARIA, tương thích với trình đọc màn hình
Thiết lập đơn giản chỉ với 3 bước
Chuẩn bị trường ngày tháng của bạn chỉ trong vài phút
Thêm trường ngày
Kéo và thả trường Ngày tháng từ phần Trường cơ bản vào biểu mẫu của bạn.
Chọn định dạng và phạm vi
Chọn định dạng ngày tháng (Mỹ, Anh, ISO), tùy chọn thiết lập giới hạn ngày tháng tối thiểu/tối đa và bật tính năng chặn ngày trong quá khứ/tương lai/cuối tuần nếu cần.
Đặt ngày mặc định
Chọn xem trường này bắt đầu trống, tự động điền ngày hôm nay, ngày mai hoặc một ngày tùy chỉnh do bạn chỉ định.
🎉 Vậy là xong! Trường ngày tháng của bạn đã sẵn sàng với tính năng xác thực thông minh và trình chọn ngày tháng tích hợp sẵn.
Ứng dụng trong thế giới thực
Đặt lịch hẹn
* Ngày hẹn khám bệnh
* Lên lịch tư vấn
* Lựa chọn lịch hẹn dịch vụ
* Phối hợp ngày họp
Đăng ký sự kiện
* Ngày tham dự sự kiện
* Lựa chọn ngày tổ chức hội thảo
* Đăng ký tham dự hội nghị
* Ngày đăng ký lớp học
Giao hàng & Vận chuyển
* Ngày giao hàng ưu tiên
* Lựa chọn ngày giao hàng
* Lên lịch ngày nhận hàng
* Lập kế hoạch ngày giao hàng
Ứng dụng kinh doanh
* Ngày hết hạn dự án
* Ngày đến hạn của nhiệm vụ
* Ngày có hiệu lực của hợp đồng
* Ngày bắt đầu/kết thúc thỏa thuận
Thông tin cá nhân
* Bộ sưu tập ngày sinh
* Ngày kỷ niệm
* Ngày bắt đầu làm việc
* Ngày hoàn thành chương trình học
Đặt phòng
* Ngày nhận phòng khách sạn
* Ngày bắt đầu thuê
* Ngày xác nhận đặt chỗ
Lựa chọn thời gian đặt chỗ
Hoàn thành các tùy chọn trường
Cấu hình cơ bản
- Nhãn trường – Tiêu đề hiển thị phía trên trường ngày tháng
- Mô tả/Văn bản trợ giúp – Hướng dẫn bổ sung cho người dùng
- Trường bắt buộc – Bắt buộc phải chọn ngày tháng
- Ký tự đại diện – Không áp dụng cho trình chọn ngày tháng gốc.
Định dạng ngày tháng
- Cách hiển thị ngày tháng:
- Năm đầu tiên: 31/12/2023 (ISO 8601)
- Ngày đầu tiên của tháng: 31/12/2023 (theo lịch Mỹ)
- Ngày đầu tiên: 31/12/2023 (theo giờ Anh)
- Ngày đầu tiên có dấu gạch ngang: 31-12-2023
Hạn chế về phạm vi ngày
- Ngày được phép đầu tiên – Ngày sớm nhất người dùng có thể chọn (để trống nếu không giới hạn ngày)
- Ngày cuối cùng được cho phép – Ngày muộn nhất mà người dùng có thể chọn (để trống nếu không giới hạn ngày)
Tùy chọn chặn ngày
- Chặn ngày quá khứ – Ngăn không cho chọn bất kỳ ngày nào trước ngày hôm nay
- Chặn ngày trong tương lai – Ngăn không cho chọn bất kỳ ngày nào sau ngày hôm nay.
- Không thể chọn ngày cuối tuần – Ngăn cản việc chọn ngày thứ Bảy và Chủ Nhật.
Lựa chọn ngày bắt đầu:
- Không có ngày được chọn trước (để trống) – Trường này ban đầu trống.
- Ngày hôm nay – Ngày hiện tại đã được điền sẵn
- Ngày mai – Ngày tiếp theo đã được điền sẵn
- Ngày cụ thể (bạn chọn) – Ngày tùy chỉnh đã được điền sẵn
Ngày mặc định tùy chỉnh – Chọn ngày bắt đầu (hiển thị khi chọn “Ngày cụ thể”)
Logic có điều kiện
- Kích hoạt logic điều kiện – Hiển thị/ẩn dựa trên điều kiện
- Loại logic
- Tất cả các điều kiện phải được đáp ứng (VÀ)
- Mọi điều kiện đều có thể được đáp ứng (HOẶC)
- Quy tắc điều kiện
- Hiện/Ẩn – Hành động cần thực hiện
- Trường – Trường nào cần kiểm tra
- Toán tử – Bằng, Không bằng, Chứa, Lớn hơn, Nhỏ hơn, Rỗng, Không rỗng
- Giá trị – Giá trị so sánh
- Nhiều điều kiện – Thêm số lượng quy tắc không giới hạn
Tùy chọn nâng cao
- Trường ẩn – Làm cho trường không hiển thị nhưng vẫn bao gồm ngày tháng trong dữ liệu gửi đi
- Lớp CSS tùy chỉnh – Áp dụng kiểu dáng tùy chỉnh
- Thuộc tính trợ năng – Nhãn ARIA dành cho trình đọc màn hình
Tại sao nên chọn trường ngày tháng của chúng tôi?
✅ Nhiều định dạng – Định dạng Mỹ, Anh, ISO và định dạng gạch ngang
✅ Kiểm soát phạm vi ngày – Đặt giới hạn tối thiểu/tối đa một cách chính xác
✅ Chặn các ngày trong quá khứ – Chỉ cho phép chọn ngày trong tương lai
✅ Chặn ngày trong tương lai – Chỉ cho phép chọn ngày trong quá khứ
✅ Vô hiệu hóa cuối tuần – Chỉ chọn các ngày trong tuần cho doanh nghiệp
✅ Cài đặt mặc định thông minh – Tự động điền ngày hôm nay, ngày mai hoặc ngày tùy chỉnh
✅ Trình chọn lịch gốc – Lịch được tối ưu hóa cho trình duyệt trên từng nền tảng
✅ Tự động xác thực – Không thể chọn ngày không hợp lệ
✅ Tích hợp hoàn toàn – Hoạt động liền mạch với tất cả các tính năng của biểu mẫu
Câu Hỏi Thường Gặp
Hỏi: Hệ thống hỗ trợ những định dạng ngày tháng nào?
Bốn định dạng: ISO (31/12/2023), Mỹ (31/12/2023), Anh (31/12/2023) và định dạng gạch ngang (31/12/2023). Hãy chọn định dạng phù hợp nhất với đối tượng của bạn.
Hỏi: Làm thế nào để ngăn người dùng chọn ngày trong quá khứ?
Kích hoạt tùy chọn “Chặn ngày trong quá khứ”. Bất kỳ ngày nào trước ngày hôm nay sẽ không thể chọn được trong trình chọn ngày.
Hỏi: Tôi có thể giới hạn ngày tháng trong một khoảng thời gian cụ thể không?
Có. Hãy thiết lập “Ngày cho phép đầu tiên” và “Ngày cho phép cuối cùng” để giới hạn các lựa chọn trong một khoảng thời gian nhất định.
Hỏi: Chương trình “Cuối tuần dành cho người khuyết tật” có tác dụng gì?
Tính năng này loại bỏ các ngày thứ Bảy và Chủ Nhật khỏi danh sách lựa chọn. Chỉ còn các ngày từ thứ Hai đến thứ Sáu là vẫn có thể chọn được.
Hỏi: Ngày mặc định hoạt động như thế nào?
Chọn xem trường này sẽ để trống, hiển thị ngày hôm nay, ngày mai hoặc một ngày tùy chỉnh. Ngày hôm nay và ngày mai sẽ tự động điều chỉnh.
Hỏi: Giao diện chọn ngày có giống nhau trên tất cả các thiết bị không?
Không. Nó sử dụng giao diện người dùng gốc của từng thiết bị — bộ chọn dạng bánh xe trên iOS, lịch trên Android, bộ chọn trên máy tính để bàn, v.v.
Hỏi: Tôi có thể chặn các ngày sinh trong tương lai cho trường ngày sinh không?
Vâng. Hãy bật tùy chọn “Chặn ngày trong tương lai” để người dùng chỉ có thể chọn ngày đến và bao gồm cả ngày hôm nay.
Hỏi: Ngày tối thiểu/tối đa hoạt động như thế nào cùng với việc chặn ngày trong quá khứ/tương lai?
Chúng được cộng dồn. Ví dụ, việc chặn các ngày trong quá khứ cộng thêm một ngày tối đa 30 ngày tới sẽ tạo ra một phạm vi từ hôm nay đến 30 ngày sau.
Hỏi: Người dùng có thể nhập ngày tháng thay vì sử dụng công cụ chọn ngày tháng không?
Một số trình duyệt cho phép nhập liệu có kiểm tra tính hợp lệ. Một số khác buộc phải sử dụng trình chọn ngày tháng tự động. Tất cả đều yêu cầu định dạng chính xác.
Hỏi: Điều gì xảy ra nếu người dùng chọn cuối tuần trong khi tính năng chọn cuối tuần bị vô hiệu hóa?
Hệ thống tự động điều chỉnh theo ngày làm việc hợp lệ gần nhất, thường là thứ Hai tuần tiếp theo.
Hỏi: Tôi có thể sử dụng logic điều kiện với các trường ngày tháng không?
Đúng vậy. Hãy sử dụng các phép so sánh như “Bằng”, “Trống”, “Không trống”, “Lớn hơn” hoặc “Nhỏ hơn” để kiểm soát khả năng hiển thị của các trường khác.
Hỏi: Làm thế nào để đặt hạn chót?
Nhập hạn chót của bạn vào mục “Ngày cuối cùng được phép”. Người dùng không thể chọn ngày sau thời điểm đó. Kết hợp với “Chặn ngày quá hạn” nếu bạn chỉ cần ngày trong tương lai.
