Làm cách nào để định dạng ngày đầu vào trong HTML?

❮ Thuộc tính kiểu HTML

Thí dụ

Hiển thị điều khiển ngày

Sinh nhật

Định nghĩa và cách sử dụng

định nghĩa một bộ chọn ngày

Giá trị kết quả bao gồm năm, tháng và ngày

Mẹo. Luôn thêm thẻ để có các phương pháp tiếp cận tốt nhất

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử

cú pháp

❮ Thuộc tính kiểu HTML

Khi đầu vào ngày được HTML5 thêm vào, nhiều người tin rằng nó sẽ cung cấp cho người dùng một phương pháp nhập ngày trên trang web thân thiện, tương tác và đã biết. Tuy nhiên;

Ban đầu, thuộc tính nhập ngày tháng được thiết kế như một phần tử biểu mẫu để chọn các giá trị thông qua bộ đếm ngày tháng. Tuy nhiên, vấn đề nằm ở việc triển khai công cụ hẹn hò thay đổi từ trình duyệt này sang trình duyệt khác. Về cơ bản, điều đó có nghĩa là với tư cách là nhà thiết kế web, bạn phải có ý định cho phép người dùng chọn ngày ở định dạng YYYY/MM/DD thông qua công cụ chọn ngày và bạn đã thiết kế xác thực HTML của mình cho phù hợp, nhưng khi người dùng truy cập trang web thông qua trình duyệt trên

Hiện tại, không có quy tắc nào trong HTML5 cho phép các nhà thiết kế web thay đổi định dạng trong đó phần tử ngày chọn giá trị. Do đó, sự cứng nhắc của yếu tố ngày tháng đã khiến các nhà thiết kế tìm kiếm những cách khác để thay đổi định dạng của ngày tháng mà người dùng nhập vào

Giả sử chúng ta muốn thiết kế một trang web hỏi người dùng về ngày sinh của họ và định dạng của giá trị được nhập phải là YYYY-MM-DD. Làm cách nào chúng ta đạt được điều này bằng cách sử dụng phần tử ngày tháng vì nó không cho phép tự do thay đổi định dạng ngày tháng?

Nếu định dạng ngày là cực kỳ quan trọng đối với hoạt động của trang web, thì chúng tôi sẽ cần đưa ra lựa chọn đó. Dưới đây là đoạn mã có định dạng ngày được thay đổi thành định dạng YYYY-MM-DD

<form>

 Birthday:

<input type="text" name="input" placeholder="YYYY-MM-DD" required 
pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" 
title="Enter a date in this format YYYY-MM-DD"/>

 <input type="submit">

</form>

'Thành phần ngày tháng ở đâu?' Vâng, như chúng tôi đã nói, không thể đạt được điều đó chỉ với HTML5 nếu chúng tôi sử dụng thành phần ngày tháng, nhưng chúng tôi chưa bao giờ nói rằng không thể đạt được điều đó nếu chúng tôi không sử dụng thành phần ngày tháng

Con trỏ chính xung quanh mã

• Người dùng sẽ cần nhập các giá trị theo cách thủ công vì anh ta sẽ không có đặc quyền chọn chúng từ bộ đếm ngày
• Phần tử mẫu đảm bảo rằng các giá trị đã nhập là hợp lệ. Do đó, thuộc tính mẫu được sử dụng để đạt được xác thực biểu mẫu HTML
• Phần tử bắt buộc buộc người dùng phải nhập một số giá trị vì trường này không được để trống
• Dấu ngoặc đơn đầu tiên trong phần mẫu kiểm tra các giá trị năm chính xác, theo sau là giá trị tháng chính xác và giá trị ngày chính xác
• Để thay đổi ngày sang một định dạng khác, chúng ta chỉ cần thay đổi trình tự của ba lần kiểm tra và dấu phân cách được sử dụng, theo yêu cầu. Dưới đây là mã lấy ngày ở định dạng 'YYYY/MM/DD'

Giải pháp này có nhược điểm là không có popup chọn ngày. Giải pháp sẽ quay trở lại một trong các tiện ích công cụ hẹn hò của jquery

Đặc tả đầu vào ngày HTML5 đề cập đến đặc tả RFC 3339, chỉ định định dạng ngày đầy đủ bằng. yyyy-mm-dd. Xem thông số kỹ thuật RFC 3339 để biết thêm chi tiết

Định dạng này được sử dụng bởi thuộc tính HTML value và thuộc tính DOM và là định dạng được sử dụng khi thực hiện gửi biểu mẫu thông thường

định dạng trình bày

Các trình duyệt không bị hạn chế về cách chúng hiển thị đầu vào ngày tháng. Tại thời điểm viết bài này, Chrome, Edge, Firefox và Opera có hỗ trợ ngày tháng (xem phần ). Tất cả đều hiển thị bộ chọn ngày và định dạng văn bản trong trường nhập liệu

thiết bị máy tính để bàn

Đối với Chrome, Firefox và Opera, định dạng văn bản của trường nhập dựa trên cài đặt ngôn ngữ của trình duyệt. Đối với Edge, nó dựa trên cài đặt ngôn ngữ Windows. Đáng buồn thay, tất cả các trình duyệt web đều bỏ qua định dạng ngày được định cấu hình trong hệ điều hành. Đối với tôi, đây là hành vi rất lạ và cần cân nhắc điều gì đó khi sử dụng loại đầu vào này. Ví dụ: người dùng Hà Lan có hệ điều hành hoặc ngôn ngữ trình duyệt được đặt thành en-us sẽ được hiển thị 01/30/2019 thay vì định dạng mà họ quen dùng. 30-01-2019

Internet Explorer 9, 10 và 11 hiển thị trường nhập văn bản có định dạng dây

Thiêt bị di động

Riêng đối với Chrome trên Android, định dạng dựa trên ngôn ngữ hiển thị của Android. Tôi nghi ngờ rằng điều này cũng đúng với các trình duyệt khác, mặc dù tôi chưa thể xác minh điều này

Làm cách nào để định dạng ngày giờ trong HTML?

Làm cách nào để đặt giá trị mặc định cho loại đầu vào = ngày trong HTML?

Làm cách nào để định dạng ngày trong bảng HTML?