  | 
              
	              
	                
  
    
	 
        datepicker สามารถกำหนดวันที่เลือกไม่ได้ไหมครับหามานานแล้ว     | 
   
  
    |   | 
   
 
 
 
              
  
          
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                 กำหนดใน datepicker น่าจะยาก แต่เขียนเป็นเงื่อนไขใน Javascript เอาไว้เช็คค่าจะง่ายกว่า 
ถ้าตรงกับที่กำหนดเอาไว้ ก็ให้เคลียค่าทิ้งไป ประมาณนี้                        
               
               | 
             
            
              
			                              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2013-04-21 15:51:53 | 
                        By :
                            mangkunzo | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
               
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                 หมายถึงยังไงช่วยอธิบายด้วยครับผม ขอบคุณครับ                        
               
               | 
             
            
              
			                              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2013-04-21 16:04:48 | 
                        By :
                            popfanta | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
               
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                 ใช้ปลั๊กอินของอะไรอยุอ่าครับ เจ้า datepicker ของคุณเนี่ย?                        
               
               | 
             
            
              
			                              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2013-04-21 16:24:23 | 
                        By :
                            itpcc | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
               
		
     
		
	     
	    
     
               
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                 เห็นว่าเป็นคำถามที่น่าสนใจผมจึงลองค้นหาดูในเว็บ jqueryui.com 
ปรากฏว่าสามารถทำได้ครับ 
ตามลิงก์นี้ http://api.jqueryui.com/datepicker/#option-beforeShowDay 
 
jQuery Datepicker มี option ที่จะบอก Datepicker ว่า 
วันที่ใดที่จะแสดงหรือไม่แสดง และจะแสดงในรูปแบบไหน 
โดยกำหนดฟังก์ชั่นให้กับ option ชื่อ beforeShowDay ตอนสร้าง Datepicker 
 
รูปแบบ 
$("#datepicker").datepicker({
	beforeShowDay: callback // callback คือฟังก์ชั่นที่เรากำหนดเอง
});
 
 
Datepicker จะเรียกใช้ฟังก์ชั่นดังกล่าว 
โดยส่ง Date object ของวันที่นั้นๆ ไปเป็น argument แรก 
ก่อนที่จะแสดงแต่ละวันที่ของเดือนในรูปแบบปฏิทิน 
เช่น เดือนที่มี 30 วัน ฟังชั่นดังกล่าวก็จะถูกเรียกใช้ 30 ครั้ง 
 
ซึ่งฟังก์ชั่นดังกล่าวจะต้องคืนค่ากลับมาเป็น Array ที่มีสมาชิกดังต่อไปนี้ 
[0] เป็นชนิด Boolean ที่จะบอกว่า วันที่นั้นๆ สามารถเลือกได้หรือไม่ (true เลือกได้ false เลือกไม่ได้) 
[1] เป็นชนิดสตริง ชื่อคลาส CSS ที่จะใช้กับวันที่นั้นๆ ("" สำหรับ default) 
[2] เป็นชนิดสตริง tooltip ของวันที่นั้นๆ 
 
ดังนั้นเราจะประกาศฟังก์ชั่นได้ประมาณนี้ 
 
