search

Bagaimana cara membuat pemilih tanggal di html?

1 years ago
Komentar: 0
Dibaca: 120

Kita tahu bahwa datepicker digunakan untuk memilih tanggal tertentu dari kalender. Datepicker adalah dropdown interaktif yang memudahkan untuk memilih tanggal dari kalender alih-alih mengetiknya secara manual. Biasanya digunakan untuk menyimpan tanggal lahir pengguna atau juga digunakan dalam banyak kasus.  

Show

Pemilih tanggal biasanya berisi teks format tanggal seperti dd/mm/yyyy. Tapi itu bisa diganti dengan beberapa tanggal yang valid menggunakan atribut nilai. Format tanggal akan diganti dengan nilai. Nilai harus selalu ditetapkan sebagai "yyyy-mm-dd. "Format tanggal yang ditampilkan mungkin berbeda dari nilai yang digunakan

Contoh. Tambahkan atribut nilai di pemilih tanggal

Kesimpulan

Pemilih tanggal membantu pengguna memilih tanggal yang akan dimasukkan dengan cepat. Ini juga membantu menambahkan tanggal yang valid dengan beberapa batas maksimum dan minimum tanggal yang ditentukan menggunakan atribut di pemilih tanggal. Jadi, buat pemilih tanggal untuk menyediakan antarmuka yang mudah digunakan untuk menambahkan tanggal

❮ Atribut jenis HTML

Contoh

Tampilkan kontrol tanggal

Hari ulang tahun

Cobalah sendiri "

Definisi dan Penggunaan

_ mendefinisikan pemilih tanggal

Nilai yang dihasilkan meliputi tahun, bulan, dan hari

Tip. Selalu tambahkan tag untuk praktik aksesibilitas terbaik

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh elemen tersebut

Tipe atribut="tanggal"20. 012. 057. 014. 111. 0

Sintaksis

❮ Atribut jenis HTML


const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
1 elemen 
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
2 membuat bidang input yang memungkinkan pengguna memasukkan tanggal, baik dengan kotak teks yang memvalidasi input atau antarmuka pemilih tanggal khusus

Nilai yang dihasilkan mencakup tahun, bulan, dan hari, tetapi bukan waktunya. Jenis input waktu dan tanggal-waktu-lokal mendukung input waktu dan tanggal+waktu

UI masukan umumnya bervariasi dari browser ke browser; . Di browser yang tidak didukung, kontrol menurun dengan baik ke 

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

Sebuah string yang mewakili tanggal yang dimasukkan dalam input. Tanggal diformat menurut ISO8601, dijelaskan dalam

Anda dapat menetapkan nilai default untuk masukan dengan tanggal di dalam atribut, seperti itu

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

Catatan. Format tanggal yang ditampilkan akan berbeda dari 

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
4 yang sebenarnya — tanggal yang ditampilkan diformat berdasarkan lokal browser pengguna, tetapi 
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
4 yang diurai selalu diformat 
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
7

Anda bisa mendapatkan dan menetapkan nilai tanggal dalam JavaScript dengan properti 

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
8 
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
4 dan 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>
0. Sebagai contoh

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)

Kode ini menemukan elemen 

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
1 pertama yang 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

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

  <p><button>Submit</button></p>
</form>
3, dan menetapkan nilainya menjadi 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>
4 (1 Juni 2017). Kemudian membaca nilai itu kembali dalam format string dan angka

Atribut umum untuk semua elemen 

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
1 juga berlaku untuk input 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>
3, tetapi mungkin tidak memengaruhi penyajiannya. Misalnya 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

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

  <p><button>Submit</button></p>
</form>
8 mungkin tidak berfungsi. 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>
_3 input memiliki atribut tambahan berikut

Tanggal terakhir untuk menerima. Jika elemen yang dimasukkan terjadi sesudahnya, elemen gagal validasi kendala. Jika nilai atribut 

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
_1 bukan kemungkinan string tanggal dalam format 
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
7, maka elemen tersebut tidak memiliki nilai tanggal maksimum

