แนวทาง ประยุกต์ กำหนด event ให้กับ jQuery UI datepicker

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
jquery ui datepicker jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery ui datepicker jquery

ดูแล้ว 15,532 ครั้ง


ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทาง สำหรับการนำ jQuery UI datepicker ไปใช้งานแบบ inline ร่วมกับ
ปฏิทินกิจกรรม หรืออื่นๆ โดยเป็นไปในลักษณะ แสดงให้เห็นว่าวันที่ใด ใน jQuery UI datepicker ที่มีกิจกรรม
โดยในตัวอย่าง กำหนดเป็นการแสดงขีดเส้นใต้ เมื่อในวันนั้นมีกิจกรรม หรือเงื่อนไขเหตูการณ์ ที่เรากำหนด

ซึ่งวันที่ ที่กำหนดในที่นี้ใช้เป็น json ไฟล์ โดยกำหนดแบบตายตัว เพื่อให้ทดสอบ สามารถประยุกต์ใช้กับฐานข้อมูล
ตามลิ้งค์
https://www.ninenik.com/การสร้าง_json_ไฟล์_จากฐานข้อมูล_ด้วย_php_และการใช้งานด้วย_jQuery_getJSON()-373.html

อย่างไรก็ตาม เนื้อหาในส่วนนี้ ต้องอาศัยความรู้ของผู้นำไปใช้ประกอบด้วย เนื่องจากเป็นรูปแบบการทำงานที่ซับซ้อน
ต้องอาศัยความเข้าใจพอสมควร

เนื้อหาในส่วนนี้ ได้ไอเดีย มาจากคำถามในเว็บบอร์ด อาจจะเป็นประโยชน์กับคนอื่นๆ ที่สนใจ
แนะนำ หรือถามปัญหาเพิ่มเติมได้ที่เว็บบอร์ด

ตัวอย่าง แสดงบทความ ของ www.ninenik.com แต่ละเดือน หรือวันที่ที่เลือก


วิธีการ
1.สร้าง date_jsondata.php json ไฟล์ ในที่นี้กำหนดแบบตายตัว สามารถประยุกต์ใช้กับฐานข้อมูล ตามหัวข้อ
https://www.ninenik.com/การสร้าง_json_ไฟล์_จากฐานข้อมูล_ด้วย_php_และการใช้งานด้วย_jQuery_getJSON()-373.html

<?php
header("Content-type:application/json; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);  
?>
<?php
// กำหนดในกรณีทดสอบ เมื่อมีการเปลี่ยนเดือน ให้แสดงวันที่ ที่มีกิจกรรม
if($_GET['dateSelect']=="2010-11"){
	$dateEvent[]=array(
		"day"=>"5"
	);
	$dateEvent[]=array(
		"day"=>"10"
	);
}
//กำหนดในกรณีทดสอบ เมื่อมีการเปลี่ยนเดือน ให้แสดงวันที่ ที่มีกิจกรรม 
if($_GET['dateSelect']=="2010-12"){
	$dateEvent[]=array(
		"day"=>"11"
	);
	$dateEvent[]=array(
		"day"=>"12"
	);
	$dateEvent[]=array(
		"day"=>"13"
	);
}
// กรณีประยุกต์ใช้กับฐานข้อมูล
//	if($_GET['dateSelect']==""){
//		$q="SELECT day FROM tbl_event WHERE event_date like '".$_GET['dateSelect']."%' ";
//		$qr=mysql_query($q);
//		while($rs=mysql_fetch_array($qr)){
//			$dateEvent[]=array(
//				"day"=>date("j",strtotime($rs['day']))
//			);
//		}
//	}
	
echo json_encode($dateEvent);
?>


2.สร้างไฟล์สำหรับทดสอบการใช้งาน jquery_ui_datepicker_link.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>add link to jquery ui link</title>
<style type="text/css">
*{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
}
</style>
<?php
$jquery_ui_v="1.8.5";
$theme=array(
	"0"=>"base",
	"1"=>"black-tie",
	"2"=>"blitzer",
	"3"=>"cupertino",
	"4"=>"dark-hive",
	"5"=>"dot-luv",
	"6"=>"eggplant",
	"7"=>"excite-bike",
	"8"=>"flick",
	"9"=>"hot-sneaks",
	"10"=>"humanity",
	"11"=>"le-frog",
	"12"=>"mint-choc",
	"13"=>"overcast",
	"14"=>"pepper-grinder",
	"15"=>"redmond",
	"16"=>"smoothness",
	"17"=>"south-street",
	"18"=>"start",
	"19"=>"sunny",
	"20"=>"swanky-purse",
	"21"=>"trontastic",
	"22"=>"ui-darkness",
	"23"=>"ui-lightness",
	"24"=>"vader"
);
$jquery_ui_theme=$theme[8];
?>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />
<style type="text/css">  
.ui-datepicker{  
/*    width:150px;  */
    font-family:tahoma;  
    font-size:11px;  
    text-align:center;  
}  
</style>
</head>

<body>

<div id="datepicker"></div><br />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
var makeEvent;
makeEvent=function(){	
	arguments[1]+=1;
	arguments[1]=(arguments[1]<10)?"0"+arguments[1]:arguments[1];
	var setDateSelect=arguments[0]+"-"+arguments[1];
	$.getJSON("date_jsondata.php",{dateSelect:setDateSelect},function(data){
		$.each(data,function(i,k){
			var dayVal=parseInt(data[i].day)-1;
			$("a.ui-state-default").eq(dayVal).css("text-decoration","underline"); // ขีดเส้นใตัวันที่มีกิจกรรม
		});			
	});
}
$(function(){
	
	$( "#datepicker" ).datepicker({
		dateFormat: 'yy-mm-dd', // กำหนดรูปแบบวันที่ ที่ใช้เป็น 0000-00-00
		onChangeMonthYear:function(year, month){
			makeEvent(year,month-1);	
		},
		onSelect:function(dateText){
			var dateSplit=dateText.split("-");
			makeEvent(dateSplit[0],dateSplit[1]-1);	
			// กำหนด event เมื่อมีการคลิกลิ้งค์ เลือกวันที่ ตามต้องการ		
		}
	});	

	// กำหนดค่าเริ่มต้น แสดงข้อมูลเดือนปัจจุบัน
	var d=new Date();
	makeEvent(d.getFullYear(),d.getMonth());


});
</script>

</body>
</html>

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