Pemilih tanggal umumnya memiliki format "yyyy-mm-dd". Di sini kita perlu memasukkan hari, bulan, jam, dan tahun ke pemilih tanggal. Tapi ada format lain di pemilih tanggal di mana kita hanya perlu memasukkan tahun dan bulan. Pemilih tanggal dengan format="YYYY-MM" dapat dibuat menggunakan HTML
Buat pemilih tanggal dengan format "YYYY-MM"
To create a date picker with "YYYY-MM" format, use tag with type="month" attribute. We can also use some other attributes along with it. The date picker with type="month" is not supported in all the browsers. The user interface of the date picker also varies from browser to browser.
Contoh. Buat pemilih tanggal menggunakan HTML
Atribut Pemilih Tanggal
- min - Untuk menambahkan tanggal paling awal ke pemilih tanggal. Format yang digunakan untuk min sama dengan format pemilih tanggal "YYYY-MM"
- maks - Untuk menambahkan tanggal akhir ke pemilih tanggal. Format yang digunakan untuk maks adalah "YYYY-MM"
- nilai - Atribut nilai digunakan untuk mengatur tanggal default dalam kolom input. Format yang digunakan adalah "YYYY-MM"
Contoh. Buat pemilih tanggal dengan atribut
Kesimpulan
Pemilih tanggal menyediakan antarmuka yang mudah digunakan untuk memasukkan tanggal. Pemilih tanggal juga memungkinkan memasukkan tanggal dalam format tertentu. Di sini, kami telah membuat pemilih tanggal hanya dengan tahun dan bulan
Ketika input tanggal ditambahkan oleh HTML5, banyak yang percaya bahwa itu akan menawarkan kepada pengguna metode yang ramah, interaktif, dan dikenal untuk memasukkan tanggal di situs web. Namun;
Awalnya, atribut input tanggal dirancang sebagai elemen formulir untuk mengambil nilai melalui pemilih tanggal. Namun masalahnya terletak pada penerapan datepicker yang berubah dari browser ke browser. Apa yang pada dasarnya berarti bahwa sebagai perancang web Anda harus bermaksud mengizinkan pengguna untuk memilih tanggal dalam format YYYY/MM/DD melalui datepicker dan Anda merancang validasi HTML Anda sesuai dengan itu, tetapi ketika pengguna mengakses halaman web melalui browser pada
Sekarang tidak ada aturan tersebut dalam HTML5 yang memungkinkan perancang web untuk mengubah format di mana elemen tanggal mengambil nilai. Oleh karena itu, kekakuan elemen tanggal mendorong perancang untuk mencari cara lain untuk mengubah format tanggal yang akan dimasukkan oleh pengguna.
Katakanlah kita ingin mendesain halaman web yang menanyakan ulang tahun pengguna dan format nilai yang dimasukkan harus YYYY-MM-DD. Bagaimana kita akan mencapai ini dengan menggunakan elemen tanggal karena tidak memberikan kebebasan untuk mengubah format tanggal?
Jika format tanggal sangat penting untuk fungsi halaman web, maka kita perlu membuat pilihan itu. Di bawah ini adalah cuplikan kode dengan format tanggal diubah menjadi format YYYY-MM-DD
<form> Birthday: <input type="text" name="input" placeholder="YYYY-MM-DD" required pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" title="Enter a date in this format YYYY-MM-DD"/> <input type="submit"> </form>
'Di mana elemen tanggalnya?' Yah, seperti yang kami katakan, itu tidak dapat dicapai dengan HTML5 saja jika kami menggunakan elemen tanggal, tetapi kami tidak pernah mengatakan itu tidak dapat dicapai jika kami tidak menggunakan elemen tanggal
Pointer Kunci di sekitar kode
- Pengguna harus memasukkan nilai secara manual karena dia tidak memiliki hak istimewa untuk memilihnya dari pemilih tanggal
- Elemen pola memastikan bahwa nilai yang dimasukkan valid. Atribut pola dengan demikian digunakan untuk mencapai validasi formulir HTML
- Elemen yang diperlukan memaksa pengguna untuk memasukkan beberapa nilai karena bidang tidak boleh dibiarkan kosong
- Tanda kurung pertama di bagian pola memeriksa nilai tahun yang benar, diikuti dengan bulan yang benar dan nilai hari yang benar
- Untuk mengubah tanggal ke format yang berbeda, kita hanya perlu mengubah urutan ketiga pemeriksaan tersebut dan pemisah yang digunakan, sesuai dengan kebutuhan. Di bawah ini adalah kode yang mengambil tanggal dalam format 'YYYY/MM/DD'
Solusi ini memiliki kelemahan yaitu tidak ada popup date picker. Solusinya adalah kembali ke salah satu widget datepicker jquery