Jika atribut 

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
1 dan 
<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
4 ditetapkan, nilai ini harus berupa string tanggal setelah atau sama dengan yang ada di atribut 
<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
4

Tanggal paling awal untuk menerima. Jika elemen yang dimasukkan terjadi sebelumnya, elemen gagal validasi kendala. Jika nilai atribut 

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
_4 bukan kemungkinan string tanggal dalam format 
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
7, maka elemen tersebut tidak memiliki nilai tanggal minimum

Jika atribut 

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
1 dan 
<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
4 ditetapkan, nilai ini harus berupa string tanggal lebih awal atau sama dengan yang ada di atribut 
<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
1

Atribut 

<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>Submit</button>
  </p>
</form>
_2 adalah angka yang menentukan perincian yang harus dipatuhi oleh nilai, atau nilai khusus 
<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>Submit</button>
  </p>
</form>
3, yang dijelaskan di bawah. Hanya nilai yang sama dengan dasar untuk melangkah (jika ditentukan, jika tidak, dan nilai default yang sesuai jika tidak ada yang diberikan) yang valid

Nilai string 

<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>Submit</button>
  </p>
</form>
3 berarti tidak ada langkah yang tersirat, dan nilai apa pun diperbolehkan (kecuali batasan lain, seperti dan )

Catatan. Ketika data yang dimasukkan oleh pengguna tidak mengikuti konfigurasi stepping, agen pengguna dapat membulatkan ke nilai valid terdekat, lebih memilih angka dalam arah positif ketika ada dua opsi yang sama-sama dekat.

Untuk input 

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

  <p><button>Submit</button></p>
</form>
_3, nilai 
<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>Submit</button>
  </p>
</form>
2 diberikan dalam satuan hari; . Nilai default 
<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>Submit</button>
  </p>
</form>
_2 adalah 1, menunjukkan 1 hari

Catatan. Menentukan 

<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>Submit</button>
  </p>
</form>
3 sebagai nilai untuk 
<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>Submit</button>
  </p>
</form>
2 memiliki efek yang sama dengan 
label {
  display: flex;
  align-items: center;
}

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

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

input:valid + span::after {
  content: "✓";
}
5 untuk 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>
3 input

Input tanggal menyediakan antarmuka yang mudah untuk memilih tanggal, dan menormalkan format data yang dikirim ke server terlepas dari lokasi pengguna

Pada bagian ini, kita akan melihat penggunaan 

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

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

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

input:valid + span::after {
  content: "✓";
}
7 dasar dan kemudian lebih kompleks

Penggunaan paling sederhana dari 

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

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

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

input:valid + span::after {
  content: "✓";
}
7 melibatkan satu 
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
1 dikombinasikan dengan 
<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>Submit</button>
  </p>
</form>
0, seperti yang terlihat di bawah ini

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

  <p><button>Submit</button></p>
</form>
_

HTML ini mengirimkan tanggal yang dimasukkan di bawah kunci 

<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>Submit</button>
  </p>
</form>
1 ke 
<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>Submit</button>
  </p>
</form>
2 — menghasilkan URL seperti 
<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>Submit</button>
  </p>
</form>
3

Anda dapat menggunakan atribut and untuk membatasi tanggal yang dapat dipilih oleh pengguna. Dalam contoh berikut, kami menetapkan tanggal minimum 

<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>Submit</button>
  </p>
</form>
6 dan tanggal maksimum 
<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>Submit</button>
  </p>
</form>
7

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

Hasilnya adalah hanya hari di bulan April 2017 yang dapat dipilih — bagian bulan dan tahun kotak teks tidak dapat diedit, dan tanggal di luar April 2017 tidak dapat dipilih di widget pemilih

Catatan. Anda harus dapat menggunakan atribut untuk memvariasikan jumlah hari yang dilompati setiap kali tanggal bertambah (mis. g. untuk hanya membuat hari Sabtu dapat dipilih). Namun, ini tampaknya tidak diterapkan pada saat penulisan

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

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

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

