Ngày HTML tối đa

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)

Mộ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

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

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)

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)

Bạ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)

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>

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)

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

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)

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

Ngà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

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
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)

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

<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:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

Ngà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

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
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)

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

<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:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  label>
form>

Thuộc tính

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

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

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

<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 (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>
  <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>

Ghi chú. Chỉ định

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

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>

Đầ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: "✓";
}

Cá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: "✓";
}

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>

<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 theo khóa

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

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

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

Bạ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à

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

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

<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ỉ 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: "✓";
}

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: "✓";
}

span {
  position: relative;
}

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

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

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

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

<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 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: "✓";
}

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: "✓";
}

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ụ

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

  0

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

  1

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

  2

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

  3

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

  4

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

  5

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ợ

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

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

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: "✓";
}

span {
  padding-left: 5px;
}

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

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

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 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: "✓";
}

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

span {
  position: relative;
}

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

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: "✓";
}

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

span::after {
  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: "✓";
}

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)

Ghi 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

Làm cách nào để đặt ngày tối đa hôm nay trong Datepicker trong HTML?

Có giới hạn về HTML không?

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