Hướng dẫn how to set dob in html? - làm cách nào để đặt dob ​​trong html?

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)

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)

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)

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)

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)

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

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)

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

Giá trị

Một chuỗi đại diện cho một ngày ở định dạng Yyyy-MM-DD hoặc trống

Sự kiện

<input type="date" value="2017-06-01" />

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)

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)

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

Được hỗ trợ các thuộc tính chung

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)

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)

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)

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

Thuộc tính IDL

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)

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

Giao diện DOM

Phương pháp

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

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

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

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

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

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

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

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

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity">span>
  label>

  <p>
    <button>Submitbutton>
  p>
form>

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

6

Enter your birthday:

Submit

3 và

Enter your birthday:

Submit

5. Ví dụ:

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)

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity">span>
  label>

  <p>
    <button>Submitbutton>
  p>
form>

Giá trị chuỗi là

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

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

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

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

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

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

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

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

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity">span>
  label>

  <p>
    <button>Submitbutton>
  p>
form>

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

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

Lưu ý: Chỉ định

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

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

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

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

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

span {
  position: relative;
}

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

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

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

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

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

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

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

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

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

span {
  position: relative;
}

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

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

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

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

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)

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)

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)

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

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

span {
  position: relative;
}

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

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

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

span {
  position: relative;
}

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

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

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

span {
  position: relative;
}

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

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

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

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

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

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

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

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

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

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity">span>
  label>

  <p>
    <button>Submitbutton>
  p>
form>

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:label>
    <input type="date" id="bday" name="bday" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">Enter your birthday:p>
  <div class="fallbackDatePicker">
    <span>
      <label for="day">Day:label>
      <select id="day" name="day">select>
    span>
    <span>
      <label for="month">Month:label>
      <select id="month" name="month">
        <option selected>Januaryoption>
        <option>Februaryoption>
        <option>Marchoption>
        <option>Apriloption>
        <option>Mayoption>
        <option>Juneoption>
        <option>Julyoption>
        <option>Augustoption>
        <option>Septemberoption>
        <option>Octoberoption>
        <option>Novemberoption>
        <option>Decemberoption>
      select>
    span>
    <span>
      <label for="year">Year:label>
      <select id="year" name="year">select>
    span>
  div>
form>

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:label>
    <input type="date" id="bday" name="bday" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">Enter your birthday:p>
  <div class="fallbackDatePicker">
    <span>
      <label for="day">Day:label>
      <select id="day" name="day">select>
    span>
    <span>
      <label for="month">Month:label>
      <select id="month" name="month">
        <option selected>Januaryoption>
        <option>Februaryoption>
        <option>Marchoption>
        <option>Apriloption>
        <option>Mayoption>
        <option>Juneoption>
        <option>Julyoption>
        <option>Augustoption>
        <option>Septemberoption>
        <option>Octoberoption>
        <option>Novemberoption>
        <option>Decemberoption>
      select>
    span>
    <span>
      <label for="year">Year:label>
      <select id="year" name="year">select>
    span>
  div>
form>

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

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

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  label>

  <p><button>Submitbutton>p>
form>

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)

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity">span>
  label>

  <p>
    <button>Submitbutton>
  p>
form>

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)

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:label>
    <input type="date" id="bday" name="bday" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">Enter your birthday:p>
  <div class="fallbackDatePicker">
    <span>
      <label for="day">Day:label>
      <select id="day" name="day">select>
    span>
    <span>
      <label for="month">Month:label>
      <select id="month" name="month">
        <option selected>Januaryoption>
        <option>Februaryoption>
        <option>Marchoption>
        <option>Apriloption>
        <option>Mayoption>
        <option>Juneoption>
        <option>Julyoption>
        <option>Augustoption>
        <option>Septemberoption>
        <option>Octoberoption>
        <option>Novemberoption>
        <option>Decemberoption>
      select>
    span>
    <span>
      <label for="year">Year:label>
      <select id="year" name="year">select>
    span>
  div>
