Komponen Datetime Baru di Ionic

Ionic V6 sudah dirilis akhir tahun 2021 kemarin. Salah satu yang baru di Ionic V6 ini adalah Komponen Datetime. Komponen Datetime di Ionic V6 lebih menarik dari yang sebelumnya di Ionic V5. Kalau saya bilang sih lebih interaktif dan mudah digunakan oleh pengguna.

Dibawah ini bisa dilihat tampilan komponen Datetime di Ionic V5.

See the Pen Datetime Picker Ionic V5 by Adnan Tawaffani (@tawaffan) on CodePen.

Untuk mengubah Tanggal Lahir, pengguna harus mengklik terlebih dulu. Kemudian tampil sebuah modal yang terbagi 3 pilihan yaitu bulan, tanggal dan tahun. Tampilan seperti ini sudah cukup populer di iOS versi lama. Tetapi saat ini iOS / Android mulai menggunakan tampilkan kalendar yang lebih lengkap.

Datetime Component Ionic 6

Jika sudah menggunakan Ionic 6 maka tampilkan komponen Datetime seperti dibawah ini.

See the Pen Datetime Component Ionic V6 by Adnan Tawaffani (@tawaffan) on CodePen.

Komponen Datetime yang baru ditampilkan langsung secara lengkap seperti kalender pada umumnya. Tampilan seperti ini mungkin belum begitu menarik dan interaktif. Tetapi komponen datetime ini bisa dibuat lebih menarik lagi dengan menggunakan atau memanfaatkan komponen lain yang baru di Ionic 6 yaitu ion-accordion.

Setelah HTML sedikit diubah, hasilnya seperti dibawah ini.

See the Pen Datetime Accordion Ionic V6 by Adnan Tawaffani (@tawaffan) on CodePen.

Tampilan komponen Datetime masih bisa diubah-ubah melalui properti presentation yaitu date, date-time, month, month-year, time, time-date atau year.

Karena tanggal lahir tidak membutuhkan waktu maka presentation properti saya beri nilai date.

Hasilnya seperti dibawah ini.

See the Pen Date Accordion Ionic V6 by Adnan Tawaffani (@tawaffan) on CodePen.

Modal Datetime Ionic V6

Komponen datetime di Ionic V6 bisa juga ditampilkan dalam bentuk modal. Pastinya membutuhkan komponen lain yaitu Ion Modal.

Hasil tampilan komponen Datetime dapat dilihat dibawah ini, jika menggunakan komponen Ion Modal. 

See the Pen Date Modal Ionic V6 by Adnan Tawaffani (@tawaffan) on CodePen.

Sekarang apabila tanggal lahir diklik maka akan mentrigger modal dan menampiklan datepicker komponen. Cara ini bisa digunakan di React, Vue, Angular dan Vanila JS.

Komponen Datetime yang baru ini bagi saya cukup menarik di Ionic V6 karena sudah lama menginginkan komponen datetime ini berubah tampilan seperti layaknya kalender. Mudah-mudah tulisan blog ini cukup bisa menggambarkan dan menjelaskan tentang Komponen Datetime di Ionic V6.