Update Penggunaan Datepicker pada Sebuah Form

Update Penggunaan Datepicker pada Sebuah Form

Pada artikel berjudul "Menambahkan Plugin Datepicker pada input tanggal sebuah form" kita menggunakan file external css, jquery, dan js yang diambil dari CDN. Berkaitan dengan hal tersebut maka saya buat artikel ini sebagai "Update Penggunaan Datepicker pada Sebuah Form". Dimana file external yang sebelumnya kita gunakan akan kita hapus atau ganti dengan file internal.

Sebagai catatan ini berlaku untuk pengguna platform PopojiCms, bagi pengguna cms atau platform lain silahkan unduh file-file yang dibutuhkan diatas pada halaman unduhan kemudian silahkan sesuaikan.

Baik kita lanjutkan bagi anda pengguna platform PopojiCms, silahkan hapus file yang sebelumnya anda gunakan sesuai artikel "Menambahkan Plugin Datepicker pada input tanggal sebuah form". Sebagai pengganti file-file tersebut, silahkan gunakan file-file dibawah ini:

1. Silahkan tempel script berikut didalam tag head:

<link type="text/css" rel="stylesheet" href="../<?=DIR_INC;?>/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="../<?=DIR_INC;?>/css/bootstrap-datetimepicker.min.css" />

2. Tempelscript berikut tepat diatas tag body penutup:

<script type="text/javascript" src="../<?=DIR_INC;?>/js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../<?=DIR_INC;?>/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../<?=DIR_INC;?>/js/datetime/moment.js"></script>
<script type="text/javascript" src="../<?=DIR_INC;?>/js/datetime/bootstrap-datetimepicker.min.js"></script>

3. Tempel juga script berikut tepat diatas tag body penutup, dibawah script poin 2:

<script type="text/javascript">
 $(function () {
	$('#date').datetimepicker({
		format: 'YYYY-MM-DD',
		showTodayButton: true,
		showClear: true
	});

 });
</script>

Anda juga dapat mengcopy file-file tersebut dari directory asal, dan meletakan pada directory tema yang anda gunakan kemudian menyesuaikan script pemanggil diatas.

Penggunaan datepicker ganda dalam satu form

Sebagai tambahan yang menurut saya juga penting untuk anda ketahui, yaitu tentang penggunaan datepicker ganda. Sebagai contoh, silahkan kunjungi form pendaftaran yang sebelumnya telah saya buat di web batarakonsultan.com. Dalam form pendaftaran tersebut terdapat penggunaan datetime ganda, yang pertama pada field tanggal lahir, dan yang kedua pada field tanggal daftar.

Tanpa adanya penyesuaian maka datepicker yang akan muncul pada form tersebut hanyalah yang pertama saja, yaitu pada field tanggal lahir. Sedang pada field tanggal daftar tidak akan muncul. Bagaimana cara mengatasi hal tersebut?

Sebagai contoh, dalam artikel ini kita membuat sebuah form dengan dua field yang nantinya akan menggunakan datepicker.

• Yang pertama adalah field "birth", sehingga dalam field tersebut akan memiliki atribut name="birth" dan id="birth".
• Yang kedua adalah field registerdate,  sehingga dalam field tersebut akan memiliki atribut name="registerdate" dan id="registerdate".

Sekarang sesuaikan script pada poin 3 diatas menjadi seperti berikut:

<script type="text/javascript">
 $(function () {
	$('#birth').datetimepicker({
		format: 'YYYY-MM-DD',
		showTodayButton: true,
		showClear: true
	});
	
 });
 
 $(function () {
	
	$('#registerdate').datetimepicker({
		format: 'YYYY-MM-DD',
		showTodayButton: true,
		showClear: true
	});
 });
</script>

Textarea

Dalam sebuah form keberadaan textarea hampir tidak dapat ditinggalkan dan selalu ada. Jika anda membuat komponen berupa sebuah formulir menggunakan CLARK, silahkan sesuaikan juga textarea. Dimana secara default textarea hasil build CLARK akan menggunakan atribut name="nama-content" dan id="po-wysiwyg", oleh karena itu anda harus menyesuaikan atribut tersebut menjadi name="nama-content" dan id="nama-content".