ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทาง สำหรับการนำ 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>
