ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทาง สามารถนำไปประยุกต์ใช้งาน
โดยจะเป็นการแสดง input text สองรายการที่กำหนด ให้เลือก
วันที่และเวลาเริ่มต้น และวันที่เวลาสิ้นสุด โดยที่ จะไม่สามารถเลือก
วันที่และเวลาสิ้นสุด น้อยกว่าวันที่เริ่มต้นได้ สะดวกในกรณีที่เรา
ไม่ต้องเขียนคำส่งเพื่อเช็คค่า
สำหรับการใช้งาน DateTimePicker ดาวน์โหลดได้ที่เว็บ
หรือคลิกขวาแล้วเลือก save ไฟล์จากลิ้งค์ด้านล่าง
แตกไฟล์แล้วเอาเฉพาะไฟล์ ด้านล่างนี้ไว้ใช้งาน
jquery.datetimepicker.css
jquery.datetimepicker.js
ตัวอย่าง
From
Time:
To Time:
To Time:
โค้ดตัวอย่างทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | <!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> |
