Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mencegah Pengguna Memilih Tanggal yang Sudah Lewat di JSCalendar dari PHPMaker
Mudahnya Memvalidasi Format Tanggal Menggunakan Javascript dari PHPMaker
Wow! Requires search criteria Ternyata Bisa Dibuat Dinamis dari PHPMaker

Mencegah Pengguna Memilih Tanggal yang Sudah Lewat di JSCalendar dari PHPMaker

Sen, 25 April 2016 oleh Masino Sinaga 16 Komentar

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

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Client Scripts, getDate, getFullYear, getMonth, Javascript, jQuery, JSCalendar, 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 Memvalidasi Format Tanggal Menggunakan Javascript dari PHPMaker
Wow! Requires search criteria Ternyata Bisa Dibuat Dinamis dari PHPMaker

Komentar

  1. Sukri mengatakan

    Rab, 4 Januari 2017 pada 7:07 am

    saya membuat kode kalendar.php
    ”

    <a href="” style=”color:#FFFFFF”> <<
    <a href="” style=”color:#FFFFFF”> >>

    M
    S
    S
    R
    K
    J
    S

    <?php

    $timestamp = mktime(0,0,0,$cMonth,1,$cYear);
    $maxday = date("t",$timestamp);
    $thismonth = getdate ($timestamp);
    $startday = $thismonth['wday'];
    for ($i=0; $i<($maxday+$startday); $i++) {
    if(($i % 7) == 0 ) echo "n”;

    if($i < $startday) echo "n”;
    else
    if(($i – $startday + 1) == $aktif_day ) echo “” . ($i – $startday + 1) .”n”;
    Else
    echo ” <a href='". $_SERVER["PHP_SELF"] . "?month=". $aktif_month . "&year=" . $aktif_year . "&day=" . ($i – $startday + 1) ."' ” . ($i – $startday + 1) . “ n”;
    if(($i % 7) == 6 ) echo “n”;

    }
    ?>

    ”
    Bagaimana cara selalu memunculkan kalendar ditiap halaman sehingga ketika diklik tanggal pada kalendar tersebut maka data terfilter berdasarkan tanggal yang di klik ??

    Balas
    • Sukri mengatakan

      Rab, 4 Januari 2017 pada 7:11 am

      Bagaimana cara selalu memunculkan kalendar ditiap halaman sehingga ketika diklik tanggal pada kalendar tersebut maka data terfilter berdasarkan tanggal yang di klik ??

      Balas
      • Masino Sinaga mengatakan

        Rab, 4 Januari 2017 pada 8:28 am

        Tidak ada kaitannya dengan artikel di atas, jadi saya belum bisa membantu.

        Balas
  2. agus mengatakan

    Sen, 20 November 2017 pada 11:39 am

    tidak keluar icon nya pak, apa datetime pickernya dinyalakan lagi setelah itu?

    Balas
    • Masino Sinaga mengatakan

      Sel, 21 November 2017 pada 11:30 am

      Artikel ini tidak berlaku untuk PHPMaker versi 2018, karena Extension yang digunakan sudah sedikit berbeda. Harap maklum.

      Balas
  3. agus mengatakan

    Rab, 22 November 2017 pada 4:02 pm

    hmmm saya pakai 2017, sudah setting table dan fieldnya jugaa. kira kira knp lagi pak masino

    Balas
    • Masino Sinaga mengatakan

      Jum, 24 November 2017 pada 12:42 pm

      Tekan [F12] dari browser yang Anda gunakan, lalu lihat apakah ada error Javascript di sana?

      Balas
  4. SIMKO mengatakan

    Jum, 4 Mei 2018 pada 11:46 am

    selamat siang pak masino,saya menggunakan phpmaker 2018, extension jscalendernya ga ada pak, mohon bantuaanya terimakasih

    Balas
    • Masino Sinaga mengatakan

      Jum, 4 Mei 2018 pada 11:55 am

      PHPMaker 2018 tidak lagi menggunakan extension JSCalendar, tapi di versi terbaru ini dia menggunakan extension DateTimePicker.

      Balas
      • SIMKO mengatakan

        Jum, 4 Mei 2018 pada 12:33 pm

        terimakasih pak masino

        Balas
        • Masino Sinaga mengatakan

          Jum, 4 Mei 2018 pada 12:50 pm

          Sama-sama.

          Balas
        • SIMKO mengatakan

          Jum, 4 Mei 2018 pada 12:58 pm

          mohon bantuannya lagi pak masino, intruksi dr tutorial di atas sudah saya lakukan, saat di jalankan projectnya ga ada yg eror, tp calendar masih blom muncul
          terimakasih

          Balas
          • Masino Sinaga mengatakan

            Jum, 4 Mei 2018 pada 1:28 pm

            Kode di atas hanya berlaku untuk extension JSCalendar (lihat judulnya). Sedangkan extension DateTimePicker di PHPMaker v2018 berbeda dengan JSCalendar, jadi kode di atas tidak bisa digunakan untuk extension DateTimePicker.

            Balas
  5. AJ mengatakan

    Kam, 30 Agustus 2018 pada 9:23 am

    dear masinosinaga

    bagaimana cara membatasi inputan tanggal tidak bisa di pilih selain hari senin?
    mohon bantuannya…

    untuk phpmaker 2017.

    sekian terimakasih

    Balas
    • Masino Sinaga mengatakan

      Kam, 8 November 2018 pada 6:18 pm

      Wah, versi 2017 sudah terlalu lama, jadi tidak bisa lagi diutak-atik.

      Balas

Trackbacks

  1. Mencegah Pengguna Memilih Tanggal yang Sudah Lewat di DateTimePicker pada PHPMaker 2021 – Masino Sinaga berkata:
    Rab, 12 Mei 2021 pukul 8:32 am

    […] Tulisan ini mirip dengan artikel yang saya tulis sekitar 5 tahun yang lalu, yaitu Mencegah Pengguna Memilih Tanggal yang Sudah Lewat di JSCalendar 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

  • ReadOnly vs Disabled, Sebaiknya Pilih yang Mana?
  • Mudahnya Menghilangkan Search Operator pada Extended dan Advanced Search di PHPMaker 2024
  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download!
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Review PHPMaker 2024

Menu

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

Komentar Terbaru

  • Masino Sinaga pada Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • achmad pada Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Masino Sinaga pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker
  • Shandy pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker
  • Masino Sinaga pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker

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 - 2023 | WordPress | Catat masuk | Kembali ke atas