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?' Như chúng tôi đã nói, không thể đạt được điều đó chỉ với HTML5 nếu chúng tôi chỉ 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
Tôi có hai trường nhập ngày - Từ ngày và Ngày bắt đầu. Tôi cần chuyển trình giữ chỗ trong chúng thay vì nhãn. Tôi đã cố gắng thêm một số văn bản vào thuộc tính Prompt, nhưng nó vẫn hiển thị là "mm/dd/yyyy". Tôi đã thử giải pháp được đề cập tại đây. Nó hoạt động cho trình giữ chỗ, nhưng bây giờ nó không hiển thị ngày đã chọn trong trường. Vui lòng tìm video dưới đây để tham khảo. Tôi đã thêm css vào giải pháp được đề cập cho Ngày từ nhưng không phải cho Ngày kết thúc
Hình ảnh là Ngày kết thúc (đối với Ngày bắt đầu - tôi đã thêm CSS từ liên kết được đề cập).
Trân trọng,
Aman
Thuộc tính trình giữ chỗ không hoạt động với loại đầu vào Ngày, vì vậy hãy đặt bất kỳ giá trị nào làm trình giữ chỗ trong loại đầu vào Ngày. Bạn có thể sử dụng onfocus=”(cái này. type=’date’) bên trong trường nhập liệu. Bởi vì bạn được yêu cầu phải có giá trị giữ chỗ tùy chỉnh cho loại đầu vào "ngày" và bạn có lịch thả xuống nơi người dùng có thể chọn ngày từ đó. cú pháp
onfocus="(this.type='date')"Ví dụ dưới đây minh họa cách tiếp cận trên. ví dụ 1.
html
<!DOCTYPE html>
<html>
<head>
<<!DOCTYPE html>0_______5_______
<!DOCTYPE html>2<!DOCTYPE html>3
<!DOCTYPE html>2<!DOCTYPE html>5
<!DOCTYPE html>7_______2_______0>
<!DOCTYPE html>7head>
<<5 <6
<html0 html1html0>
<html7_______4_______8html7>
>3
>5
<>8 >9
<0<1_______3_______2<3<4<5
<8
head0
<>8 head4
<!DOCTYPE html>7<5>
<!DOCTYPE html>7html>0
Đầu ra.
html
<!DOCTYPE html>
<html>
<head>
<<!DOCTYPE html>0_______5_______
<!DOCTYPE html>2 3
<!DOCTYPE html>7_______2_______0>
<!DOCTYPE html>7head>
<<5 <6
<html0 html1html0>
<html7_______4_______8html7>
>3
>5
<>8 >9
<!DOCTYPE html>2<1_______3_______2<3<4<!DOCTYPE html>22
<!DOCTYPE html>2<!DOCTYPE html>24<2<3_______2_______27<5
<8
head0
<>8 head4
<!DOCTYPE html>7<5>
<!DOCTYPE html>7html<!DOCTYPE html>43
đầu ra.
- Như chúng ta có thể thấy, chúng ta có thể sửa đổi văn bản giữ chỗ nếu cần. Bằng một cú nhấp chuột, chúng tôi nhận được trường nhập ngày tiêu chuẩn và chúng tôi có thể nhập ngày.
- Sau khi nhập ngày, nó trông như sau.
- Khi mất tiêu điểm, nó sẽ thay đổi trở lại thành trường văn bản do sự kiện bật mờ mà chúng tôi đã giới thiệu.
HTML là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này