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. 🙂
Bang,
Kalau di PHPMaker 2021 bagaimana?
loadjs.ready(“myform”, 5 {
ew.createDateTimePicker(“myform”, “start”, {“ignoreReadonly”:true,”useCurrent”:false,”format”:1});
});
Kok gak bisa ya?
Thank you.
Periksa ulang lagi kode tersebut. Sepertinya masih belum tepat. Anda bisa membandingkan dengan source code yang di-generate oleh PHPMaker untuk melihat perbedaannya.
Gini bukan Bang?
loadjs.ready([“myform”, “datetimepicker”], function() {
ew.createDateTimePicker(“myform”, “dtpstart”, {“ignoreReadonly”:true,”useCurrent”:false,”format”:5});
});
Masih nggak bisa.
Langsung saja ke artikel ini ya : Mudahnya Menampilkan DateTimePicker di Custom Files pada PHPMaker 2021.
Sudah Bang.
Copy paste code itu ke custom saya.
Keknya ada yang korup atau gimana.
Makasih Bang untuk reply-nya.
Sudah bisa Bang. Makasih banyak.
Salah saya tidak teliti bahwa harus load js untuk form dan id form harus sama.
Saat saya copy paste, id form masih pake yang lama (myform) sedangkan load js sudah pakai my_form.
Kebiasaan pake 2017 yang gak perlu load js.
GBU.
Sama-sama.