Dalam panduan ini, saya akan menunjukkan bagaimana Anda dapat menerapkan masukan tanggal dan waktu dalam formulir web Anda. Saya akan menjelaskan berbagai jenis masukan yang tersedia untuk Anda, dan memberikan tips berharga untuk penggunaan praktis. Kami akan membahas baik masukan tanggal maupun waktu, agar Anda memperoleh pemahaman yang kuat mengenai implementasi fungsi-fungsi ini.
Temuan Utama
- Jenis masukan date memungkinkan Anda untuk memilih hanya satu tanggal.
- Jenis masukan dateTime-local menggabungkan tanggal dan waktu tanpa penyesuaian zona waktu.
- Pemformatan masukan tanggal dan waktu dilakukan standar sesuai ISO 8601.
- Browser dapat memiliki sifat-sifat tampilan yang berbeda untuk masukan Tanggal dan Waktu.
Dasar-dasar Masukan Tanggal dan Waktu
Untuk menerapkan masukan tanggal dan waktu dalam formulir Anda, Anda memerlukan jenis masukan HTML date, dateTime-local, dan time. Jenis masukan date memungkinkan pengguna untuk memilih tanggal, sementara tipe dateTime-local mencatat baik tanggal maupun waktu. Yang terakhir dikirim tanpa penyesuaian zona waktu, yang berarti masukan pengguna akan dikirim ke server sesuai dengan yang dibuat oleh pengguna.
Sekarang mari kita teliti jenis-jenis ini secara detail.
Penggunaan Jenis Masukan Date
Untuk mengonfirmasi tanggal murni, Anda dapat menggunakan tipe date. Ini memungkinkan pengguna untuk memilih tanggal melalui alat kalender bawaan, yang meningkatkan kemudahan pengguna.
Ketika Anda membuka alat kalender, Anda dapat memilih berbagai data dan mengirimkannya melalui klik "Kirim". Pada saat itu, tanggal akan ditransmisikan dalam format standar: Tahun-Bulan-Hari.
Penting untuk diketahui bahwa tampilan kalender dapat berbeda tergantung pada browser. Pengaturan regional yang disimpan dalam sistem operasi Anda memengaruhi format tampilan tanggal.
Masukan Tanggal dan Waktu dengan dateTime-local
Apabila Anda ingin merekam baik tanggal maupun jam, Anda harus menggunakan tipe dateTime-local. Ini bekerja serupa dengan masukan tanggal, hanya saja Anda juga dapat menentukan waktu.
Di sini Anda dapat memilih baik hari maupun waktu. Menariknya, waktu ditampilkan dalam format 24 jam jika format AM/PM tidak diaktifkan dalam pengaturan lokal Anda.
Saat mengirimkan formulir, Anda juga akan menerima data dalam format ISO, dan waktu akan tetap tidak berubah, tanpa dikonversi ke zona waktu lain.
Penggunaan time
Tipe masukan time sendiri memungkinkan Anda untuk menentukan hanya jam tanpa tanggal. Melalui jenis ini, Anda berkesempatan untuk memilih waktu, yang kemudian juga ditransmisikan dalam format 24 jam.
Penambahan Format Tanggal Tambahan
Selain jenis-jenis di atas, ada juga kemungkinan untuk merealisasikan masukan minggu (week) dan bulan (month). Melalui format week, Anda dapat menunjukkan minggu-minggu tertentu dan dengan mudah memilih minggu yang diinginkan.
Untuk format month, berlaku hal serupa. Di sini Anda dapat memilih hanya bulan, tanpa menetapkan hari-hari tertentu.
Pengaturan Awal dan Nilai
Tip berguna lainnya adalah kemampuan untuk menetapkan pengaturan awal untuk kolom masukan Anda. Dengan demikian, Anda dapat menetapkan bahwa pada saat pemilihan tanggal dan waktu, suatu tanggal tertentu secara default sudah diatur.
Zona Waktu dan Kompatibilitas Browser
Aspek sentral dalam penggunaan tanggal dan waktu adalah zona waktu. Masukan disimpan sesuai dengan waktu lokal di mana mereka dimasukkan. Tidak ada penyesuaian zona waktu terkait, sehingga Anda dapat langsung meneruskan waktu lokal.
Namun, penting untuk diingat bahwa dukungan untuk jenis masukan ini bisa bervariasi tergantung pada browser. Sementara date dan dateTime-local didukung oleh hampir semua browser populer, disarankan untuk memeriksa apakah fitur-fitur spesifik juga berfungsi di browser target Anda di situs web seperti "Can I use".
Ringkasan
Secara keseluruhan, Anda sekarang memiliki gambaran tentang implementasi masukan tanggal dan waktu dalam formulir web Anda. Anda mengenal berbagai jenis masukan, formatnya, dan relevansi pengaturan pengguna. Ingatlah bahwa format yang benar dan dukungan browser sangat penting untuk menciptakan pengalaman yang mulus bagi pengguna Anda.
Pertanyaan yang Sering Diajukan
Apakah perbedaan antara date dan dateTime-local?date hanya memungkinkan pemilihan tanggal, sedangkan dateTime-local memungkinkan pemilihan tanggal dan waktu.
Bagaimana zona waktu ditangani oleh dateTime-local?Waktu dikirim sesuai dengan waktu lokal yang dimasukkan, tanpa penyesuaian zona waktu.
Browser mana yang mendukung jenis masukan ini?Sebagian besar browser populer mendukung date dan dateTime-local; untuk fitur-fitur spesifik, "Can I use" dapat dikonsultasikan.
Apakah saya dapat mengatur nilai baku untuk kolom-kolom tanggal?Ya, Anda bisa mengatur nilai baku untuk kolom masukan melalui atribut nilai.
Format apa yang digunakan saat mengirimkan data?Data dikirim dalam format ISO (Tahun-Bulan-Tanggal untuk tanggal, Tahun-Bulan-Tanggal T Jam:Menit:Detik untuk tanggal dan waktu).
