Hướng dẫn how do i create a date calendar in html? - làm cách nào để tạo lịch ngày trong html?

❮ thuộc tính loại HTML

Thí dụ

Hiển thị kiểm soát ngày:

Ngày sinh nhật:

Hãy tự mình thử »

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

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

1 xác định một người 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ẻ

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

2 cho các thực tiễn tiếp cận tốt nhất! Always add the

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

2 tag for best accessibility practices!

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ử.

Thuộc tính

loại = "ngày"

20.0

12.0

57.0

14.1

11.0

Cú pháp

❮ thuộc tính loại HTML

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

3 Các thành phần của

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

4 Tạo các trường đầu vào cho phép người dùng nhập ngày, bằng hộp văn bản xác thực đầu vào hoặc giao diện chọn ngày đặc biệt.
const dateControl = document.querySelector['input[type="date"]']; dateControl.value = '2017-06-01'; console.log[dateControl.value]; // prints "2017-06-01" console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]
4 create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.

Giá trị kết quả bao gồm năm, tháng và ngày, nhưng không phải là thời gian. Thời gian và DateTime Local Các loại đầu vào hỗ trợ thời gian và ngày+thời gian đầu vào.

Thử nó

UI đầu vào thường thay đổi từ trình duyệt sang trình duyệt; Xem khả năng tương thích của trình duyệt để biết thêm chi tiết. Trong các trình duyệt không được hỗ trợ, điều khiển giảm dần một cách duyên dáng đến

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

Giá trị

Một chuỗi đại diện cho ngày được nhập vào đầu vào. Ngày được định dạng theo ISO8601, được mô tả trong định dạng chuỗi ngày.

Bạn có thể đặt giá trị mặc định cho đầu vào với ngày bên trong thuộc tính

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

6, như vậy:

Lưu ý: Định dạng ngày được hiển thị sẽ khác với

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

6 thực tế - ngày được hiển thị được định dạng dựa trên ngôn ngữ của trình duyệt của người dùng, nhưng
const dateControl = document.querySelector['input[type="date"]']; dateControl.value = '2017-06-01'; console.log[dateControl.value]; // prints "2017-06-01" console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]
6 được phân tích cú pháp luôn được định dạng
const dateControl = document.querySelector['input[type="date"]']; dateControl.value = '2017-06-01'; console.log[dateControl.value]; // prints "2017-06-01" console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]
9. The displayed date format will differ from the actual

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

6 — the displayed date is formatted based on the locale of the user's browser, but the parsed

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

6 is always formatted

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

Bạn có thể nhận và đặt giá trị ngày trong JavaScript với các thuộc tính


  
    Enter your birthday:
    
  

  Submit

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

6 và


  
    Enter your birthday:
    
  

  Submit

2. Ví dụ:

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

Mã này tìm thấy phần tử

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

3 đầu tiên có


  
    Enter your birthday:
    
  

  Submit

4 là


  
    Enter your birthday:
    
  

  Submit

5 và đặt giá trị của nó thành


  
    Enter your birthday:
    
  

  Submit

6 [ngày 1 tháng 6 năm 2017]. Sau đó, nó đọc lại giá trị đó trong các định dạng chuỗi và số.

Thuộc tính bổ sung

Các thuộc tính phổ biến cho tất cả các yếu tố

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

3 cũng áp dụng cho các đầu vào


  
    Enter your birthday:
    
  

  Submit

5, nhưng có thể không ảnh hưởng đến bản trình bày của nó. Ví dụ


  
    Enter your birthday:
    
  

  Submit

9 và


  
    Choose your preferred party date:

0 có thể không hoạt động.


  
    Enter your birthday:
    
  

  Submit

5 Đầu vào có các thuộc tính bổ sung sau.

Tối đa

Ngày mới nhất để chấp nhận. Nếu

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

6 nhập vào phần tử xảy ra sau đó, phần tử sẽ không xác thực ràng buộc. Nếu giá trị của thuộc tính


  
    Choose your preferred party date:

3 không phải là chuỗi ngày có thể có trong định dạng

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

9, thì phần tử không có giá trị ngày tối đa.

Nếu cả hai thuộc tính


  
    Choose your preferred party date:

3 và


  
    Choose your preferred party date:

6 được đặt, giá trị này phải là một chuỗi ngày muộn hơn hoặc bằng với tài sản trong thuộc tính


  
    Choose your preferred party date:

6.later than or equal to the one in the


  
    Choose your preferred party date:

6 attribute.

Tối thiểu

Ngày sớm nhất để chấp nhận. Nếu

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

