Langsung ke konten utama
loading

Cara Menggunakan Datepicker Pada Form

  

Posting ini bermula ada yang bertanya via contact us, dan saya baru tahu ada orang yang belum tahu cara menggunakan datepicker dengan efisien. Sebenarnya kalau memilih dalam satu bulan pasti bisa, yang ditanyakan adalah bagaimana untuk melompat bulan dan tahun, kalau cuma tekan next-next biasa, satu tahun saja butuh 12 kali tap / klik. Bagaimana kalau 30 tahun? 360 kali? :)) Terus kalau 500 tahun? =)) butuh 6.000 kali tap/klik. Padahal sebenarnya untuk melompat 500 tahun sekalipun paling banyak butuh 5 tap saja. Datepicker

Bermula pertanyaan ini muncul karena di Aplikasi Mencari Hari, Pasaran dan Neptu Jawa menggunakan datepicker akhir-akhir ini karena saya perbaiki formnya, dan saat bertanya, kawan netizen tersebut mengeluh bagaimana capeknya menuju tanggal kelahirannya 32 tahun yang lalu. =)) Dan protes katanya enak form yang lama saja tinggal ngetik angka, beres! Jujur saja saya tidak berhenti tertawa ;)) membayangkan bagaimana bisa begitu sabarnya kawan tersebut. 384 kali tap! 8-} ckckck... saya penasaran dan langsung buka kalkulator waktu itu. Dia takkan marah meski saya tertawakan, karena sudah ngerti orangnya bahwa saya tertawa terpingkal-pingkal, dan saya sudah minta maaf atas itu.

Baiklah, langsung ke pembahasan, Datepicker secara definisi saya kurang jelas tapi saya jelaskan sebisa saya.

Datepicker adalah pemilih tanggal, kalender sembulan, pemilih tanggal dan waktu, atau pemilih waktu dan merupakan widget antarmuka pengguna grafis yang memungkinkan pengguna untuk memilih tanggal dari kalender dan / atau waktu dari rentang waktu.

Banyak jenis model datepicker ini dan bisa ditemukan dalam aplikasi di playstore, di program komputer dan tentunya di banyak website di internet. Untuk lebih mudah kita gunakan kasus yang dipakai di Pondok Jeruk. Kamu bisa mencoba langsung praktek dengan form percobaan di bagian bawah, namun sebelumnya akan saya jelaskan dengan gambar-gambar.

Berikut ini gambar tampilannya:

Datepicker 1

Klik / Tap Pertama

Yang diberi kotak merah diatas itu bisa di klik / tap. Yang kiri untuk previous atau bulan sebelumnya, yang kanan next atau bulan selanjutnya. Yang tengah itulah untuk melompat bulan atau tahun. Seperti gambar dibawah ini.

Datepicker 2

Klik / Tap Kedua

Klik / tap lagi akan ada perubahan lompatan perhatikan urutan gambar dibawah ini:

Datepicker 3

Pada tahap ini kamu bisa memilih dengan cepat melompat bulan dalam satu tahun.

Klik / Tap Ketiga

Datepicker 4

Tap sekali lagi ini kamu bisa melompat tahun dalam rentang 10 tahun.

Klik / Tap Keempat

Datepicker 5

Tap sekali lagi ini kamu bisa melompat tahun dalam rentang 100 tahun.

Klik / Tap Kelima

Datepicker 6

Tap sekali lagi ini kamu bisa melompat tahun dalam rentang 1.000 tahun. Dalam tahap ini sudah maksimal, dan sekali atau dua kali tap, kamu akan sampai pada saat Yesus lahir. :))

Bahkan bisa sampai sebelum masehi, atau melompat kedepan yang bisa jadi sudah kiamat. ;))

Kasus Contoh

Sekarang kita asumsikan kita mencari bulan Februari tahun 1981, maka dari lompatan diatas kita bisa menemukan seperti urutan gambar berikut:

Datepicker 7

Pilih lompatan 10 tahun lalu pilih tahun dimaksud yang ada dalam daftar.


Datepicker 8

Setelah ketemu tahunnya, tap / klik, dan akan muncul daftar bulannya dalam tahun tersebut.


Datepicker 9

Setelah tap / klik bulan, maka tinggal klik tanggal dan selesai. Walau penjelasannya sepertinya panjang dalam prakteknya semua proses ini sangat sebentar.

Jika Tanggal Dekat

Datepicker 10

Kalau cuma mau mundur dan maju dalam bulan dalam tahun, baru kita cuma perlu tap / klik prev dan next seperti gambar yang dilingkari merah.

Form Praktek

Nah mudah bukan? kalau dirasa perlu latihan langsung praktek silahkan pakai form dibawah ini:

PILIH TANGGAL

Semoga bermanfaat bagi yang belum bisa melompat dengan efisien menggunakan datepicker. :)

star
Bagikan

Author

Faisalحَسْبُنَا اللّهُ وَنِعْمَ الْوَكِيلُ

Post “Cara Menggunakan Datepicker Pada Form” ini saya unggah dari Surabaya, Kota SBY, Jawa Timur, Indonesia. 
Published:Minggu, 19 Juli 2020
Last Modified:2020-12-21T04:35:27Z

Recent Posts

    Komentar 7  Recent Comments