ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทาง สามารถนำไปประยุกต์ใช้งาน
โดยจะเป็นการแสดง input text สองรายการที่กำหนด ให้เลือก
วันที่และเวลาเริ่มต้น และวันที่เวลาสิ้นสุด โดยที่ จะไม่สามารถเลือก
วันที่และเวลาสิ้นสุด น้อยกว่าวันที่เริ่มต้นได้ สะดวกในกรณีที่เรา
ไม่ต้องเขียนคำส่งเพื่อเช็คค่า
สำหรับการใช้งาน DateTimePicker ดาวน์โหลดได้ที่เว็บ
หรือคลิกขวาแล้วเลือก save ไฟล์จากลิ้งค์ด้านล่าง
แตกไฟล์แล้วเอาเฉพาะไฟล์ ด้านล่างนี้ไว้ใช้งาน
jquery.datetimepicker.css
jquery.datetimepicker.js
ตัวอย่าง
From
Time:
To Time:
To Time:
โค้ดตัวอย่างทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="js/jquery.datetimepicker.css">
<style type="text/css">
#startDate,
#endDate{
text-align:center;
width:100px;
}
#startTime,
#endTime{
text-align:center;
width:70px;
}
</style>
</head>
<body>
<br><br>
<div style="margin:auto;width:500px;">
From
<input type="text" name="startDate" id="startDate" value="">
Time: <input type="text" name="startTime" id="startTime" value="">
<br><br>
To
<input type="text" name="endDate" id="endDate" value="">
Time: <input type="text" name="endTime" id="endTime" value="">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--<script src="js/jquery-1.8.3.min.js"></script> -->
<script src="js/jquery.datetimepicker.js"></script>
<script type="text/javascript">
$(function(){
var optsDate = {
format:'Y-m-d', // รูปแบบวันที่
formatDate:'Y-m-d',
timepicker:false,
closeOnDateSelect:true,
}
var optsTime = {
format:'H:i', // รูปแบบเวลา
step:30, // step เวลาของนาที แสดงค่าทุก 30 นาที
formatTime:'H:i',
datepicker:false,
}
var setDateFunc = function(ct,obj){
var minDateSet = $("#startDate").val();
var maxDateSet = $("#endDate").val();
if($(obj).attr("id")=="startDate"){
this.setOptions({
minDate:false,
maxDate:maxDateSet?maxDateSet:false
})
}
if($(obj).attr("id")=="endDate"){
this.setOptions({
maxDate:false,
minDate:minDateSet?minDateSet:false
})
}
}
var setTimeFunc = function(ct,obj){
var minDateSet = $("#startDate").val();
var maxDateSet = $("#endDate").val();
var minTimeSet = $("#startTime").val();
var maxTimeSet = $("#endTime").val();
if(minDateSet!=maxDateSet){
minTimeSet = false;
maxTime = false;
}
if($(obj).attr("id")=="startTime"){
this.setOptions({
maxDate:maxDateSet?maxDateSet:false,
minTime:false,
maxTime:maxTimeSet?maxTimeSet:false
})
}
if($(obj).attr("id")=="endTime"){
this.setOptions({
minDate:minDateSet?minDateSet:false,
maxTime:false,
minTime:minTimeSet?minTimeSet:false
})
}
}
$("#startDate,#endDate").datetimepicker($.extend(optsDate,{
onShow:setDateFunc,
onSelectDate:setDateFunc,
}));
$("#startTime,#endTime").datetimepicker($.extend(optsTime,{
onShow:setTimeFunc,
onSelectTime:setTimeFunc,
}));
});
</script>
</body>
</html>
