PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

วิธี กำหนด datetimepicker เลือกวันเวลา เริ่มต้น และสิ้นสุด

15 December 2014 By


ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทาง สามารถนำไปประยุกต์ใช้งาน
โดยจะเป็นการแสดง input text สองรายการที่กำหนด ให้เลือก
วันที่และเวลาเริ่มต้น และวันที่เวลาสิ้นสุด โดยที่ จะไม่สามารถเลือก
วันที่และเวลาสิ้นสุด น้อยกว่าวันที่เริ่มต้นได้  สะดวกในกรณีที่เรา
ไม่ต้องเขียนคำส่งเพื่อเช็คค่า

 
สำหรับการใช้งาน DateTimePicker ดาวน์โหลดได้ที่เว็บ
http://xdsoft.net/jqplugins/datetimepicker/
 
หรือคลิกขวาแล้วเลือก save ไฟล์จากลิ้งค์ด้านล่าง
https://github.com/xdan/datetimepicker/archive/master.zip
 
แตกไฟล์แล้วเอาเฉพาะไฟล์ ด้านล่างนี้ไว้ใช้งาน
jquery.datetimepicker.css
jquery.datetimepicker.js
 
ตัวอย่าง
 
 

From 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 &nbsp;&nbsp;
      <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>

Tags:: datetimepicker



เนื่องจากตัวอย่างด้านบน ใช้ datetimepicker เวอร์ชั่นรุ่นก่อน ทำให้ไม่สามารถนำไปใช้
งานกับเวอร์ชั่นปัจจุบันได้ ให้เข้าไปโหลดไฟล์ css และ js ของ datetimepicker ได้ที่
 
http://www.ninenik.com/demo/datetimepicker_th.php
 
จากนั้นปรับโค้ดใหม่ เล็กน้อย ประมาณด้านล่างนี้
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="js/jquery.datetimepicker.min.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 &nbsp;&nbsp;
      <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.full.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;
            maxTimeSet = false;
        }
        
        if($(obj).attr("id")=="startTime"){
            this.setOptions({
                defaultDate:minDateSet?minDateSet:false,
                minTime:false,
                maxTime:maxTimeSet?maxTimeSet:false        
            })                   
        }
        if($(obj).attr("id")=="endTime"){
            this.setOptions({
                defaultDate:maxDateSet?maxDateSet: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>



URL สำหรับอ้างอิง