Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > ทำอย่างไรให้ jQuery DateTimePicker เลือกวันเข้า แต่เลือกวันออกหรือไม่เลือกวันออกก็ได้



 

ทำอย่างไรให้ jQuery DateTimePicker เลือกวันเข้า แต่เลือกวันออกหรือไม่เลือกวันออกก็ได้

 



Topic : 127133



โพสกระทู้ ( 0 )
บทความ ( 0 )



สถานะออฟไลน์




ผมจะทำระบบจองหอพัก เลือกวันเข้า แต่เลือกวันออกหรือไม่เลือกวันออกก็ได้ มันสามารถเลือกวันออกเป็น infinity ได้ไหมครับ ควรทำอย่างไรครับ

ตอนนี้ผมศึกษาจากบทความนี้อยู่ครับ

https://www.thaicreate.com/community/jquery-datepicker.html

ขอบคุณครับ



Tag : PHP, HTML/CSS, JavaScript, jQuery









ประวัติการแก้ไข
2017-04-08 21:33:03
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2017-04-08 12:35:29 By : aRtvv0rK View : 1246 Reply : 4
 

 

No. 1

Guest


เอาโค้ดมาดูครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-08 19:18:00 By : deawx
 


 

No. 2



โพสกระทู้ ( 0 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : deawx เมื่อวันที่ 2017-04-08 19:18:00
รายละเอียดของการตอบ ::
Code (JavaScript)
<html>
<head>
    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/jquery.datetimepicker.css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				
	</head>
  
  <body>
    <br>
      <div class="container">
    <div class="row">
        <div class="col-md=12">
<nav class="navbar navbar-default ">
  <div class="container-fluid">
  
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        
       
        <div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">วันที่เข้า</span>
  <input name="checkin" id="startDate" type="text" class="form-control" value="<?php date_default_timezone_set('Asia/Bangkok'); $da = date("d-m-Y"); echo $da ; ?>" aria-describedby="sizing-addon2" required >
</div>
            
        <div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">เวลาเข้า</span>
  <input name="timein" id="startTime" type="text" class="form-control" value="<?php 	
	date_default_timezone_set('Asia/Bangkok'); $Ti = date("08:00"); echo $Ti ; ?>" aria-describedby="sizing-addon2" required >
</div>     
            
        <div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">วันที่ออก</span>
  <input name="checkout" id="endDate" type="text" class="form-control" value="ไม่มีกำหนด"  aria-describedby="sizing-addon2" required >
</div>
        <div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">เวลาออก</span>
  <input name="timeout" id="endTime" type="text" class="form-control" value="ไม่มีกำหนด"  aria-describedby="sizing-addon2" required >
</div>    
            
    
     </div></div></nav></div></div></div>
  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  
    <script src="js/bootstrap.min.js"></script> 
        
<script src="js/jquery.datetimepicker.full.js"></script>
<script type="text/javascript">   
$(function(){
     $.datetimepicker.setLocale('th'); // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.
 
    var optsDate = {  
        format:'d-m-Y', // รูปแบบวันที่ 
        formatDate:'d-m-Y',
        lang:'th',
        timepicker:false,   
        inline:false,
        closeOnDateSelect:true,
       
    } 
    var optsTime = {
        format:'H:i', // รูปแบบเวลา
        step:30,  // step เวลาของนาที แสดงค่าทุก 30 นาที 
     
       
        sideBySide: true,
        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:maxDateSet?maxDateSet:false,
                maxDate: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({
                
                minTime:false,
                
            })                   
        }
        if($(obj).attr("id")=="endTime"){
            this.setOptions({
                
                maxTime:false,
                
            })                   
        }
    }    
     

    
    
    $("#startDate,#endDate").datetimepicker($.extend(optsDate,{  
        onShow:setDateFunc,
        onSelectDate:setDateFunc,
         timepicker:false,
        format:'d-m-Y',  // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000			
        lang:'th',  // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.

    }));
     


      
     $("#startTime,#endTime").datetimepicker($.extend(optsTime,{  
        onShow:setTimeFunc,
        onSelectTime:setTimeFunc,
    }));    
});
    
    
    
   


	var datepicked = function() {
	var start = $('#start');
	var from = $('#from');
	var to = $('#to');
	var days = $('#days');
   
	var fromDate = from.datepicker('getDate')
	var toDate = to.datepicker('getDate')
	
	if (toDate && fromDate) {
		if (toDate.getTime() < fromDate.getTime()) {
		alert('เลือก วันที่! ไม่ถูกต้อง กรุณาเลือกวันที่ให้ถูกต้อง');
		document.getElementById("toDate").value == "";
	}
}
	if (toDate && fromDate) {
		var difference = 0;
		var oneDay = 86400000; //ms per day
		var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay + 1);
		days.val(difference)
	}
}

$(function() {
		var d = new Date();
		var toDay = d.getDate() + '/' + (d.getMonth() + 1) + '/' + (d.getFullYear() + 543);
	$('#from, #to,#start').datepicker({
		changeYear: true,
		changeMonth: true,
		yearRange: '1910:2100',
		dateFormat: 'dd/mm/yy',
		isBuddhist: true,
		defaultDate: toDay,
		dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],
		dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
		monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
	monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'],
	minDate: '0', //ไม่สามารถเลือกวันที่ย้อนหลังได้
	onSelect: datepicked
	});
});


    
</script>  

      
     </body></html>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-08 21:46:52 By : aRtvv0rK
 

 

No. 3



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ไป if ที่ php เอาครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-09 06:08:10 By : mr.win
 


 

No. 4



โพสกระทู้ ( 0 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : mr.win เมื่อวันที่ 2017-04-09 06:08:10
รายละเอียดของการตอบ ::
ทำไงให้มัน infinity ครับ ช่วยทีผมงูๆปลาจริงๆครับ



ประวัติการแก้ไข
2017-04-09 09:36:46
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-09 09:35:28 By : aRtvv0rK
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ทำอย่างไรให้ jQuery DateTimePicker เลือกวันเข้า แต่เลือกวันออกหรือไม่เลือกวันออกก็ได้
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่