JavaScript untuk Pengoptimal: Menambahkan Pemilih DateTime

Kita semua pernah ke sana: tugas yang membuat frustrasi menambahkan tanggal secara manual dalam formulir.

Sekarang, saya tidak tahu tentang Anda, tetapi ketika saya mencari format tanggal, otak saya menjadi overdrive. Apakah Anda akan mengikuti MM/DD/YYYY? Bagaimana jika kita ingin YYYY-MM-DD saja? Berapa hari lagi Februari?

Posting blog ini akan membawa Anda melalui beberapa fungsi JavaScript yang akan membantu mengoptimalkan kode Anda dengan menambahkan bidang input DateTime Picker ke formulir Anda.

Kasus Bisnis: Menambahkan Pemilih DateTime

Dalam skenario hipotetis ini, kita sampai pada hipotesis berikut:

Untuk menguji hipotesis ini, kita akan menerapkan perubahan di bawah ini:

Kode yang Digunakan dalam Percobaan

Sekarang mari kita ke bagian yang menyenangkan!

Untuk menjalankan perubahan, kami menjalankan kode JavaScript di bawah ini pada halaman pengujian. Salin kodenya dan coba sendiri!

 var dateInput = document.querySelector("#tanggal");
var didukung = benar;
var tes = document.createElement("masukan");
mencoba {
  test.type = "tanggal";
} tangkap (e) {
  didukung = salah;
}
jika (didukung) {
  dateInput.setAttribute("tipe", "tanggal");
  dateInput.setAttribute("nilai", getFormattedDate(0));
  dateInput.setAttribute("min", getFormattedDate(-1));
  dateInput.setAttribute("maks", getFormattedDate(1));
}
function getFormattedDate(changeYear) {
  var hari ini = Tanggal baru();
  var dd = String(hari ini.getDate()).padStart(2, "0");
  var mm = String(hari ini.getMonth() + 1).padStart(2, "0");
  var yyyy = hari ini.getFullYear() + changeYear;
  formattedDate = yyyy + "-" + mm + "-" + hh;
  kembali diformatTanggal;
}

Perincian Kode

1. Sintaks Baru

Perincian dimulai dengan membahas semua sintaks baru dalam contoh di atas. Karena artikel ini adalah bagian dari seri, pastikan Anda memeriksa dokumentasi lengkap sintaks di artikel lain dalam seri (termasuk artikel yang dipublikasikan di blog Convert).

try {} catch (error) {} adalah pernyataan yang bisa Anda gunakan untuk mencoba kode tertentu dan menangkap kesalahan jika diperlukan. Ketika kode berjalan, dan tidak ada kesalahan yang terjadi, itu akan melewati tangkapan.

Jika mengembalikan kesalahan, itu akan menangkapnya. Script sekarang akan mengeksekusi kode di antara badan tangkapan. Karena melewati kesalahan dalam fungsi, Anda dapat console.log untuk menemukan masalah spesifik.

Biasanya, ketika Anda mengalami kesalahan, kode akan berhenti dijalankan. Pernyataan ini akan memungkinkan Anda untuk melanjutkan skrip Anda ketika Anda mengharapkan kesalahan.

.type adalah metode yang menetapkan nilai atribut “type” dari sebuah elemen di DOM.

.getDate() adalah metode yang mengembalikan hari dari objek tanggal. Ini akan mengembalikan hari sebagai angka.

.padStart(targetLength, padString) adalah metode yang memungkinkan kita untuk mengisi string dengan karakter yang berbeda untuk jumlah yang kita inginkan. Anda menurunkan berapa kali Anda ingin memasukkan string dalam argumen targetLength. Anda meneruskan string yang digunakan sebagai padding dalam argumen padString. Ini akan memperhitungkan panjang padString saat mengisinya.

.getMonth() adalah metode yang mengembalikan objek bulan tanggal sebagai angka. Itu mulai menghitung pada 0, jadi ini akan menjadi Januari. Nomor 11 adalah Desember.

String() adalah metode yang mencoba mengonversi argumen yang diturunkan ke nilai string. Metode ini biasanya digunakan ketika Anda ingin mengonversi angka menjadi string.