6 nhập vào phần tử xảy ra trước đó, phần tử sẽ không xác thực ràng buộc. Nếu giá trị của thuộc tính


  
    Choose your preferred party date:

6 không phải là chuỗi ngày có thể có trong định dạng

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

9, thì phần tử không có giá trị ngày tối thiểu.

Nếu cả hai thuộc tính


  
    Choose your preferred party date:

3 và


  
    Choose your preferred party date:

6 được đặt, giá trị này phải sớm hơn chuỗi ngày hơn hoặc bằng với thuộc tính trong thuộc tính


  
    Choose your preferred party date:

3.earlier than or equal to the one in the


  
    Choose your preferred party date:

3 attribute.

bươc

Thuộc tính


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

4 là một số chỉ định độ chi tiết mà giá trị phải tuân thủ hoặc giá trị đặc biệt


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

5, được mô tả dưới đây. Chỉ các giá trị bằng với cơ sở để bước [


  
    Choose your preferred party date:

6 nếu được chỉ định,

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

6 nếu không và giá trị mặc định phù hợp nếu không được cung cấp] là hợp lệ.

Giá trị chuỗi của


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

5 có nghĩa là không có bước nào được ngụ ý và bất kỳ giá trị nào được cho phép [chặn các ràng buộc khác, chẳng hạn như


  
    Choose your preferred party date:

6 và


  
    Choose your preferred party date:

3].

Lưu ý: Khi dữ liệu được người dùng nhập không tuân thủ cấu hình bước, tác nhân người dùng có thể làm tròn đến giá trị hợp lệ gần nhất, thích các số theo hướng dương khi có hai tùy chọn gần nhau. When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

Đối với đầu vào


  
    Enter your birthday:
    
  

  Submit

5, giá trị của


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

4 được đưa ra trong ngày; và được coi là một số mili giây bằng 86.400.000 lần giá trị


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

4 [giá trị số cơ bản là tính bằng mili giây]. Giá trị mặc định của


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

4 là 1, cho biết 1 ngày.

Lưu ý: Chỉ định


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

5 là giá trị cho
Choose your preferred party date [required, April 1st to 20th]: Submit
4 có tác dụng tương tự như
label { display: flex; align-items: center; } span::after { padding-left: 5px; } input:invalid + span::after { content: "✖"; } input:valid + span::after { content: "✓"; }
7 đối với đầu vào
Enter your birthday: Submit
5. Specifying


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

5 as the value for


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

4 has the same effect as

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

7 for


  
    Enter your birthday:
    
  

  Submit

5 inputs.

Sử dụng đầu vào ngày

Đầu vào ngày cung cấp một giao diện dễ dàng để chọn ngày và họ bình thường hóa định dạng dữ liệu được gửi đến máy chủ bất kể địa phương của người dùng.

Trong phần này, chúng ta sẽ xem xét các cách sử dụng cơ bản và sau đó là các cách sử dụng phức tạp hơn của

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

Sử dụng cơ bản của ngày

Việc sử dụng đơn giản nhất

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

1 liên quan đến một

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

3 kết hợp với

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

2 của nó, như đã thấy dưới đây:


  
    Enter your birthday:
    
  

  Submit

HTML này gửi ngày nhập vào khóa


  
    Enter your birthday:
    
    
  
  
    Submit

3 đến


  
    Enter your birthday:
    
    
  
  
    Submit

4 - dẫn đến URL như


  
    Enter your birthday:
    
    
  
  
    Submit

Đặt ngày tối đa và tối thiểu

Bạn có thể sử dụng các thuộc tính


  
    Choose your preferred party date:

6 và


  
    Choose your preferred party date:

3 để hạn chế các ngày có thể được người dùng chọn. Trong ví dụ sau, chúng tôi đặt ngày tối thiểu là


  
    Enter your birthday:
    
    
  
  
    Submit

8 và ngày tối đa là


  
    Enter your birthday:
    
    
  
  
    Submit


  
    Choose your preferred party date:

Kết quả là chỉ vài ngày vào tháng 4 năm 2017 có thể được chọn - các phần tháng và năm của hộp văn bản sẽ không thể sửa chữa và ngày bên ngoài tháng 4 năm 2017 không thể được chọn trong tiện ích Picker.

LƯU Ý: Bạn sẽ có thể sử dụng thuộc tính


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

4 để thay đổi số ngày tăng lên mỗi lần ngày được tăng lên [ví dụ: chỉ có thể chọn thứ bảy]. Tuy nhiên, điều này dường như không có trong bất kỳ triển khai nào tại thời điểm viết. You should be able to use the


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

