Sungguh sudah tidak terhitung lagi banyaknya keuntungan yang bisa diperoleh oleh Web Developer jika membangun Aplikasi Web dengan PHPMaker. Termasuk salah satu trik berikut, yang akan membuktikan betapa mudah, cepat, dan menyenangkannya menghitung selisih jumlah hari dari dua buah tanggal menggunakan kode Javascript.
Katakanlah dalam suatu table, kita memiliki sedikitnya tiga buah field, yaitu Begin_Date (tipe Date), End_Date (tipe Date), dan Date_Difference (tipe Numeric). Kita sebagai Web Developer ingin setelah Pengguna memilih Tanggal pada field Begin_Date dan End_Date, maka selisih hari dari kedua Tanggal tadi akan otomatis terisi pada field Date_Difference.
Pertama, pastikan kita sudah mengaktifkan extension untuk menampilkan control DateTime Picker. Klik menu Tools -> Extensions, lalu beri tanda centang pada kolom Enabled pada extension JSCalendar, lalu klik tombol OK.
Kedua, dari Fields setup milik table tadi, klik field Begin_Date, lalu pastikan Anda sudah memberikan tanda centang pada item Use date/time picker pada panel Edit Tag. Pastikan juga Anda sudah memilih yyyy/mm/dd dari bagian Validate pada panel tadi.
Ketiga, lakukan hal yang sama seperti uraian pada langkah Kedua tadi, untuk field End_Date.
Keempat, tambahkan sedikit kode jQuery/Javascript berikut pada bagian Startup Script di bawah lokasi Client Scripts -> Table-Specific -> Add/Copy Page milik table tadi, sehingga kode selengkapnya menjadi seperti ini:
$(document).ready(function() {
$('#x_Begin_Date, #x_End_Date').on('change textInput input', function () {
if ( ($("#x_Begin_Date").val() != "") && ($("#x_End_Date").val() != "")) {
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date($("#x_Begin_Date").val());
var secondDate = new Date($("#x_End_Date").val());
var diffDays = Math.round(Math.round((secondDate.getTime() - firstDate.getTime()) / (oneDay)));
$("#x_Date_Difference").val(diffDays);
}
});
});
Dari kode tadi, kita cukup mengoptimalkan object Date yang terdapat di browser. Gunakan function getTime milik object Date untuk mengambil nilai satuan terkecil. Kurangkan antara tanggal akhir dan tanggal awal, lalu hasilnya bagi dengan nilai total waktu dalam satuan hari.
Kelima, atau terakhir, generate ulang semua file script menggunakan PHPMaker, seperti biasa. Biarkan PHPMaker sekarang yang menjadi asisten setia Anda untuk menghasilkan Aplikasi Web selengkapnya.
Setelah itu, jalankan Aplikasi Web dari browser. Cobalah menambah data baru untuk table tadi, lalu pilih Tanggal pada field Begin_Date dan End_Date. Perhatikan sekarang di field Date_Difference, seharusnya terisi dengan nilai selisih jumlah hari dari kedua Tanggal.
Contoh, jika di field Begin_Date Anda masukkan 2016/04/16, dan di field End_Date Anda masukkan 2016/04/21, maka nilai pada field Date_Difference akan otomatis terisi dengan nilai 5.
Jika kita ingin agar semua hari dihitung, termasuk juga dengan tanggal awal maupun tanggal akhirnya, maka tinggal tambahkan saja variable diffDays dengan nilai satu. Jadi, dalam contoh di atas, jumlah selisih hari seharusnya menjadi 6.
Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan? Kita tidak perlu lagi menulis kode dari awal, kita tidak perlu lagi mengutak-atik kode di file script yang sudah di-generate.
Cukup hanya melakukan beberapa pengaturan dari Fields setup, dan menambahkan sedikit kode Javascript/jQuery saja dari sisi project PHPMaker. 🙂
$(document).ready(function() { $('#x_mulaicuti, #x_selesaicuti').on('change textInput input', function () { if ( ($("#x_mulaicuti").val() != "") && ($("#x_selesaicuti").val() != "")) { var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds var firstDate = new Date($("#x_mulaicuti").val()); var secondDate = new Date($("#x_selesaicuti").val()); var diffDays = Math.round(Math.round((secondDate.getTime() - firstDate.getTime()) / (oneDay))); $("#x_lamacuti").val(diffDays); } }); });mas masino, dari kode diatas, saya ingin bertanya, jika perhitungan hari muncul 5 hari, sedangkan disana ada sabtu dan minggu, seharusnya bukan 5 hari tetapi 3 hari, dimana yg harus saya ganti atau tambahkan dari kode diatas?
trimakasih
Selama ini saya tidak pernah menggunakan jQuery code di sisi client untuk menghitung selisih hari yang meng-exclude-kan hari Sabtu dan Minggu.
Sebagai gantinya, saya pakai kode PHP melalui fitur Server Events . Pertimbangannya, karena biasanya ada business-logic tertentu yang membutuhkan parameter tambahan dari table lain di Database.
Intinya, Anda harus bisa membuat function yang mengembalikan tanggal berapa saja dari dua tanggal awal dan akhir tadi yang hari Sabtu dan Minggu. Silahkan Googling, semoga berhasil.
kode tersebut saya letakan di server events bagian mn?
terimakasih
Tergantung kebutuhan Anda. Bisa di Row_Inserting saat data baru sedang disimpan, atau Row_Updating saat data sedang diubah.
Terima Kasih Mas..artikel nya sangat membantu…
cara menambahkan variabel diffdays dengan nilai 1, bagaimana cara nya? karena tanggal awal saya harus dihitung juga
dan jika format date nya sudah dd/mm/yy bagai mana menkonversi nya terlebih dahulu..
karena yang contoh mas diatas dengan format yy/mm/dd..
terima kasih sebelumnya
$("#x_Date_Difference").val(diffDays + 1);kalau format dd/mm/yyyy caranya gimana gan karena format diatas mm/dd/yyyy
Siapa bilang format tanggal di atas adalah mm/dd/yyyy. Coba baca lagi dengan teliti artikelnya.
mas mau tanya gimana klo Menghitung Selisih tahun dan bulan dari Dua Buah Tanggal dengan Javascript dari PHPMaker
Silahkan Googling javascript get difference between two dates in months and years.
Ijin Bertanya Pak Masino
Jika Ingin Memberikan Nilai Tahun Saat Ini terisi otomatis Pada Suatu Field Di PHPMAKER Setelah Klik Tombol Add Bagaiamana Cara Nya Ya?
Terima Kasih Sebelumnya
Caranya ya pakai kode jQuery. 🙂
Selamat Jumpa Lagi Pak Masino
Saya Ada Inbox Di Facebook Bapak
Dengan Nama Shuhada Shandy Muhammad
Melalui Artikel Bapak Yang Lain Juga Saya Ada Komentar Hal Yang Sama Seperti Di Inbox Pak Masino, Mohon Direspon Pak
Terima Kasih
Siang Pak Masino,
Mau nanya Pak, pada tutorial diatas Bapak kan menuliskan
“Pastikan juga Anda sudah memilih yyyy/mm/dd dari bagian Validate pada panel tadi.”
nah saya kesulitan menemukan tab untuk mengubah format “yyyy/mm/dd”, dibagian Tab Validation saya tidak menemukan Pak, saya menggunakan PHPMaker 2018.0.8, maaf kalau pertanyaan saya agak konyol, tapi saya benar-benar kesulitan Pak.
terimakasih, mohon solusinya
Pak saya mau tanya, jika menghitung waktu kerja tanpa hari sabtu minggu dan tgl merah apakah bisa menggunakan datepicker ?
Bisa.