.getFullYear() adalah metode yang mengembalikan tahun dari objek tanggal.

return adalah pernyataan umum dan penting saat bekerja dengan fungsi. Terkadang Anda perlu menjalankan fungsi untuk mendapatkan data dan menggunakannya di tempat lain. Status pengembalian dalam suatu fungsi akan mengakhiri eksekusi fungsi dan mengembalikan apa pun yang benar dari pernyataan tersebut.

2. Logika

 var dateInput = document.querySelector("#tanggal");

Kita mulai dengan memilih field input tanggal dengan metode querySelector. Kami menambahkan id="date" ke bidang input kami untuk menggunakan #date sebagai pemilih kami. Kami menetapkan elemen ke variabel dateInput kami yang baru dideklarasikan.

 var didukung = benar;

Kemudian kami mendeklarasikan variabel yang didukung. Kami menetapkan boolean true ke variabel kami yang baru dideklarasikan. Kami akan mengubah nilai ini nanti jika browser tidak mendukung pemilih datetime.

 var tes = document.createElement("masukan");

Kita perlu membuat bidang input yang akan kita gunakan murni untuk memeriksa apakah jenis ini didukung. Kami melakukan ini dengan metode .createElement.

Kami mewariskan "input" sebagai string untuk membuat elemen input. Kami menyimpan elemen ini ke variabel uji yang baru dideklarasikan.

Kami akan menggunakan pernyataan try berikut untuk memeriksa apakah perubahan kami didukung:

 mencoba {

Mulailah dengan menulis kata kunci try. Kami membuka pernyataan dengan kurung kurawal.

Fungsi akan mencoba segala sesuatu di antara tanda kurung ini. Itu hanya akan menjalankan kode untuk melihat apakah terjadi kesalahan.

 test.type = "tanggal";

Kami dapat menguji apakah jenis tanggal didukung dengan menyetel jenis tanggal ke bidang input pengujian kami. Jika tidak terjadi kesalahan, kami tahu bahwa browser mendukungnya.

 } tangkap (e) {

Kemudian, kami menulis pernyataan tangkap kami setelah kurung tutup. Bagian antara kurung kurawal akan berjalan ketika kita menangkap kesalahan.

Dengan menempatkan "e" sebagai argumen, kita dapat menggunakan ini dalam pernyataan catch kita. Anda dapat menggunakan ini untuk console.log kesalahan tertentu, misalnya.

 didukung = salah;

Jika kita menangkap kesalahan, kita perlu mengubah variabel yang didukung menjadi salah. Kami akan menggunakan nilai ini nanti, untuk menentukan apakah kami ingin menjalankan perubahan atau tidak.

 }

Kemudian, tutup pernyataan catch dengan kurung tutup.

 jika (didukung) {

Kami akan menggunakan nilai variabel yang didukung untuk menjalankan pernyataan if. Jika variabel benar, itu akan menjalankan pernyataan. Dengan cara ini, kami memastikan bahwa browser tidak didukung.

 dateInput.setAttribute("tipe", "tanggal");

Untuk menambahkan pemilih datetime, kita hanya perlu menambahkan tipe atribut dengan tanggal nilai ke variabel dateInput kita. Tergantung pada browser, sekarang akan ditampilkan ikon yang dapat Anda klik untuk memilih tanggal.

 dateInput.setAttribute("nilai", getFormattedDate(0));

Kami juga ingin menambahkan tanggal default ke bidang input. Anda dapat menyetel tanggal default bidang tanggal dengan menambahkan atribut nilai yang menyimpan tanggal sebagai string.

Gunakan fungsi getFormattedDate, yang telah kita definisikan, untuk mendapatkan tanggal hari ini dalam format yang benar. Fungsi dapat menambah atau menghapus tahun dengan memasukkan angka sebagai argumen saat memanggilnya.

 dateInput.setAttribute("min", getFormattedDate(-1));

Dengan cara ini, kita dapat menggunakan baris ini untuk mengatur tanggal minimum pemilih menjadi 1 tahun sebelum hari ini. Anda dapat melakukan ini dengan melewatkan -1 sebagai argumen. Ini akan membatasi pengguna untuk memilih tanggal sebelum tanggal minimum.

 dateInput.setAttribute("maks", getFormattedDate(1));

Lakukan hal yang sama untuk jumlah maksimum yang dapat dipilih pengguna. Tetapkan tahun maksimum satu tahun dari sekarang dengan memberikan "1" sebagai argumen.

 }