เลือกได้ทุกวันที่ 
function allSelectable(date) {
	return [true, "", ""];
}
$("#datepicker").datepicker({
	beforeShowDay: allSelectable
});
 
 
ทำให้เลือกวันที่ใดไม่ได้เลยและกำหนดคลาส small-date ให้กับทุกๆ วันที่ 
function noneSelectable(date) {
	return [false, "small-date", ""];
}
$("#datepicker").datepicker({
	beforeShowDay: noneSelectable
});
  
 
เลือกได้ทุกวันแต่เพิ่ม tooltip เข้าไปด้วย 
function dayWithTooltip(date) {
	return [true, "", date.toString()];
}
$("#datepicker").datepicker({
	beforeShowDay: dayWithTooltip
});
  
 
เลือกวันหยุดไม่ได้ 
function noWeekends(date) {
	var day = date.getDay();
	// ถ้าวันเป็นวันอาทิตย์ (0) หรือวันเสาร์ (6)
	if (day === 0 || day === 6) {
		// เลือกไม่ได้
		return [false, "", "วันนี้เป็นวันหยุด"];
	}
	// เลือกได้ตามปกติ
	return [true, "", ""];
}
$("#datepicker").datepicker({
	beforeShowDay: noWeekends
});
  
 
กำหนดวันที่ที่ไม่สามารถเลือกได้ 
var invalidDate = [
	new Date("2013-04-30").toDateString(),
	new Date("2013-05-02").toDateString()
];
function beforeShowDay(date) {
	// ถ้าแปลง date เป็นสตริงของวันที่ด้วย toDateString() แล้ว
	// เท่ากับค่าที่อยู่ใน Array invalidDate
	if (invalidDate.indexOf(date.toDateString()) !== -1) {
		// เลือกไม่ได้
		return [false, "", "วันนี้ห้ามเลือก"];
	}
	// เลือกได้ตามปกติ
	return [true, "", ""];
}
$("#datepicker").datepicker({
	beforeShowDay: beforeShowDay
});
  
 
ตัวอย่างการใช้ร่วมกับ PHP+MySQL 
<script>
<?php
// สมมติว่าอ่านข้อมูลมาจากตาราง
$result = mysql_query("SELECT * FROM `table`");
// สร้าง array ที่จะเก็บค่าวันที่ที่เลือกไม่ได้
$invalid_date = array();
while (($row = mysql_fetch_array($result))) {
	// เอาเฉพาะส่วนวันที่ เช่น 2013-04-22
	$date_part = substr($row['date_field'], 0, 10);
	// แยกส่วนวันที่ด้วยเครื่องหมาย -
	// โดยให้เดือน และวัน ไปอยู่ในตัวแปร $month และ $day
	list(, $month, $day) = explode('-', $date_part);
	// เพิ่มวันที่เข้าไป โดยแปลงเลขที่มี 0 นำหน้า ให้กลับเป็นเลขปกติด้วย (int)
	// เช่น '04' จะกลายเป็น 4
	$invalid_date[] = (int)$month . '-' . (int)$day;
}
mysql_free_result($result);
?>
// แปลง $invalid_date ให้เป็น JSON
// เช่น $invalid_date = array('4-22');
// ก็จะได้ JSON ["4-22"]
var invalidDate = <?php echo json_encode($invalid_date); ?>;
function beforeShowDay(date) {
	// ทำวันที่ที่ Datepicker ส่งมา ให้อยู่ในรูปแบบเดียวกันกับที่ส่งออกมาจาก PHP
	var searchDate = date.getMonth() + '-' + date.getDay();
	// indexOf() จะให้ค่า -1 หากไม่มีค่าที่ตรวจสอบอยู่ใน Array
	if (invalidDate.indexOf(searchDate) === -1) {
		// บอก Datepicker ว่า วันที่นี้สามารถเลือกได้
		return [true, "", ""];
	}
	// นอกนั้นเลือกไม่ได้ เพราะเป็นวันที่ที่มีอยู่ใน Array invalidDate
	return [false, "", ""];
}
$("#datepicker").datepicker({
	beforeShowDay: beforeShowDay
});
</script>
                        
               
               | 
             
            
              
			                
  ประวัติการแก้ไข 2013-04-22 07:10:30 2013-04-22 07:11:32 2013-04-22 10:06:34              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2013-04-21 20:59:40 | 
                        By :
                            cookiephp | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
               
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                 เขียนเป็นบทความไว้แล้วนะครับ รอ approve                        
               
               | 
             
            
              
			                              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2013-04-22 09:28:10 | 
                        By :
                            cookiephp | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
               
		
     
		
	     
	    
     
               
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                   
 
jQuery UI Datepicker ปฏิทินวันที่ Calendar เลือกลงใน Textbox เลือกได้ทั้ง Date/Time 
                        
               
               | 
             
            
              
			  			  
			                              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2014-02-03 22:05:04 | 
                        By :
                            mr.win | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
      		  
	
     | 
   
 
                 |