Hướng dẫn is month input type attribute in html5? - thuộc tính loại đầu vào tháng trong html5?

Thử nó

UI của điều khiển nói chung từ trình duyệt đến trình duyệt; Tại thời điểm hỗ trợ là chắp vá, chỉ có Chrome/Opera và Edge trên máy tính để bàn - và hầu hết các phiên bản trình duyệt di động hiện đại - có các triển khai có thể sử dụng. Trong các trình duyệt không hỗ trợ đầu vào

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

Đối với những người bạn sử dụng trình duyệt không hỗ trợ

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

Điều khiển Microsoft Edge

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

Giá trị

Một chuỗi đại diện cho giá trị của tháng và năm được nhập vào đầu vào, dưới dạng yyyy-mm (năm hoặc nhiều chữ số, sau đó là dấu gạch nối ("

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

Đặt giá trị mặc định

Bạn có thể đặt giá trị mặc định cho điều khiển đầu vào bằng cách bao gồm một tháng và năm bên trong thuộc tính

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

<label for="bday-month">What month were you born in?label>
 <input id="bday-month" type="month" name="bday-month" value="2001-06" />

Một điều cần lưu ý là định dạng ngày được hiển thị khác với

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

Ví dụ, khi giá trị trên được gửi đến máy chủ, nó sẽ trông giống như

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

Đặt giá trị bằng JavaScript

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

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

Thuộc tính bổ sung

Ngoài các thuộc tính phổ biến cho các phần tử

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

danh sách

Các giá trị của thuộc tính danh sách là

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

Tối đa

Năm mới nhất và tháng, ở định dạng chuỗi được thảo luận trong phần giá trị ở trên, để chấp nhận. Nếu

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

Giá trị này phải chỉ định một cặp một tháng một lần muộn hơn hoặc bằng với giá trị được chỉ định bởi thuộc tính

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

Tối thiểu

Năm mới nhất và tháng để chấp nhận, trong cùng định dạng "

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

Giá trị này phải là một cặp một tháng, sớm hơn hoặc bằng với giá trị được chỉ định bởi thuộc tính

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

chỉ đọc

Một thuộc tính Boolean, nếu có, có nghĩa là trường này không thể được chỉnh sửa bởi người dùng. Tuy nhiên,

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

Lưu ý: Vì trường chỉ đọc không thể có giá trị,

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

bươc

Thuộc tính

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = '2001-06';

Giá trị chuỗi của

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
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

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

Sử dụng đầu vào tháng

Đầu vào liên quan đến ngày (bao gồm

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

Chúng tôi sẽ xem xét các cách sử dụng cơ bản và phức tạp hơn của

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

Sử dụng cơ bản của tháng

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

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

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

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

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

Kết quả ở đây là:

• Chỉ vài tháng từ tháng 1 năm 1900 đến tháng 12 năm 2013 có thể được chọn; Một tháng bên ngoài phạm vi đó không thể được cuộn đến trong điều khiển.
• Tùy thuộc vào trình duyệt bạn đang sử dụng, bạn có thể thấy rằng nhiều tháng ngoài phạm vi được chỉ định có thể không thể chọn trong trình chọn tháng (ví dụ: cạnh) hoặc không hợp lệ (xem xác thực) nhưng vẫn có sẵn (ví dụ: chrome).

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

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Thẩm định

Theo mặc định,

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

Để giúp tránh điều này, bạn có thể sử dụng

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

<form>
  <label for="bday-month">What month were you born in?label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
form>

Hãy xem xét một ví dụ; Ở đây chúng tôi đã đặt ngày tối thiểu và tối đa, và cũng được yêu cầu trường:

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

Nếu bạn cố gắng gửi biểu mẫu mà không có cả tháng và năm được chỉ định (hoặc với một ngày bên 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à ảnh chụp màn hình cho những người không sử dụng trình duyệt hỗ trợ:

Đây là CSS được sử dụng trong ví dụ trên. Ở đây chúng tôi sử dụng các thuộc tính CSS

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Cảnh báo: Xác thực biểu mẫu HTML không phải là một thay thế cho các tập lệnh đảm bảo rằng dữ liệu đã nhập ở định dạng thích hợp. Thật dễ dàng để ai đó thực hiện các điều chỉnh cho HTML cho phép họ bỏ qua việc xác thực hoặc loại bỏ nó hoàn toàn. Ai đó cũng có thể 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ã phía máy chủ của bạn không xác thực dữ liệu mà nó nhận được, thảm họa có thể tấn công khi dữ liệu được định dạng không đúng cách được gửi (hoặc dữ liệu quá lớn, loại sai, v.v.). HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

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

Như đã đề cập ở trên, vấn đề chính với việc sử dụng đầu vào ngày tại thời điểm viết là nhiều trình duyệt chính chưa thực hiện tất cả; Chỉ có Chrome/Opera và Edge hỗ trợ nó trên máy tính để bàn và hầu hết các trình duyệt hiện đại trên thiết bị di động. Ví dụ, trình chọn

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

Các trình duyệt không hỗ trợ xuống cấp 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 đề cả về tính nhất quán của giao diện người dùng (điều khiển được trình bày sẽ khác nhau) và xử lý dữ liệu.

Vấn đề thứ hai là nghiêm trọng hơn trong hai người. Như đã đề cập trước đó, với đầu vào

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

• <form>
    <div>
      <label for="month">
        What month would you like to visit (June to Sept.)?
      label>
      <input
        id="month"
        type="month"
        name="month"
        min="2022-06"
        max="2022-09"
        required
        pattern="[0-9]{4}-[0-9]{2}" />
      <span class="validity">span>
    div>
    <div>
      <input type="submit" value="Submit form" />
    div>
  form>
  

  9 (072022)

• div {
    margin-bottom: 10px;
    position: relative;
  }
  
  input[type="number"] {
    width: 100px;
  }
  
  input + span {
    padding-right: 30px;
  }
  
  input:invalid + span::after {
    position: absolute;
    content: "✖";
    padding-left: 5px;
  }
  
  input:valid + span::after {
    position: absolute;
    content: "✓";
    padding-left: 5px;
  }
  

  0 (07/2022)

• div {
    margin-bottom: 10px;
    position: relative;
  }
  
  input[type="number"] {
    width: 100px;
  }
  
  input + span {
    padding-right: 30px;
  }
  
  input:invalid + span::after {
    position: absolute;
    content: "✖";
    padding-left: 5px;
  }
  
  input:valid + span::after {
    position: absolute;
    content: "✓";
    padding-left: 5px;
  }
  

  1 (07-2022)

• <form>
    <div>
      <label for="month">
        What month would you like to visit (June to Sept.)?
      label>
      <input
        id="month"
        type="month"
        name="month"
        min="2022-06"
        max="2022-09"
        required
        pattern="[0-9]{4}-[0-9]{2}" />
      <span class="validity">span>
    div>
    <div>
      <input type="submit" value="Submit form" />
    div>
  form>
  

  7 (2022-07)

• div {
    margin-bottom: 10px;
    position: relative;
  }
  
  input[type="number"] {
    width: 100px;
  }
  
  input + span {
    padding-right: 30px;
  }
  
  input:invalid + span::after {
    position: absolute;
    content: "✖";
    padding-left: 5px;
  }
  
  input:valid + span::after {
    position: absolute;
    content: "✓";
    padding-left: 5px;
  }
  

  3 (tháng 7 năm 2022)
• và kể từ đó trở đi…

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

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

Nếu bạn thử gửi nó, bạn sẽ thấy rằng trình duyệt hiện hiển thị thông báo 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

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

Cũng có vấn đề mà người dùng sẽ không nhất thiết phải biết định dạng ngày nào trong số nhiều ngày được mong đợi. Chúng tôi còn lại việc phải làm.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

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 (cho đến khi tất cả các trình duyệt chính đã hỗ trợ chúng trong một thời gian) là để người dùng nhập tháng và năm trong các điều khiển riêng biệt (các yếu tố ____92 đang phổ biến; xem bên dưới để thực hiện) hoặc sử dụng các thư viện JavaScript như plugin Picker JQuery Date.

Ví dụ

Trong ví dụ này, chúng tôi tạo hai bộ phần tử UI, mỗi bộ được thiết kế để cho phép người dùng chọn một tháng và năm. Đầu tiên là đầu vào

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

HTML

Mẫu yêu cầu tháng và năm trông như thế này:

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

JavaScript

Mã JavaScript xử lý việc chọn cách sử dụng phương pháp nào và thiết lập danh sách các năm để đưa vào năm không bản địa

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity">span>
  div>
  <p class="fallbackLabel">What month would you like to visit us?p>
  <div class="fallbackDatePicker">
    <div>
      <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>
  div>
form>

Một phần của ví dụ có thể được quan tâm nhất là mã phát hiện tính năng. Để phát hiện xem trình duyệt có hỗ trợ

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <label for="bday-month">What month were you born in?label>
  <input id="bday-month" type="month" name="bday-month" />
form>

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<label for="bday-month">What month were you born in?label>
<input id="bday-month" type="month" name="bday-month" />

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Submit form" />
  div>
form>