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

1
2
3
4

<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 :D

1
2
3

#endDate{
	display: none;
};

Nah disini nih yang paling pentingnya, DatePicker! *yes

1
2
3
4
5
6
7
8
9
10
11
12
13

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

:D