4 attribute to vary the number of days jumped each time the date is incremented [e.g. to only make Saturdays selectable]. However, this does not seem to be in any implementation at the time of writing.

Kiểm soát kích thước đầu vào

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

1 không hỗ trợ các thuộc tính kích thước biểu mẫu như


  
    Enter your birthday:
    
  

  Submit

9. Thích CSS để định cỡ nó.

Thẩm định

Theo mặc định,

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

1 không xác nhận giá trị đã nhập ngoài định dạng của nó. Các giao diện thường không cho phép bạn nhập bất cứ thứ gì không phải là một ngày - rất hữu ích - nhưng bạn có thể để trường trống hoặc nhập một ngày không hợp lệ trong các trình duyệt nơi đầu vào rơi trở lại loại

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

4 [như thứ 32 của tháng Tư] .

Nếu bạn sử dụng


  
    Choose your preferred party date:

6 và


  
    Choose your preferred party date:

3 để hạn chế các ngày có sẵn [xem Cài đặt ngày tối đa và tối thiểu], các trình duyệt hỗ trợ sẽ hiển thị lỗi nếu bạn cố gắng gửi ngày nằm ngoài giới hạn. Tuy nhiên, bạn sẽ cần kiểm tra kỹ các kết quả đã gửi để đảm bảo giá trị nằm trong các ngày này, nếu người chọn ngày không được hỗ trợ đầy đủ trên thiết bị của người dùng.

Bạn cũng có thể sử dụng thuộc tính

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

7 để điền vào ngày bắt buộc - một lỗi sẽ được hiển thị nếu bạn cố gắng gửi một trường ngày trống. Điều này sẽ hoạt động trong hầu hết các trình duyệt, ngay cả khi chúng quay trở lại đầu vào văn bản.

Chúng ta hãy xem một ví dụ về ngày tối thiểu và tối đa, và cũng được thực hiện một lĩnh vực cần thiết:


  
    Choose your preferred party date [required, April 1st to 20th]:
    
    
  

  
    Submit

Nếu bạn cố gắng gửi biểu mẫu với một ngày không đầy đủ [hoặc với một ngày bên ngoài giới hạn bộ], trình duyệt sẽ hiển thị lỗi. Hãy thử chơi với ví dụ ngay bây giờ:

Đây là CSS được sử dụng trong ví dụ trên. Chúng tôi sử dụng các yếu tố giả

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

8 và

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

9 để thêm biểu tượng bên cạnh đầu vào, dựa trên việc giá trị hiện tại có hợp lệ hay không. Chúng tôi đã phải đặt biểu tượng trên


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:

0 bên cạnh đầu vào, không phải trên chính đầu vào, bởi vì trong chrome ít nhất là nội dung được tạo của đầu vào được đặt bên trong điều khiển biểu mẫu và không thể được tạo kiểu hoặc hiển thị hiệu quả.

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

Cảnh báo: Xác thực biểu mẫu phía máy khách không thay thế cho việc xác thực trên máy chủ. Thật dễ dàng để ai đó sửa đổi HTML hoặc bỏ qua hoàn toàn HTML của bạn và gửi dữ liệu trực tiếp đến máy chủ của bạn. Nếu máy chủ của bạn không xác thực dữ liệu đã nhận được, thảm họa có thể tấn công với dữ liệu được định dạng xấu, quá lớn, loại sai, v.v. Client-side form validation is no substitute for validating on the server. It's easy for someone to modify the HTML, or bypass your HTML entirely and submit the data directly to your server. If your server fails to validate the received data, disaster could strike with data that is badly-formatted, too large, of the wrong type, etc.

Xử lý hỗ trợ trình duyệt

Các trình duyệt không hỗ trợ loại đầu vào này xuống cấp một cách duyên dáng với đầu vào văn bản, nhưng điều này tạo ra các vấn đề về tính nhất quán của giao diện người dùng [các điều khiển được trình bày là khác nhau] và xử lý dữ liệu.

Vấn đề thứ hai là vấn đề nghiêm trọng hơn; Với đầu vào ngày được hỗ trợ, giá trị được chuẩn hóa thành định dạng

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

9. Nhưng với đầu vào văn bản, trình duyệt không nhận ra định dạng nào ngày nào và có nhiều định dạng trong đó mọi người viết ngày. Ví dụ:


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:

Một cách xung quanh này là thuộc tính


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:

8 trên đầu vào ngày của bạn. Mặc dù người chọn ngày không sử dụng nó, nhưng dự phòng đầu vào văn bản sẽ. Ví dụ: hãy thử xem phần sau trong trình duyệt không hỗ trợ:


  
    Enter your birthday:
    
    
  
  
    Submit

