inputdateObject.max = YYYY-MM-DD9
0 >
1 ❮ Đối tượng Ngày nhập
Thí dụ
Nhận ngày tối đa được phép cho một trường ngày
var x = tài liệu. getElementById["myDate"]. tối đa;
Tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính max đặt hoặc trả về giá trị của thuộc tính max của trường ngày
Thuộc tính max chỉ định giá trị tối đa [ngày] cho trường ngày
Mẹo. Sử dụng thuộc tính max cùng với thuộc tính min để tạo phạm vi giá trị pháp lý
Mẹo. Để đặt hoặc trả về giá trị của thuộc tính min, hãy sử dụng thuộc tính min
Hỗ trợ trình duyệt
Thuộc tính tối đaCó12. 0CóCóCóGhi chú. không hiển thị dưới dạng trường ngày thích hợp trong IE11 trở về trước
cú pháp
Trả lại thuộc tính tối đa
Đặt thuộc tính tối đa
inputdateObject. tối đa = YYYY-MM-DD
Giá trị tài sản
ValueDescriptionYYYY-MM-DDSchỉ định ngày tối đa được phép cho trường ngàyGiải thích các thành phần
- YYYY - năm [e. g. 2011]
- MM - tháng [e. g. 01 cho tháng 1]
- DD - ngày trong tháng [e. g. 08]
chi tiết kỹ thuật
Giá trị trả về. Một chuỗi, đại diện cho ngày tối đa được phépThêm ví dụ
Thí dụ
Thay đổi ngày tối đa
tài liệu. getElementById["myDate"]. max = "2014-01-01";
Tự mình thử »Trang liên quan
tài liệu tham khảo HTML. Thuộc tính tối đa HTML
❮ Đối tượng Ngày nhậpMẹo. Sử dụng thuộc tính max
cùng với thuộc tính min
để tạo phạm vi giá trị pháp lý
Ghi chú. Các thuộc tính max
và min
hoạt động với các loại đầu vào sau. số, phạm vi, ngày, datetime-local, tháng, thời gian và tuần
Thuộc tính max sẽ không hoạt động đối với ngày và giờ trong Internet Explorer 10+ hoặc Firefox, vì IE 10+ và Firefox không hỗ trợ các loại đầu vào này
CHỈNH SỬA. Firefox hiện hỗ trợ nó
Vì vậy, nếu bạn bối rối trước tài liệu về các thuộc tính đó, nhưng nó không hoạt động, đó là lý do tại sao
Xem trang W3 để biết các phiên bản
Tôi thấy sử dụng Javascript dễ nhất, như các câu trả lời khác nói, vì bạn chỉ có thể sử dụng mô-đun được tạo sẵn. Ngoài ra, nhiều thư viện bộ chọn ngày Javascript có cài đặt tối thiểu/tối đa và có giao diện lịch đẹp mắt
Các 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]
1 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]
2 tạo các trường nhập cho phép người dùng nhập ngày, bằng hộp văn bản xác thực thông tin nhập hoặc giao diện chọn ngày đặc biệtGiá trị kết quả bao gồm năm, tháng và ngày, nhưng không bao gồm thời gian. Các kiểu đầu vào time và datetime-local hỗ trợ đầu vào thời gian và ngày+thời gian
Giao diện người dùng đầu vào thường thay đổi từ trình duyệt này sang trình duyệt khác; . Trong các trình duyệt không được hỗ trợ, điều khiển xuống cấp nhẹ nhàng thà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]
3Một chuỗi đại diện cho ngày được nhập trong đầu vào. Ngày được định dạng theo ISO8601, được mô tả trong
Bạn có thể đặt giá trị mặc định cho đầu vào có ngày bên trong thuộc tính, như vậy
Ghi chú. Đị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]
4 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]
4 đượ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]
7Bạn có thể lấy và đặt giá trị ngày trong JavaScript bằng các 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]
8 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 và
Enter your birthday:
Submit
0. 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 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]
1 đầu tiên có
Enter your birthday:
Submit
2 là
Enter your birthday:
Submit
3 và đặt giá trị của nó thành
Enter your birthday:
Submit
4 [ngày 1 tháng 6 năm 2017]. Sau đó, nó đọc lại giá trị đó ở định dạng chuỗi và sốCác thuộc tính chung cho tất cả các 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]
1 cũng áp dụng cho các đầu vào
Enter your birthday:
Submit
3, nhưng có thể không ảnh hưởng đến cách trình bày của nó. Ví dụ:
Enter your birthday:
Submit
7 và
Enter your birthday:
Submit
8 có thể không hoạt động.
Enter your birthday:
Submit
3 đầu vào có các thuộc tính bổ sung sauNgày mới nhất để chấp nhận. Nếu việc nhập vào phần tử xảy ra sau đó, phần tử 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:
1 không phải là chuỗi ngày có thể ở đị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]
7, thì phần tử không có giá trị ngày tối đaNếu cả hai thuộc tính
Choose your preferred party date:
1 và
Choose your preferred party date:
4 đều được đặt, thì giá trị này phải là một chuỗi ngày muộn hơn hoặc bằng chuỗi ngày trong thuộc tính
Choose your preferred party date:
4Ngày sớm nhất để chấp nhận. Nếu nhập vào phần tử xảy ra trước đó, phần tử 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:
4 không phải là một chuỗi ngày có thể 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]
7, thì phần tử không có giá trị ngày tối thiểuNếu cả hai thuộc tính
Choose your preferred party date:
1 và
Choose your preferred party date:
4 đều được đặt, thì giá trị này phải là một chuỗi ngày sớm hơn hoặc bằng chuỗi ngày trong thuộc tính
Choose your preferred party date:
1Thuộc tính
Choose your preferred party date [required, April 1st to 20th]:
Submit
2 là một số chỉ định mức độ chi tiết mà giá trị phải tuân theo hoặc giá trị đặc biệt
Choose your preferred party date [required, April 1st to 20th]:
Submit
3, được mô tả bên dưới. Chỉ các giá trị bằng với cơ sở để bước [nếu được chỉ định, ngược lại và giá trị mặc định phù hợp nếu không có giá trị nào được cung cấp] mới hợp lệGiá trị chuỗi
Choose your preferred party date [required, April 1st to 20th]:
Submit
3 có nghĩa là không có bước nào được ngụ ý và mọi giá trị đều được phép [không bao gồm các ràng buộc khác, chẳng hạn như và ]Ghi chú. Khi dữ liệu do người dùng nhập không tuân theo cấu hình từng 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, ưu tiên các số theo hướng dương khi có hai tùy chọn gần bằng nhau
Đối với đầu vào
Enter your birthday:
Submit
3, giá trị của
Choose your preferred party date [required, April 1st to 20th]:
Submit
2 được tính bằng ngày; . Giá trị mặc định của
Choose your preferred party date [required, April 1st to 20th]:
Submit
2 là 1, biểu thị 1 ngàyGhi chú. Chỉ định
Choose your preferred party date [required, April 1st to 20th]:
Submit
3 làm giá trị cho
Choose your preferred party date [required, April 1st to 20th]:
Submit
2 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: "✓";
}
5 cho đầu vào
Enter your birthday:
Submit
3Đầu vào ngày cung cấp một giao diện dễ dàng để chọn ngày và chúng chuẩn hóa định dạng dữ liệu được gửi đến máy chủ bất kể ngôn 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à phức tạp hơn của
label {
display: flex;
align-items: center;
}
span::after {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
7Cách sử dụng đơn giản nhất của
label {
display: flex;
align-items: center;
}
span::after {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
7 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]
1 kết hợp với
Enter your birthday:
Submit
0 của nó, như được thấy bên dưới
Enter your birthday:
Submit
HTML này gửi ngày đã nhập theo khóa
Enter your birthday:
Submit
1 đến
Enter your birthday:
Submit
2 — dẫn đến một URL như
Enter your birthday:
Submit
3Bạn có thể sử dụng các thuộc tính và để hạn chế ngày mà người dùng có thể chọn. Trong ví dụ sau, chúng tôi đặt ngày tối thiểu là
Enter your birthday:
Submit
6 và ngày tối đa là
Enter your birthday:
Submit
7
Choose your preferred party date:
Kết quả là chỉ có thể chọn các ngày trong tháng 4 năm 2017 — các phần tháng và năm của hộp văn bản sẽ không thể chỉnh sửa được và không thể chọn các ngày ngoài tháng 4 năm 2017 trong tiện ích bộ chọn
Ghi chú. Bạn sẽ có thể sử dụng thuộc tính để thay đổi số ngày nhảy mỗi khi ngày được tăng lên [e. g. để chỉ có thể chọn các ngày Thứ Bảy]. Tuy nhiên, điều này dường như không được triển khai tại thời điểm viết
label {
display: flex;
align-items: center;
}
span::after {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
7 không hỗ trợ các thuộc tính định cỡ biểu mẫu, chẳng hạn như. Thích CSS hơn để định cỡ nóTheo mặc định,
label {
display: flex;
align-items: center;
}
span::after {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
7 không xác thực 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à ngày tháng — điều này rất hữu ích — nhưng bạn có thể để trống trường này 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 chuyển về kiểu span {
position: relative;
}
span::after {
right: -18px;
position: absolute;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
2 [chẳng hạn như ngày 32 tháng 4]Nếu bạn sử dụng và để hạn chế ngày có sẵn [xem ], 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 vượt quá giới hạn. Tuy nhiên, bạn cần kiểm tra kỹ các kết quả đã gửi để đảm bảo giá trị nằm trong những ngày này, nếu bộ 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 này để bắt buộc phải điền ngày — một lỗi sẽ 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 lại kiểu nhập văn bản
Hãy xem một ví dụ về ngày tối thiểu và tối đa, đồng thời tạo trường bắt buộc
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 ngày không đầy đủ [hoặc với ngày nằm ngoài giới hạn đã đặt], 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 phần tử giả
span {
position: relative;
}
span::after {
right: -18px;
position: absolute;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
6 và span {
position: relative;
}
span::after {
right: -18px;
position: absolute;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
7 để thêm một 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 span {
position: relative;
}
span::after {
right: -18px;
position: absolute;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
8 bên cạnh đầu vào chứ không phải trên chính đầu vào vì trong Chrome ít nhất 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ị một cách 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 thể thay thế cho xác thực trên máy chủ. Ai đó có thể dễ dàng 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 được dữ liệu đã nhận, thảm họa có thể xảy ra với dữ liệu có định dạng sai, quá lớn, sai loại, v.v.
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 nhẹ nhàng thành kiểu nhập 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; . Nhưng với kiểu nhập văn bản, trình duyệt không nhận dạng được ngày tháng phải ở định dạng nào và có nhiều định dạng mà mọi người viết ngày tháng. Ví dụ
0Enter your birthday: Enter your birthday: Day: Month: January February March April May June July August September October November December Year:
1Enter your birthday: Enter your birthday: Day: Month: January February March April May June July August September October November December Year:
2Enter your birthday: Enter your birthday: Day: Month: January February March April May June July August September October November December Year:
3Enter your birthday: Enter your birthday: Day: Month: January February March April May June July August September October November December Year:
4Enter your birthday: Enter your birthday: Day: Month: January February March April May June July August September October November December Year:
5Enter your birthday: Enter your birthday: Day: Month: January February March April May June July August September October November December Year:
Một cách giải quyết vấn đề này là thuộc tính trên đầu vào ngày tháng của bạn. Mặc dù bộ chọn ngày không sử dụng nó, dự phòng nhập văn bản sẽ. Ví dụ: thử xem nội dung 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 trình duyệt hiển thị lỗi và đánh dấu đầ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:
7 [trong đó
Enter your birthday:
Enter your birthday:
Day:
Month:
January
February
March
April
May
June
July
August
September
October
November
December
Year:
8 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 để xử lý ngày trong biểu mẫu theo cách trên nhiều trình duyệt là yêu cầu 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 chẳng hạn như bộ chọn ngày jQuery
Trong ví dụ này, chúng tôi tạo 2 bộ thành phần giao diện người dùng để chọn ngày. bộ chọn
label {
display: flex;
align-items: center;
}
span::after {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
7 gốc và bộ 3 phần tử span {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
0 cho các trình duyệt cũ hơn không hỗ trợ đầu vào ngày gốcHTML 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 nhận xét mã bên dưới để biết giải thích chi tiết về cách thức hoạt động của các chức năng này. ]
span {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
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ợ
label {
display: flex;
align-items: center;
}
span::after {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
7 hay khôngChú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]
1 mới, thử đặt
Enter your birthday:
Submit
2 thành
Enter your birthday:
Submit
3, sau đó kiểm tra ngay loại của nó là gì — 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: "✓";
}
2, vì loại
Enter your birthday:
Submit
3 chuyển về loại span {
position: relative;
}
span::after {
right: -18px;
position: absolute;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
2. Nếu label {
display: flex;
align-items: center;
}
span::after {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
7 không được hỗ trợ, chúng tôi sẽ ẩn bộ chọn gốc và hiển thị dự phòng [span {
padding-left: 5px;
}
input:invalid + span::after {
content: "✖";
}
input:valid + span::after {
content: "✓";
}
0] thay 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]
0Ghi chú. Hãy nhớ rằng một số năm có 53 tuần trong đó [xem ]. Bạn sẽ cần cân nhắc điều này khi phát triển các ứng dụng sản xuất