Những thuộc tính HTML5 nào có thể được sử dụng với loại đầu vào ngày HTML5 để giới hạn lựa chọn ngày?

Bất kỳ biểu mẫu trực tuyến nào yêu cầu chức năng lên lịch, cuộc hẹn hoặc đặt chỗ thường cần một số loại công cụ chọn ngày. Theo truyền thống, điều này đã được bao phủ bởi JQuery hoặc một khung JavaScript khác, nhưng HTML5 có tính năng đầu vào

0 gốc của riêng nó, với sự hỗ trợ trình duyệt tốt và đang phát triển… với ngoại lệ đáng tiếc là Firefox và Safari, ít nhất là ngay bây giờ

Cấu trúc cơ bản của đầu vào tuân theo cùng một mẫu có thể truy cập mà tôi đã trình bày trước đây

Booking Date

Trong trình duyệt của bạn, kết quả sẽ giống như thế này

Ngày đặt phòng

Chọn ngày bài viết này được xuất bản ban đầu sẽ báo cáo giá trị 2014-09-09 cho JavaScript và/hoặc ngôn ngữ phụ trợ mà bạn chọn. Có thể đặt giá trị mặc định cho đầu vào bằng thuộc tính

1. Các trình duyệt không hỗ trợ sẽ chỉ hiển thị đầu vào dưới dạng trường văn bản, đó là lý do tôi chèn văn bản

0. nó cung cấp một hướng dẫn để nhập ngày ở định dạng chính xác trong các trình duyệt như Firefox

Hạn chế ngày

Trong hầu hết các trường hợp, có rất ít điểm trong việc cung cấp cho người dùng khả năng chọn ngày trong quá khứ, nhưng ngày

1 sẽ cho phép chọn một phạm vi ngày hoàn chỉnh theo mặc định. Chúng tôi có thể hạn chế điều này với các thuộc tính

2 và

3

Kết quả

Vấn đề rõ ràng là trừ khi chúng ta tạo biểu mẫu cho một sự kiện với ngày được xác định trước, thì

2,

3 và

1 sẽ liên tục thay đổi. trong nhiều trường hợp,

2 sẽ là ngày hiện tại, với

3 được đặt thành khoảng cách mà chủ sở hữu trang web muốn cho phép đăng ký trong tương lai

Có thể đặt giá trị bằng PHP (hoặc ngôn ngữ phía máy chủ khác) hoặc JavaScript

Sử dụng PHP để hạn chế nhập ngày

Chúng ta có thể sử dụng PHP để phản ánh cả ngày hiện tại và ngày trong tương lai trong đầu vào, thừa nhận rằng theo mặc định, ngày tháng sẽ phản ánh thời gian trên máy chủ chứ không phải trên máy tính của khách hàng

0

Điều này sẽ đặt giá trị

3 thành một tuần trong tương lai kể từ ngày hiện tại

Sử dụng JavaScript để hạn chế nhập ngày

Chúng tôi cũng có thể sử dụng JavaScript để làm điều tương tự

2

Rõ ràng là có nhiều biến thể phức tạp hơn của cả hai phương pháp. ví dụ: bạn có thể muốn đặt

2 và

0 thành ngày tiếp theo nếu giờ địa phương là sau 5 giờ chiều, buộc người dùng phải đặt trước vào ngày hôm sau sau giờ đóng cửa

Hạn chế chọn ngày với step()

Ngày có thể được hạn chế hơn nữa bằng cách sử dụng thuộc tính

02. đặt nó thành giá trị 2 cho đầu vào sẽ cho phép người dùng chỉ chọn cách ngày, trong khi

03 sẽ hạn chế các lựa chọn chỉ trong một ngày nhất định mỗi tuần

Hạn chế chọn ngày với Datalist

Bạn có thể hạn chế thêm ngày có sẵn bằng cách sử dụng

04 với một loạt tùy chọn. ngày được liên kết (ở định dạng yyyy-mm-dd) trở thành nội dung của mỗi

05, trong khi các thuộc tính

06 tùy chọn cung cấp thêm thông tin

0

