Memaksa Pengguna Memilih Tanggal 20 s.d. 19 Bulan Berikutnya dari PHPMaker

Pernah mengalami kesulitan untuk memaksa Pengguna di Aplikasi Web yang Anda buat supaya memilih tanggal mulai 20 sampai dengan 19 bulan berikutnya? Yang jelas, jika Anda membangun Aplikasi Web dengan menggunakan PHPMaker, hal ini bisa dilakukan dengan sangat mudah.

Katakanlah nama field yang sedang kita bicarakan ini adalah Tanggal_Masuk. Kita ingin menampilkan field ini pada panel Pencarian di halaman List sebagai Extended Search. Field ini bersifat mandatory. Artinya, jika Pengguna tidak memasukkan tanggal awal dan tanggal akhir, maka proses pencarian tidak dapat dilakukan.

Saat Pengguna memilih tanggal awal, maka otomatis tanggal berubah menjadi 20 sesuai dengan bulan yang dipilih. Di saat yang sama, tanggal akhir otomatis terisi menjadi tanggal 19 bulan berikutnya.

Biasanya business-logic seperti ini cocok untuk menampilkan laporan dengan range tanggal yang bulannya berbeda, tetap harus tetap dalam range satu bulan saja. Sudah ada gambaran sekarang?

1. Pertama sekali, dari Fields setup, klik field Tanggal_Masuk, lalu beri tanda centang pada item Use date/time picker pada panel Edit Tag. Pastikan juga format Tanggal yang digunakan adalah yyyy/mm/dd dari bagian Validate.
2. Masih pada Fields setup, pastikan sudah memilih BETWEEN pada kolom Search Opr 1 di bawah kolom Advanced Search Page. Tujuannya supaya di form Pencarian nanti field ini menggunakan dua Textbox, yaitu tanggal awal dan tanggal akhir.
3. Jangan lupa untuk mengaktifkan extension untuk menampilkan control DateTime Picker. Klik menu Tools -> Extensions, lalu beri tanda centang pada kolom Enabled untuk extension yang bernama JSCalendar, lalu klik tombol OK.
4. Langkah selanjutnya kita akan menulis kode jQuery untuk memaksa Pengguna memilih tanggal 20 sampai dengan 19 bulan berikutnya. Klik tab Code (Server Events, Client Scripts and Custom Templates), lalu tambahkan kode jQuery berikut pada lokasi Client Scripts -> Table-Specific -> List Page -> Startup Script:

   $(document).ready(function(){
   	$("#x_Tanggal_Masuk").change(function(){
   		var date1 = new Date($("#x_Tanggal_Masuk").val());
   		var lastDay1 = new Date(date1.getFullYear(), date1.getMonth(), 20);
   		lastMonth1 = ( (lastDay1.getMonth() + 1) < 10) ? '0' + (lastDay1.getMonth() + 1) : (lastDay1.getMonth() + 1);
   		var newDate1 =  lastDay1.getFullYear() + '/' + lastMonth1 + '/' + lastDay1.getDate();
   		$("#x_Tanggal_Masuk").val(newDate1);		
   		var lastDay = new Date(date1.getFullYear(), date1.getMonth() + 1, 19);
   		lastMonth = ( (lastDay.getMonth() + 1) < 10) ? '0' + (lastDay.getMonth() + 1) : (lastDay.getMonth() + 1);
   		lastDate = ( lastDay.getDate() < 10 ) ? '0' + lastDay.getDate() : lastDay.getDate();
   		var newDate =  lastDay.getFullYear() + '/' + lastMonth + '/' + lastDate;
   		$("#y_Tanggal_Masuk").val(newDate);
   	});
   });
   

5. Terakhir, untuk memastikan Pengguna harus memilih tanggal, salin kode Javascript berikut ke dalam lokasi Client Scripts -> Table-Specific -> List Page -> Form_CustomValidate:

   function(fobj) { // DO NOT CHANGE THIS LINE!
   	// Your custom validation code here, return false if invalid.
   	elm = this.GetElements("x_Tanggal_Masuk");
    	if (elm && !ew_IsHidden(elm) && !ew_HasValue(elm))
    		return this.OnError(elm, "<?php echo ew_JsEncode2(str_replace("%s", CurrentPage()->Tanggal_Masuk->FldCaption(), CurrentPage()->Tanggal_Masuk->ReqErrMsg)) ?>");	
   	return true;
   }
   

6. Terakhir, seperti biasa, generate ulang semua file script seperti biasa dari PHPMaker.
7. Setelah itu, jalankan Aplikasi Web yang sudah dihasilkan tadi dari browser. Pada halaman List table tersebut, pastikan panel Pencarian sudah terbuka. Klik icon DateTime Picker dari tanggal awal, lalu silahkan pilih sebuah tanggal yang Anda inginkan. Perhatikan bahwa di tanggal awal otomatis terpilih menjadi tanggal 20 sesuai bulan yang sedang terpilih, dan di tanggal akhir otomatis terisi dengan tanggal 19 bulan berikutnya.

Dengan cara di atas, maka sistem juga akan menangani kemungkinan jika tahun di tanggal awal berbeda dengan tahun di tanggal akhir. Contoh, jika Pengguna memilih salah satu tanggal di bulan Desember 2015, maka nilai tanggal awal menjadi 2015/12/20, dan nilai di tanggal akhir otomatis berubah menjadi 2016/01/19.

Betapa mudah, cepat, dan menyenangkan sekali, bukan? Tidak perlu lagi cara-cara manual atau konvensional seperti selama ini mungkin masih Anda lakukan dengan hanya mengubah nilai bulannya saja, tetap tahunnya tidak.

Selamat menikmati PHPMaker yang begitu keren! 🙂