Nếu bạn gửi nó, bạn sẽ thấy rằng trình duyệt hiển thị lỗi và làm nổi bật đầu vào là không hợp lệ nếu mục nhập của bạn không khớp với mẫu


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:

9 [trong đó

span {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

0 là một chữ số từ 0 đến 9]. Tất nhiên, điều này không ngăn mọi người nhập ngày không hợp lệ hoặc định dạng không chính xác. Vì vậy, chúng tôi vẫn có một vấn đề.

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

Hiện tại, cách tốt nhất để đối phó với ngày trong các hình thức theo cách trình duyệt chéo là để người dùng nhập ngày, tháng và năm trong các điều khiển riêng biệt hoặc sử dụng thư viện JavaScript như JQuery Date Picker.

Ví dụ

Trong ví dụ này, chúng tôi tạo 2 bộ phần tử UI để chọn ngày: trình chọn

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

1 gốc và bộ 3 phần tử

span {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

2 cho các trình duyệt cũ không hỗ trợ đầu vào ngày gốc.

HTML

HTML trông giống như vậy:


  
    Enter your birthday:
    
    
  
  Enter your birthday:
  
    
      Day:
      
    
    
      Month:
      
        January
        February
        March
        April
        May
        June
        July
        August
        September
        October
        November
        December
      
    
    
      Year:

Các tháng được mã hóa cứng [vì chúng luôn giống nhau], trong khi các giá trị ngày và năm được tạo động tùy thuộc vào tháng và năm hiện được chọn và năm hiện tại [xem các bình luận mã bên dưới để giải thích chi tiết về cách các chức năng này hoạt động. ]

span {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

JavaScript

Phần khác của mã có thể được quan tâm là mã phát hiện tính năng - để phát hiện xem trình duyệt có hỗ trợ

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

1 hay không.

Chúng tôi tạo một phần tử

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

3 mới, thử đặt


  
    Enter your birthday:
    
  

  Submit

4 thành


  
    Enter your birthday:
    
  

  Submit

5, sau đó kiểm tra ngay loại của nó - các trình duyệt không hỗ trợ sẽ trả về

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

4, vì loại


  
    Enter your birthday:
    
  

  Submit

5 rơi trở lại loại

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

4. Nếu

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

1 không được hỗ trợ, chúng tôi ẩn người chọn bản địa và thay vào đó, hãy hiển thị dự phòng [

span {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

2].

const dateControl = document.querySelector['input[type="date"]'];
dateControl.value = '2017-06-01';
console.log[dateControl.value]; // prints "2017-06-01"
console.log[dateControl.valueAsNumber]; // prints 1496275200000, a JavaScript timestamp [ms]

Lưu ý: Hãy nhớ rằng một số năm có 53 tuần trong đó [xem tuần mỗi năm]! Bạn sẽ cần xem xét điều này khi phát triển các ứng dụng sản xuất. Remember that some years have 53 weeks in them [see Weeks per year]! You'll need to take this into consideration when developing production apps.

Thông số kỹ thuật

Sự chỉ rõ

HTML Tiêu chuẩn # ngày-trạng thái- [type = ngày]
# date-state-[type=date]

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Làm thế nào có thể đặt định dạng ngày trong ngày trong HTML?

Để đặt và nhận ngày đầu vào ở định dạng DD-MM-YYYY, chúng tôi sẽ sử dụng thuộc tính Loại.Thuộc tính loại được sử dụng để xác định trình chọn ngày hoặc trường điều khiển.Trong thuộc tính này, bạn có thể đặt phạm vi từ đó có thể chọn ngày trong năm tháng mà ngày trong năm tháng có thể được chọn.use type attribute. The type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.

Có thẻ ngày trong HTML không?

Thẻ HTML là phần tử HTML5 xác định giá trị thời gian [trên đồng hồ 24 giờ] hoặc ngày [trong lịch Gregorian] trong tài liệu HTML. is an HTML5 element that defines either a time value [on a 24-hour clock] or a date [in the Gregorian calendar] in the HTML document.

Thí dụ

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

Hỗ trợ trình duyệt

Cú pháp

Thử nó

Giá trị

Thuộc tính bổ sung

Tối đa

Tối thiểu

bươc

Sử dụng đầu vào ngày

Sử dụng cơ bản của ngày

Đặt ngày tối đa và tối thiểu

Kiểm soát kích thước đầu vào

Thẩm định

Xử lý hỗ trợ trình duyệt

Ví dụ

HTML

JavaScript

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Làm thế nào có thể đặt định dạng ngày trong ngày trong HTML?

Có thẻ ngày trong HTML không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề