Mencegah Pengguna Memilih Tanggal yang Sudah Lewat di JSCalendar dari PHPMaker

Seperti yang kita ketahui, PHPMaker menggunakan extension JSCalendar untuk membantu Pengguna memilih data Tanggal. Ketika Pengguna mengklik icon kalender di suatu field, muncul kalender dalam jendela popup kecil. Selanjutnya, Pengguna dapat memilih Tanggal yang diinginkan supaya field tadi terisi.

Kadang-kadang, kita sebagai Web Developer harus membatasi tanggal yang boleh dipilih oleh Pengguna. Contoh, kita membatasi tanggal minimum yang boleh dipilih adalah mulai tanggal hari ini. Tanggal kemarin dan hari-hari sebelumnya tidak boleh dipilih. Itu artinya, kita harus men-disable tanggal kemarin dan tanggal-tanggal sebelumnya pada kalender tersebut.

Pernah kesulitan mengalami hal ini? Apa yang Anda lakukan? Menyerah begitu saja? Hm, sebaiknya jangan. Apalagi jika Anda sudah membangun Aplikasi Web dengan PHPMaker. Mengapa? Karena hal ini bisa diatasi dengan sangat mudah, cepat, dan yang pasti juga menyenangkan. Penasaran ingin tahu caranya?

Katakanlah kita ingin menerapkan kondisi tadi pada field OrderDate di table orders. Kita ingin mencegah Pengguna memilih tanggal kemarin dan hari-hari sebelumnya. Silahkan ikuti langkah-langkah berikut dengan teliti!

Pertama, pastikan Anda sudah mengaktifkan extension untuk menampilkan control DateTime Picker. Klik menu Tools -> Extensions, beri tanda centang pada kolom Enabled pada extension JSCalendar, lalu klik tombol OK.

Kedua, dari Fields setup milik table orders, klik field OrderDate, lalu pastikan Anda SUDAH MENGHAPUS tanda centang pada item Use date/time picker pada panel Edit Tag. Pastikan juga Anda sudah memilih (None) dari bagian Validate pada panel tadi. Jangan khawatir, kalender akan kita tangani melalui bagian Global Code dan Startup Script pada Client Scripts.

Ketiga, salin kode Javascript/jQuery berikut ke dalam Global Code yang terdapat di bawah Client Scripts -> Global -> Pages with header/footer:

// Create calendar
function ms_CreateCalendar(formid, id, format, disableFunc) {
	if (id.indexOf("$rowindex$") > -1)
		return;
	var $ = jQuery, el = ew_GetElement(id, formid), $el = $(el);
	if ($el.parent().is(".input-group"))
		return;
	var $btn = $('<button type="button"><span class="glyphicon glyphicon-calendar"></span></button>')
		.addClass("btn btn-default btn-sm").css({ "font-size": $el.css("font-size"), "height": $el.outerHeight() })
		.click(function() { $(this).closest(".has-error").removeClass("has-error"); });
	var settings = {
		inputField: el, // input field
		showsTime: / %H:%M(:%S)?$/.test(format), // shows time
		ifFormat: format, // date format
		button: $btn[0], // button
		disableFunc: disableFunc, // function to disable the certain date(s)
		cache: true // reuse the same calendar object, where possible
	};
	var args = {"id": id, "form": formid, "enabled": true, "settings": settings, "language": EW_LANGUAGE_ID};
	$el.wrap('<div class="input-group"></div>').after($('<span class="input-group-btn"></span>').append($btn));	
	$(function() {		
		$(document).trigger("calendar", [args]);
		if (!args.enabled)
			return;
		if (!Calendar._DN) {
			$.getScript(EW_RELATIVE_PATH + "calendar/lang/calendar-" + (args.language || "en") + ".js")
				.fail(function() {
					$.getScript(EW_RELATIVE_PATH + "calendar/lang/calendar-en.js");
				});
		}
		Calendar.setup(args.settings);
	});
}

Keempat, salin kode jQuery berikut ke dalam Startup Script yang terdapat di bawah Client Scripts -> Table-Specific -> Add/Copy Page:

$(document).ready(function(){
	ms_CreateCalendar("fordersadd", "x_OrderDate", "%Y/%m/%d", function(date) {
		var now = new Date();
		if (date.getFullYear() < now.getFullYear())
			return true;
		if (date.getFullYear() == now.getFullYear()) {
			if (date.getMonth() < now.getMonth())
				return true;
		}
		if (date.getMonth() == now.getMonth()) {
			if (date.getDate() < now.getDate())
				return true;
		}
	});	
});

Kelima, seperti biasa generate ulang semua file script menggunakan PHPMaker. Selesai! Hanya begitu saja? Ya, hanya begitu saja!

Setelah itu jalankan Aplikasi Web dari browser, lalu cobalah menambah data baru pada table orders tadi, lalu klik icon kalender di sebelah field OrderDate. Anda akan melihat tanggal kemarin dan tanggal hari-hari sebelumnya menjadi tidak aktif atau tidak bisa dipilih.

Kesimpulannya, kita sebagai Web Developer dapat membuat object kalender tidak selalu harus dari pengaturan Fields setup. Kita bisa membuat object kalender dari bagian Client Scripts. Dengan cara ini, maka kita bisa mengkostumais kalender milik JSCalendar tadi.

Satu lagi bukti nyata betapa powerful sekaligus fleksibelnya PHPMaker dalam membangun Aplikasi Web. Dan yang lebih penting lagi, betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker! 🙂