input:valid + span::after {
  content: "✓";
}
7 tidak mendukung atribut ukuran formulir seperti. Lebih suka CSS untuk mengukurnya

Secara default, 

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

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

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

input:valid + span::after {
  content: "✓";
}
_7 tidak memvalidasi nilai yang dimasukkan di luar formatnya. Antarmuka umumnya tidak membiarkan Anda memasukkan apa pun yang bukan tanggal - yang sangat membantu - tetapi Anda dapat membiarkan bidang kosong atau memasukkan tanggal yang tidak valid di browser di mana input kembali mengetik 
span {
  position: relative;
}

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

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

input:valid + span::after {
  content: "✓";
}
2 (seperti 32 April)

Jika Anda menggunakan dan untuk membatasi tanggal yang tersedia (lihat ), browser pendukung akan menampilkan kesalahan jika Anda mencoba mengirimkan tanggal yang di luar batas. Namun, Anda harus memeriksa ulang hasil yang dikirimkan untuk memastikan nilainya berada dalam tanggal tersebut, jika pemilih tanggal tidak sepenuhnya didukung di perangkat pengguna

Anda juga dapat menggunakan atribut untuk membuat pengisian tanggal wajib — kesalahan akan ditampilkan jika Anda mencoba mengirimkan bidang tanggal kosong. Ini seharusnya berfungsi di sebagian besar browser, bahkan jika mereka kembali ke input teks

Mari kita lihat contoh tanggal minimum dan maksimum, serta membuat bidang yang wajib diisi

<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>Submit</button>
  </p>
</form>

Jika Anda mencoba mengirimkan formulir dengan tanggal yang tidak lengkap (atau dengan tanggal di luar batas yang ditentukan), browser akan menampilkan kesalahan. Coba mainkan dengan contoh sekarang

Inilah CSS yang digunakan dalam contoh di atas. Kami menggunakan elemen semu 

span {
  position: relative;
}

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

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

input:valid + span::after {
  content: "✓";
}
_6 dan 
span {
  position: relative;
}

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

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

input:valid + span::after {
  content: "✓";
}
7 untuk menambahkan ikon di sebelah input, berdasarkan apakah nilai saat ini valid. Kami harus meletakkan ikon pada 
span {
  position: relative;
}

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

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

input:valid + span::after {
  content: "✓";
}
8 di sebelah input, bukan pada input itu sendiri, karena di Chrome setidaknya konten yang dihasilkan input ditempatkan di dalam kontrol formulir, dan tidak dapat ditata atau ditampilkan secara efektif

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

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

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

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

Peringatan. Validasi formulir sisi klien bukanlah pengganti untuk memvalidasi di server. Sangat mudah bagi seseorang untuk memodifikasi HTML, atau melewati HTML Anda sepenuhnya dan mengirimkan datanya langsung ke server Anda. Jika server Anda gagal memvalidasi data yang diterima, bencana dapat terjadi dengan data yang diformat dengan buruk, terlalu besar, dengan jenis yang salah, dll.

Peramban yang tidak mendukung jenis input ini dengan anggun menurunkan ke input teks, tetapi ini menimbulkan masalah dalam konsistensi antarmuka pengguna (kontrol yang disajikan berbeda) dan penanganan data

Masalah kedua adalah yang lebih serius; . Tetapi dengan input teks, browser tidak mengenali format tanggal yang seharusnya, dan ada banyak format di mana orang menulis tanggal. Misalnya

  • <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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </select>
    </span>
    <span>
      <label for="year">Year:</label>
      <select id="year" name="year"></select>
    </span>
  </div>
</form>
    _5

Salah satu cara mengatasinya adalah atribut pada input tanggal Anda. Meskipun pemilih tanggal tidak menggunakannya, fallback input teks akan menggunakannya. Misalnya, coba lihat berikut ini di browser yang tidak mendukung

<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>Submit</button>
  </p>
</form>

