Begini Mudahnya Menampilkan DatePicker JSCalendar di Custom Files PHPMaker

Pernah mengalami kesulitan ketika ingin menampilkan control DatePicker menggunakan JSCalendar di halaman Custom Files? Jangan khawatir. Berikut ini kita akan mengetahui betapa mudahnya mengimplementasikan fitur itu dari dalam project PHPMaker.

Oke, langsung saja ya supaya tidak bertele-tele!

Pertama kali, pastikan kita sudah mengaktifkan extension JSCalendar dari menu Tools -> Extensions.

Setelah itu, pastikan Anda sudah membuat sebuah Custom File baru. Jika belum tahu caranya, baca topik Custom Files di menu Help PHPMaker, atau cari artikel saya di situs ini dengan kata kunci topik tadi.

Selanjutnya, salin kode berikut ke bagian Content dari Custom File yang sudah Anda buat tadi.

<form id="myform" name="myform" class="form-horizontal">
	<div id="r_start" class="form-group">
		<label for="start" class="col-sm-2 control-label ewLabel">Date Start</label>
		<div class="col-sm-10">
		  <span id="el_calendar_start">
		  <input type="text" name="start" data-field="start" data-format="9" size="20" class="form-control" id="start">
		  <script type="text/javascript">
			ew_CreateCalendar("myform", "start", 9);
		  </script>
		  </span>
		</div>
	</div>
</form>

Perhatikan kode barusan. Kita cukup memanggil fungsi Javascript bawaan PHPMaker yang bernama ew_CreateCalendar setelah sintaks untuk menampilkan control TextBox yang bernama dan memiliki ID start.

Parameter pertama adalah ID dari form tempat control TextBox itu berada, yaitu myform.

Parameter kedua adalah ID dari control TextBox, yaitu start.

Parameter ketiga adalah ID dari format data tanggalnya, yaitu 9, yang dalam hal ini artinya adalah data Tanggal beserta Jam, dengan format yyyy-MM-dd hh:mm:ss, atau dikenal di PHP date sebagai YmdHis.

Dalam hal ini, pastikan juga kita sudah mengeset beberapa pengaturan berikut pada file en.json (buka dari menu Tools -> Locale Settings), yaitu:

- Date format ----> YmdHis 
- Date separator ----> - (karakter minus)
- Time separator ----> : (Karakter titik dua).

Terakhir, generate semua file script seperti biasa menggunakan PHPMaker.

Betapa mudah, cepat, dan menyenangkan sekali, bukan?

Hanya dengan sedikit kode itu saja, control DatePicker dapat ditampilkan pada halaman Custom File kita. Selebihnya akan ditangani oleh PHPMaker. Kita tidak perlu menulis kode sampai puluhan, ratusan, atau bahkan ribuan baris secara manual seperti yang mungkin Anda lakukan selama ini. 🙂