JQuery DatePicker minDate() and maxDate()

Hello friends, long time no post(s). Ga berasa udah ramadhan lagi aja sekarang.  Selamat menjalankan ibadah shaum di bulan ramadhan ini ya?! Mohon maaf lahir dan bathin kalo banyak ada salah.

Oia, pernah ga sih kalian dapet case seperti ini : pertama kita pick/pilih tanggal 10-03-2013 di field pertama, kemudian di field kedua ada beberapa syarat dan ketentuan tertentu, misal sebelum tanggal 10-03-2013 tidak dapat dipick/pilih, yang boleh dipilih hanya 3 hari kedepan dan  setelah tanggal 13-03-2013 tidak dapat dipick/pilih lagi. Haaaa>:D Ribet juga sih sebenernya, tapi ternyata si datepicker udah nyediain hal-hal untuk semacam ini *tepuk tangan.

Pertama-tama kita buat inputannya dulu dengan html

<div>
	<p id="starDate">Start Date: 	<input type="text" class="startDate" /></p>
	<p id="endDate">End Date: <input type="text" class="endDate" /></p>
</div>

Karena inputan keduanya mau saya ilangin sementara, maka saya tambahin css dikit😀

	#endDate{
		display: none;
	};

Nah disini nih yang paling pentingnya, DatePicker! *yes

$(function() {
		$( ".startDate" ).datepicker({
			changeMonth: true,
        	changeYear: true,
			onClose: function(){
				$("#endDate").show("slow");
				$(".endDate").datepicker("option","minDate","today");
				$(".endDate").datepicker("option","maxDate",2);
			}
		});

		$(".endDate").datepicker();
	});

untuk demo nya bisa dilihat disini gan: http://jsfiddle.net/aginanjarm/ypwY7/3/

😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s