Jika Anda mengirimkannya, Anda akan melihat bahwa browser menampilkan kesalahan dan menyoroti input sebagai tidak valid jika entri Anda tidak cocok dengan pola 

<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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </select>
    </span>
    <span>
      <label for="year">Year:</label>
      <select id="year" name="year"></select>
    </span>
  </div>
</form>
7 (di mana 
<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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </select>
    </span>
    <span>
      <label for="year">Year:</label>
      <select id="year" name="year"></select>
    </span>
  </div>
</form>
8 adalah angka dari 0 sampai 9). Tentu saja, hal ini tidak menghentikan orang untuk memasukkan tanggal yang tidak valid, atau format yang salah. Jadi kita masih punya masalah

span {
  position: relative;
}

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

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

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

Saat ini, cara terbaik untuk menangani tanggal dalam formulir dengan cara lintas-browser adalah meminta pengguna memasukkan hari, bulan, dan tahun dalam kontrol terpisah, atau menggunakan perpustakaan JavaScript seperti pemilih tanggal jQuery

Dalam contoh ini, kami membuat 2 set elemen UI untuk memilih tanggal. pemilih 

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

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

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

input:valid + span::after {
  content: "✓";
}
7 asli dan kumpulan 3 elemen 
span {
  padding-left: 5px;
}

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

input:valid + span::after {
  content: "✓";
}
0 untuk browser lama yang tidak mendukung masukan tanggal asli

HTML terlihat seperti itu

<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>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </select>
    </span>
    <span>
      <label for="year">Year:</label>
      <select id="year" name="year"></select>
    </span>
  </div>
</form>

Bulan-bulan di-hardcode (karena selalu sama), sedangkan nilai hari dan tahun dihasilkan secara dinamis tergantung pada bulan dan tahun yang dipilih saat ini, dan tahun saat ini (lihat komentar kode di bawah untuk penjelasan terperinci tentang cara kerja fungsi-fungsi ini. )

span {
  padding-left: 5px;
}

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

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

Bagian lain dari kode yang mungkin menarik adalah kode deteksi fitur — untuk mendeteksi apakah browser mendukung 

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

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

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

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

Kami membuat elemen 

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
1 baru, coba atur 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

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

  <p><button>Submit</button></p>
</form>
3, lalu segera periksa jenisnya — browser yang tidak mendukung akan mengembalikan 
span {
  position: relative;
}

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

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

input:valid + span::after {
  content: "✓";
}
2, karena jenis 
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>
3 kembali ke jenis 
span {
  position: relative;
}

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

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

input:valid + span::after {
  content: "✓";
}
2. Jika 
label {
  display: flex;
  align-items: center;
}

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

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

input:valid + span::after {
  content: "✓";
}
_7 tidak didukung, kami akan menyembunyikan pemilih asli dan menampilkan fallback (
span {
  padding-left: 5px;
}

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

input:valid + span::after {
  content: "✓";
}
0) sebagai gantinya

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

Catatan. Ingatlah bahwa beberapa tahun memiliki 53 minggu di dalamnya (lihat ). Anda harus mempertimbangkan hal ini saat mengembangkan aplikasi produksi

Bagaimana cara membuat pemilih tanggal dalam HTML?

menentukan pemilih tanggal. Nilai yang dihasilkan meliputi tahun, bulan, dan hari.

Bagaimana cara membuat Datepicker?

Jika panel tugas Kontrol tidak terlihat, klik Kontrol Lainnya pada menu Sisipkan, atau tekan ALT+I, C. Di bawah Sisipkan kontrol, klik Pemilih Tanggal. Dalam kotak dialog Pengikatan Pemilih Tanggal, pilih bidang tempat Anda ingin menyimpan data pemilih tanggal, lalu klik OK

Bagaimana cara menambahkan kalender ke halaman HTML saya?

