Cara menggunakan coding tanggal lahir php

Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar membuat sebuah inputan tanggal dengan Datepicker. Datepicker merupakan plugin jquery untuk menampilkan kalendar interaktif yang dapat mempermudah kita untuk input tanggal dengan format date maupun datetime. Kita bisa menggunakan plugin datepicker ini pada sebuah form inputan tanggal lahir dan sebagainya. 

Membuat Form Input Tanggal dengan Datepicker

Disini saya akan memberikan dua contoh plugin datepicker yang dapat di terapkan di aplikasi web teman-teman, pertama Datepicker JQuery UI dan yang kedua Datepicker Bootstrap. 

Datepicker JQuery UI

Untuk memasang plugin Datepicker JQuery UI, teman-teman perlu memanggil komponen css dan class jquerynya dengan mendownload plugin datepicker jquery ui atau bisa langsung mengakses melalui CDN dengan script dibawah ini kemudian letakkan di dalam tag head.

Buat fungsi untuk menerapkan datepicker pada inputan form dengan javascript.

#date diatas merupakan isi dari attribute id pada form input. Lihat kode dibawah ini.

Date:

Untuk format atau option datepicker jquery ui seperti penampilan tanggal (yyyy-mm-dd) dan sebagainya, teman-teman bisa membaca dokumentasinya di sini. api.jqueryui.com/datepicker. 
Contoh untuk menampilkan tanggal dengan format yyyy-mm-dd.

Kode lengkap membuat form input dengan datepicker jquery ui seperti dibawah ini. Simpan dengan nama file latihan1.html

  
  

  
  
  
  

  



  Date:
  
 

Datepicker Bootstrap

Datepicker Bootstrap merupakan plugin tambahan untuk framework bootstrap. Fungsinya sama dengan datepicker jquery ui, yaitu untuk menampilkan popup kalendar interaktif. 
Download plugin datepicker bootstrap terlebih dahulu di sini. bootstrap-datepicker.

Setelah download selesai, silahkan ekstrak hasil download tadi kemudian pindahkan folder bootstrap-datepicker kedalam folder xampp/htdocs.

Panggil komponen css dan jquerynya dengan menambahkan kode dibawah ini didalam tag head.

Untuk menerapkan datepicker bootstrap di dalam form input, caranya sama dengan datepicker jquery ui dengan membuat fungsi javascript.

#date merupakan isi dari attribute id pada form input.

Teman-teman bisa membaca dokumentasinya untuk mengubah format atau option datepicker bootstrap disini bootstrap-datepicker.readthedocs.io. Contoh sederhana format tanggal pada datepicker bootstrap.

Kode lengkap membuat form input dengan datepicker bootstrap. Simpan dengan nama file latihan2.html

  
  
  
  
  
  
  

  
  
  
  

  




 
  

    

      Date:
      

        
      
      
    
  

Tutorial membuat form input tanggal dengan datepicker telah selesai. Sekian, semoga bermanfaat.

Baca juga Membuat Format Hari Tanggal Indonesia dengan PHP

Related Search:
Membuat Form Input Tanggal dengan Datepicker
Membuat Form Inputan Tanggal dengan JQuery UI
Membuat Form Input Tanggal dengan PHP
Form Input Tanggal Lahir PHP