form>

Nếu bạn sử dụng

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

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

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

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

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity">span>
  label>

  <p>
    <button>Submitbutton>
  p>
form>

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

span {
  padding-left: 5px;
}

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

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

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:

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity">span>
  label>

  <p>
    <button>Submitbutton>
  p>
form>

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 {
  padding-left: 5px;
}

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

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

span {
  padding-left: 5px;
}

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

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

span {
  padding-left: 5px;
}

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

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

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

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

• span {
    padding-left: 5px;
  }
  
  input:invalid + span::after {
    content: "✖";
  }
  
  input:valid + span::after {
    content: "✓";
  }
  

  6

• span {
    padding-left: 5px;
  }
  
  input:invalid + span::after {
    content: "✖";
  }
  
  input:valid + span::after {
    content: "✓";
  }
  

  7

• span {
    padding-left: 5px;
  }
  
  input:invalid + span::after {
    content: "✖";
  }
  
  input:valid + span::after {
    content: "✓";
  }
  

  8

• span {
    padding-left: 5px;
  }
  
  input:invalid + span::after {
    content: "✖";
  }
  
  input:valid + span::after {
    content: "✓";
  }
  

  9

• 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)
  

  00

• 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)
  

  01

Một cách xung quanh này là 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)

<form>
  <label>
    Enter your birthday:
    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity">span>
  label>
  <p>
    <button>Submitbutton>
  p>
form>

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

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)

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)

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)

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)

HTML

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

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:label>
    <input type="date" id="bday" name="bday" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">Enter your birthday:p>
  <div class="fallbackDatePicker">
    <span>
      <label for="day">Day:label>
      <select id="day" name="day">select>
    span>
    <span>
      <label for="month">Month:label>
      <select id="month" name="month">
        <option selected>Januaryoption>
        <option>Februaryoption>
        <option>Marchoption>
        <option>Apriloption>
        <option>Mayoption>
        <option>Juneoption>
        <option>Julyoption>
        <option>Augustoption>
        <option>Septemberoption>
        <option>Octoberoption>
        <option>Novemberoption>
        <option>Decemberoption>
      select>
    span>
    <span>
      <label for="year">Year:label>
      <select id="year" name="year">select>
    span>
  div>
form>

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)

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)

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:label>
    <input type="date" id="bday" name="bday" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">Enter your birthday:p>
  <div class="fallbackDatePicker">
    <span>
      <label for="day">Day:label>
      <select id="day" name="day">select>
    span>
    <span>
      <label for="month">Month:label>
      <select id="month" name="month">
        <option selected>Januaryoption>
        <option>Februaryoption>
        <option>Marchoption>
        <option>Apriloption>
        <option>Mayoption>
        <option>Juneoption>
        <option>Julyoption>
        <option>Augustoption>
        <option>Septemberoption>
        <option>Octoberoption>
        <option>Novemberoption>
        <option>Decemberoption>
      select>
    span>
    <span>
      <label for="year">Year:label>
      <select id="year" name="year">select>
    span>
  div>
form>

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:label>
    <input type="date" id="bday" name="bday" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">Enter your birthday:p>
  <div class="fallbackDatePicker">
    <span>
      <label for="day">Day:label>
      <select id="day" name="day">select>
    span>
    <span>
      <label for="month">Month:label>
      <select id="month" name="month">
        <option selected>Januaryoption>
        <option>Februaryoption>
        <option>Marchoption>
        <option>Apriloption>
        <option>Mayoption>
        <option>Juneoption>
        <option>Julyoption>
        <option>Augustoption>
        <option>Septemberoption>
        <option>Octoberoption>
        <option>Novemberoption>
        <option>Decemberoption>
      select>
    span>
    <span>
      <label for="year">Year:label>
      <select id="year" name="year">select>
    span>
  div>
form>

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)

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)

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.

Xem thêm