Tambahkan kalender Google ke situs web Anda .
Di komputer, buka Google Kalender. .
Di kanan atas, klik Setelan. .
Di sisi kiri layar, klik nama kalender yang ingin disematkan
Di bagian "Integrasikan kalender", salin kode iframe yang ditampilkan
Di bawah kode semat, klik Sesuaikan

Bagaimana cara mengatur format tanggal dalam input HTML?

Untuk menyetel dan mendapatkan tanggal jenis input dalam format dd-mm-yyyy, kami akan menggunakan atribut tipe . Atribut tipe

kode html

Pos Terkait

Cara menggunakan mysql boolean operators
Cara menggunakan mysql boolean operators

Cara menggunakan source code dropdown php
Cara menggunakan source code dropdown php

Php dapatkan 5 kata pertama dari string
Php dapatkan 5 kata pertama dari string

Cara menggunakan page php id
Cara menggunakan page php id

Mengapa mysql dimatikan secara otomatis di xampp?
Mengapa mysql dimatikan secara otomatis di xampp?

Bagaimana cara mematikan baris di google sheets?
Bagaimana cara mematikan baris di google sheets?

Bagaimana Anda memeriksa apakah suatu tanggal kurang dari tanggal lain dalam javascript?
Bagaimana Anda memeriksa apakah suatu tanggal kurang dari tanggal lain dalam javascript?

Penggunaan fungsi CONVERCASE pada PHP
Penggunaan fungsi CONVERCASE pada PHP

Google sheets jumlah dua kolom dikalikan
Google sheets jumlah dua kolom dikalikan

Bagaimana Anda membagi variabel string dengan python?
Bagaimana Anda membagi variabel string dengan python?

Periklanan

BERITA TERKINI

Cara membuat kotak ajaib dengan python
1 years ago . by VerticalAnkle
Cara menggunakan perintah php-fpm
1 years ago . by HelmetedCloseness
Cara membuat tas dari kain satin
1 years ago . by HomesickClerk
Tarik data dari kamus python bersarang
1 years ago . by SpecializedRegulator
Sesi php berakhir terlalu cepat
1 years ago . by ArrestingPneumonia
Cara menghapus aplikasi yang tidak bisa dihapus di HP Realme
1 years ago . by TemptingHousing
Cara mengecek rumus di google sheets
1 years ago . by SaturatedAppraisal
How to install PHP GD in xampp?
1 years ago . by BorrowedFoyer
Concat string dalam loop php
1 years ago . by CardboardAllegation
Di mana prosedur tersimpan di mysql?
1 years ago . by CounterproductiveLiterature

Toplist Popular

#1
Top 10 6 nilai minimum f x y 4x 2y pada d 16 e 14 2x 3y 18 4x 3y 24 x 0 y 0 adalah a 40 b 36 c 2022
1 years ago
#2
Top 10 dia selalu lupa membawa pensil ke sekolah saran yang tepat untuk dia adalah 2022
1 years ago
#3
Top 10 diketahui sebuah data tunggal 2 4 6, 7 7, 8, 9, 10 berapakah modusnya 2022
1 years ago
#4
Top 10 persamaan kuadrat yang akar akarnya 7/ 2 dan -5 adalah 2022
1 years ago
#5
Top 10 jika panjang sisi bangun persegi panjang 16 cm dan lebar 8 cm maka kelilingnya adalah 2022
1 years ago
#6
Top 9 perhatikan gambar mata berikut nama bagian mata yang ditunjukkan angka i dan ii adalah 2022
1 years ago
#7
Top 10 jelaskan apa yang dimaksud dengan 3 jenis kemasan? 2022
1 years ago
#8
Top 9 sebutkan tiga keadilan yang harus terwujud dalam kehidupan bermasyarakat 2022
1 years ago
#9
Top 10 pada getaran harmonik pegas, jika massa beban yang digantung pada ujung bawah pegas 100g 2022
1 years ago
#10
Top 10 permainan bulu tangkis di atas meja yang dimainkan oleh dua atau empat orang 2022
1 years ago

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeendejakoptzhthittr
Copyright © 2024 apacode Inc.