Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Menghitung Selisih Hari dari Dua Buah Tanggal dengan Javascript dari PHPMaker
Mudahnya Mengekspor Konten Custom File ke File PDF dari PHPMaker dan FPDF
Mudahnya Memvalidasi Format Tanggal Menggunakan Javascript dari PHPMaker

Menghitung Selisih Hari dari Dua Buah Tanggal dengan Javascript dari PHPMaker

Rab, 27 April 2016 oleh Masino Sinaga 20 Komentar

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. 🙂

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Client Scripts, DateTime, Javascript, jQuery, PHPMaker Indonesia, Startup Script, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Mudahnya Mengekspor Konten Custom File ke File PDF dari PHPMaker dan FPDF
Mudahnya Memvalidasi Format Tanggal Menggunakan Javascript dari PHPMaker

Komentar

  1. rizki mengatakan

    Jum, 3 Juni 2016 pada 2:16 pm

    $(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

    Balas
    • Masino Sinaga mengatakan

      Jum, 3 Juni 2016 pada 4:10 pm

      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.

      Balas
      • rizki mengatakan

        Jum, 3 Juni 2016 pada 4:36 pm

        kode tersebut saya letakan di server events bagian mn?
        terimakasih

        Balas
        • Masino Sinaga mengatakan

          Sab, 4 Juni 2016 pada 6:25 pm

          Tergantung kebutuhan Anda. Bisa di Row_Inserting saat data baru sedang disimpan, atau Row_Updating saat data sedang diubah.

          Balas
  2. Aria Jaka mengatakan

    Sel, 18 Oktober 2016 pada 10:28 am

    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

    Balas
    • Masino Sinaga mengatakan

      Sel, 1 November 2016 pada 10:19 am

      $("#x_Date_Difference").val(diffDays + 1);
      
      Balas
      • Aria Jaka mengatakan

        Jum, 14 April 2017 pada 12:05 pm

        kalau format dd/mm/yyyy caranya gimana gan karena format diatas mm/dd/yyyy

        Balas
        • Masino Sinaga mengatakan

          Sab, 15 April 2017 pada 5:31 pm

          Siapa bilang format tanggal di atas adalah mm/dd/yyyy. Coba baca lagi dengan teliti artikelnya.

          Balas
  3. usman mengatakan

    Jum, 22 Desember 2017 pada 7:53 pm

    mas mau tanya gimana klo Menghitung Selisih tahun dan bulan dari Dua Buah Tanggal dengan Javascript dari PHPMaker

    Balas
    • Masino Sinaga mengatakan

      Kam, 28 Desember 2017 pada 9:36 pm

      Silahkan Googling javascript get difference between two dates in months and years.

      Balas
  4. Shandy mengatakan

    Sab, 10 Februari 2018 pada 12:44 pm

    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

    Balas
    • Masino Sinaga mengatakan

      Rab, 21 Februari 2018 pada 7:59 pm

      Caranya ya pakai kode jQuery. 🙂

      Balas
      • Shandy mengatakan

        Jum, 23 Februari 2018 pada 3:20 pm

        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

        Balas
  5. Mas Wid mengatakan

    Sen, 13 Agustus 2018 pada 11:00 am

    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

    Balas
  6. adit mengatakan

    Sel, 14 Juli 2020 pada 1:51 pm

    Pak saya mau tanya, jika menghitung waktu kerja tanpa hari sabtu minggu dan tgl merah apakah bisa menggunakan datepicker ?

    Balas
    • Masino Sinaga mengatakan

      Ming, 2 Agustus 2020 pada 7:35 pm

      Bisa.

      Balas
  7. Luk mengatakan

    Sel, 13 April 2021 pada 12:43 pm

    Problem saya solved, thank you sir.

    Balas
    • Masino Sinaga mengatakan

      Sab, 17 April 2021 pada 9:48 am

      You’re welcome.

      Balas
  8. Esther_Simamora mengatakan

    Jum, 10 Maret 2023 pada 2:36 pm

    Permisi Pak. ijin bertanya..
    terimakasih sudah banyak memberikan tutorial dan pencerahan di situsnya ini. bener bermanfaat..
    saya ada kasus menghitung selisih waktu dengan hasil jam dan menit dari dua buah inputan waktu. bagaimana ya?

    Balas
    • Masino Sinaga mengatakan

      Jum, 10 Maret 2023 pada 3:20 pm

      Sudah pernah dibahas di artikel ini:
      Mudahnya Menampilkan Selisih 2 Tanggal dengan Custom Fields dari PHPMaker.

      Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

Pos-pos Terbaru

  • Masino Extensions for PHPMaker 2025 Now Changed!
  • Begini Mudahnya Mengurangi Lebar Combobox pada PHPMaker 2025
  • Mudahnya Mengubah Nilai Delay Auto Hide Success Message di PHPMaker 2025
  • Mudahnya Berpindah Layout dari Table ke Cards di Halaman List lewat PHPMaker 2025
  • Jangan Lupa Pakai AdjustSql Saat Insert atau Update Data Lewat ExecuteStatement

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2025 | WordPress | Catat masuk | Kembali ke atas