jQuery UI Datepicker ปฏิทินวันที่ Calendar เลือกลงใน Textbox เลือกได้ทั้ง Date/Time

		<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
		<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />

		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="jquery-ui.min.js"></script>

		<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
		<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>

<script type="text/javascript">

$(function(){
	$("#dateInput").datepicker({
		dateFormat: 'dd-M-yy'
	});
});

</script>
<input type="text" name="dateInput" id="dateInput" value="" /> 

<script type="text/javascript">

$(function(){
	$("#dateInput").datetimepicker({
		dateFormat: 'dd-M-yy',
		timeFormat: "HH:mm"
	});
});

</script>
<input type="text" name="dateInput" id="dateInput" value="" /> 

<script type="text/javascript">

$(function(){
	$("#dateInput").timepicker({
		timeFormat: "HH:mm"
	});
});

</script>
<input type="text" name="dateInput" id="dateInput" value="" /> 

<script type="text/javascript">

$(function(){
	$("#dateInput").datetimepicker({
		altField: "#timeInput",
		dateFormat: 'dd-M-yy',
		timeFormat: "HH:mm"
	});
});

</script>
<input type="text" name="dateInput" id="dateInput" value="" /> 
<input type="text" name="timeInput" id="timeInput" value="" /> 

<script type="text/javascript">

$(function(){

	var startDateTextBox = $('#dateStart');
	var endDateTextBox = $('#dateEnd');

	startDateTextBox.datepicker({ 
		dateFormat: 'dd-M-yy',
		onClose: function(dateText, inst) {
			if (endDateTextBox.val() != '') {
				var testStartDate = startDateTextBox.datetimepicker('getDate');
				var testEndDate = endDateTextBox.datetimepicker('getDate');
				if (testStartDate > testEndDate)
					endDateTextBox.datetimepicker('setDate', testStartDate);
			}
			else {
				endDateTextBox.val(dateText);
			}
		},
		onSelect: function (selectedDateTime){
			endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
		}
	});
	endDateTextBox.datepicker({ 
		dateFormat: 'dd-M-yy',
		onClose: function(dateText, inst) {
			if (startDateTextBox.val() != '') {
				var testStartDate = startDateTextBox.datetimepicker('getDate');
				var testEndDate = endDateTextBox.datetimepicker('getDate');
				if (testStartDate > testEndDate)
					startDateTextBox.datetimepicker('setDate', testEndDate);
			}
			else {
				startDateTextBox.val(dateText);
			}
		},
		onSelect: function (selectedDateTime){
			startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
		}
	});

});

</script>
Start Date : <input type="text" name="dateStart" id="dateStart" value="" /> 
End Date : <input type="text" name="dateEnd" id="dateEnd" value="" /> 

<span id="startDate">10-Feb-2013</span> 
<b>To</b>
<span id="endDate">20-Feb-2013</span> 

<script type="text/javascript">

$(function(){
	var minD = $("#startDate").html();
	var maxD = $("#endDate").html();
	$("#dateInput").datepicker({
		dateFormat: 'dd-M-yy',
		minDate: new Date(minD),
		maxDate: new Date(maxD)
	});
});

</script>
<input type="text" name="dateInput" id="dateInput" value="" /> 

<div id="startDate">
<script type="text/javascript">

$(function(){
	$("#dateInput").datepicker({
		dateFormat: 'dd-M-yy',
		numberOfMonths: 2,
	});
});

</script>
<input type="text" name="dateInput" id="dateInput" value="" />