Tutup pernyataan if dengan kurung kurawal. Perubahan ini sekarang akan terlihat di bidang input.

Kita masih perlu mendefinisikan fungsi yang digunakan dalam pernyataan if kita. Kami ingin fungsi ini mengembalikan tanggal dalam format berikut: yyyy-mm-dd.

 function getFormattedDate(changeYear) {

Untuk mencapai hasil ini, mulailah dengan menggunakan kata kunci fungsi untuk mendefinisikannya. Kami memberi nama getFormattedDate ke fungsi kami.

Untuk memiliki sedikit kendali atas tanggal seperti apa yang dikembalikan, setel changeYear sebagai argumen.

Kita dapat menggunakan ini sebagai kata kunci di badan fungsi untuk mengontrol apa yang diturunkan saat fungsi dipanggil.

 var hari ini = Tanggal baru();

Mulai badan fungsi ini dengan membuat objek tanggal baru. Saat objek tanggal baru dibuat akan menjadi waktu yang disimpan. Ini berarti bahwa kita dapat menetapkan objek baru kita ke variabel hari ini yang baru dideklarasikan.

 var dd = String(hari ini.getDate()).padStart(2, "0");

Metode getDate mendapatkan hari-hari dari kencan kita. Ketika hari dalam satu digit, itu akan menambahkan 0 sebelum nomor dengan metode padStart.

Jika tidak, ini akan menjadi format yang salah untuk bidang input kami. Kami juga perlu mengonversi angka menjadi string sehingga kami dapat menggabungkan angka kami nanti. Jika tidak, program akan menggunakan penambahan.

 var mm = String(hari ini.getMonth() + 1).padStart(2, "0");

Di sini, kami menggunakan getMonth untuk mendapatkan bulan dari tanggal hari ini. Kami membuat koreksi kecil dengan menambahkan 1 ke angka yang dikembalikan. Kemudian, kami mengisi angka dengan nol jika angkanya satu digit. Metode ini memastikan kami memiliki format yang tepat untuk data bulan.

 var yyyy = hari ini.getFullYear() + changeYear;

Selanjutnya, kita mendapatkan tahun hari ini dengan metode getFullyear. Gunakan nomor yang diturunkan fungsi untuk mengubah tahun.

 formattedDate = yyyy + "-" + mm + "-" + hh;

Kemudian, kami menggabungkan semua variabel kami ke tanggal yang diformat menggunakan rangkaian string.

 kembali diformatTanggal;

Kami mengembalikan variabel formattedDate sehingga dapat digunakan oleh pemanggil fungsi.

 }

Terakhir, kami menutup fungsi kami dengan kurung kurawal dan mengakhiri skrip kami. Script dapat menggunakan fungsi ini sebelum dideklarasikan karena fungsi diangkat ke atas kode. Hal yang sama terjadi pada variabel. Kode mungkin berjalan sedikit lebih cepat jika Anda memindahkan fungsi formattedDate di atas pernyataan if.

3. Latihan

Jadi, sekarang setelah Anda menyelesaikan seluruh proses, yang tersisa adalah Anda mencobanya. Dan jangan lupa untuk bersenang-senang dengannya!

Silakan dan ubah bidang input, sehingga bidang min berisi tanggal tepat dua tahun dari hari ini. Kemudian, tambahkan tanggal maksimal dua tahun dari sekarang. Semoga beruntung!

Tidak bisa mengetahuinya? Kirimi saya pesan di LinkedIn, dan saya akan membantu Anda!

Dan jika Anda melewatkan artikel terakhir kami, lihat cara memasukkan bagian diskon total di situs Anda dan teknik pengoptimalan konversi lanjutan lainnya.