Membuat Tanggal Dua Digit dengan Javascript

Beberapa hari yang lalu saya disibukkan dengan memperbaiki project sebuah aplikasi mobile yang dulu saya kembangkan dengan memanfaatkan framework Vue. Project tersebut kembali saya perbaiki dengan menambahkan fungsi custom untuk pencarian laporan berdasarkan tanggal, bulan dan waktu yang bisa dipilih.

Tak terasa, saya mengembangkan project ini sudah masuk versi ke:22. Project ini memang menurut saya agak berbeda, terutama pada kecepatan yang sama sekali tidak terasa delay-nya. Jadi responnya terasa lebih cepat dibanding project saya yang menggunakan Object tanpa framework, bahkan juga dibanding dengan project menggunakan Angular.

Saya belum tahu apa yang menyebabkan kenapa project ini proses run timenya terasa sangat ringan. Yang berbeda dari project lainnya memang semua elemen saya buat agar dimasukkan dalam variabel dimana saya terinspirasi dari cara kerja reactJS dalam membentuk komponen, padahal saya implementasikan dengan Vue. 

Tibalah pada inti masalahnya dimana saya perlu memberi nilai default komponen tanggal. Tujuan saya memberi nilai default pada tanggal adalah agar pengguna aplikasi gak perlu menuliskan tanggal bila tanggal yang digunakan adalah tanggal sekarang dan agar input dalam komponen tidak tampil kosong.

Bila pengguna ingin memilih tanggal yang lain, maka pengguna akan mudah tinggal mengganti tanggal yang sesuai. Agar dapat memberi nilai default pada input bertype tanggal ternyata formatnya harus berbentuk:

yyyy-mm-dd

Sebagaimana umumnya elemen bertype date kalau ditulis script html inputnya seperti berikut:

<input type="date">

dengan vue jadinya ada tambahan modelnya misalnya seperti ini:

<input type="date" v-model="tanggal">

Cara Membuat Tanggal Dua Digit di Javascript

Maka untuk dapat menampilkan tanggal sekarang pada elemen bertype date dapat menggunakan javascript. Kita dapat memanfaatkan fungsi Date(). Kemudian masalah lainnya adalah tanggal dan bulan harus dalam format dua digit. Artinya kalau tanggal dibawah tanggal 10 maka harus ada angka 0 didepan angkanya contoh: 09. 

Untuk bisa mendapatkan hal tersebut maka kita dapat menggunakan cara seperti yang saya gunakan. Setidaknya saya baru menemukan dua cara yang benar-benar memberikan hasil yang benar dan kodenya tidak terlalu panjang.

Cara 1:

var waktu = new Date();

var tanggal = waktu.getFullYear()+'-'+("0" + (waktu.getMonth() + 1)).slice(-2)+'-'+("0" + waktu.getDate()).slice(-2);

Cara 2:

waktu = new Date();

var tanggal = waktu.getFullYear()+'-'+((waktu.getMonth() + 1) < 10 ? '0' : '') + (waktu.getMonth() + 1)+'-'+(waktu.getDate() < 10 ? '0' : '')+waktu.getDate()

Silahkan pilih mana cara yang paling sesuai dengan kebutuhan anda. Bila anda punya cara lain, silahkan dibagi dikolom komentar. Demikian tulisan kali ini semoga bermanfaat.

Sebelum saya akhiri, saya ingin tahu ada yang notice tidak ya?

Tanggal yang diminta oleh elemen tanggal formatnya minta yyyy-mm-dd tapi ditanggalnya jadi tampil ngikuti format bahasa dd-mm-yy. Hmmm...