Sản xuất

Ngày lễ theo luật định của Canada

Hạn chế lựa chọn ngày với API ràng buộc

Thật không may, không có cách nào (chưa) hạn chế (cũng như chúng ta sẽ thấy, đổi màu) một số ngày nhất định trong đầu vào

0. Ví dụ: sẽ thật tuyệt nếu chúng tôi luôn có thể khóa các ngày Chủ nhật khỏi bộ chọn ngày, để người dùng không bao giờ có thể chọn chúng để đặt trước

Mặc dù tôi mong đợi/hy vọng rằng điều đó có thể thực hiện được trong các lần lặp lại thông số kỹ thuật trong tương lai, có lẽ thông qua danh sách phủ định, nhưng hiện tại chúng tôi phải quay lại sử dụng API ràng buộc, ít nhất là phía máy khách. (Thông thường, bạn sẽ thêm nhiều logic phía máy chủ để kiểm tra lại dữ liệu đã nhập)

Lấy ví dụ tôi vừa sử dụng – không có đặt chỗ vào Chủ nhật – chúng tôi có thể tạo ra những thứ sau (với một cái gật đầu với Tiffany B. Màu nâu cho khái niệm). đánh dấu

1

JavaScript

2

Điều này sử dụng khả năng đã được thiết lập (nhưng ít được biết đến) cho các thuộc tính

08 của phần tử biểu mẫu HTML5 để chứa các thông báo lỗi. Sử dụng một hệ thống tương tự, bạn có thể kiểm tra một loạt các ngày để xác định rằng người dùng không đặt chỗ vào Ngày Giáng sinh, v.v.

Hạn chế về kiểu dáng

Thậm chí còn có những hạn chế lớn hơn khi cố gắng định kiểu đầu vào ngày, do thực tế là, giống như đầu vào

09, giao diện người dùng bộ chọn ngày được lấy từ hệ điều hành, thay vì được hiển thị nguyên bản trong chính trình duyệt. Nếu bạn nghĩ về nó, đây là một điều tốt. bộ chọn ngày trong iOS8 trông rất khác so với trình duyệt trên máy tính để bàn và phải. thiết bị di động có nhu cầu giao diện người dùng rất khác nhau

Chrome cho phép tùy chỉnh trường bộ chọn ngày bằng số bằng cách sử dụng bộ chọn giả Shadow DOM

5

Mà tạo ra kết quả của

Lưu ý rằng chúng tôi thiết lập kiểu mặc định cho tất cả các trình duyệt trên bộ chọn thuộc tính cơ bản để tất cả các trình duyệt có giao diện gần đúng, sau đó chuyên biệt cho Webkit.

20 là các giá trị số, với trình bao bọc ngay lập tức xung quanh chúng. Lưu ý rằng bạn cũng có thể đặt màu của các số chưa được chỉnh sửa bằng cách chọn dựa trên thuộc tính ARIA

Nếu bạn bị ràng buộc và quyết tâm tùy chỉnh hoàn toàn mọi thứ về giao diện của bộ chọn ngày, tôi khuyên bạn nên quay lại JQueryUI hoặc một khung khác, được thảo luận bên dưới

polyfill

Do sự phức tạp của mã bên dưới, việc tạo một polyfill có thể khó khăn, thường yêu cầu kết hợp các khung và plugin. Tôi thích cách tiếp cận của Chris Coyier bằng Yepnope, Modernizer và JQuery UI;

biến thể

Có nhiều biến thể liên quan chặt chẽ của đầu vào

0, bao gồm các đầu vào chuyên dùng cho

22,

23 và

24. Tất cả đều có mức độ hỗ trợ khác nhau, mà tôi sẽ đề cập trong các bài viết sau

Loại đầu vào HTML5 nào cho phép người dùng chọn ngày và giờ theo múi giờ?

Kiểu nhập liệu nào sau đây được sử dụng để chọn ngày?

Loại đầu vào nào được bao gồm trong đầu vào ngày giờ trong HTML5?

Ngày có phải là một phần của thuộc tính loại đầu vào trong HTML5 không?