แนวทาง ประยุกต์ กำหนด event ให้กับ jQuery UI datepicker
05 November 2010ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทาง สำหรับการนำ jQuery UI datepicker ไปใช้งานแบบ inline ร่วมกับ
ปฏิทินกิจกรรม หรืออื่นๆ โดยเป็นไปในลักษณะ แสดงให้เห็นว่าวันที่ใด ใน jQuery UI datepicker ที่มีกิจกรรม
โดยในตัวอย่าง กำหนดเป็นการแสดงขีดเส้นใต้ เมื่อในวันนั้นมีกิจกรรม หรือเงื่อนไขเหตูการณ์ ที่เรากำหนด
ซึ่งวันที่ ที่กำหนดในที่นี้ใช้เป็น json ไฟล์ โดยกำหนดแบบตายตัว เพื่อให้ทดสอบ สามารถประยุกต์ใช้กับฐานข้อมูล
ตามลิ้งค์
http://www.ninenik.com/การสร้าง_json_ไฟล์_จากฐานข้อมูล_ด้วย_php_และการใช้งานด้วย_jQuery_getJSON()-373.html
อย่างไรก็ตาม เนื้อหาในส่วนนี้ ต้องอาศัยความรู้ของผู้นำไปใช้ประกอบด้วย เนื่องจากเป็นรูปแบบการทำงานที่ซับซ้อน
ต้องอาศัยความเข้าใจพอสมควร
เนื้อหาในส่วนนี้ ได้ไอเดีย มาจากคำถามในเว็บบอร์ด อาจจะเป็นประโยชน์กับคนอื่นๆ ที่สนใจ
แนะนำ หรือถามปัญหาเพิ่มเติมได้ที่เว็บบอร์ด
ตัวอย่าง แสดงบทความ ของ www.ninenik.com แต่ละเดือน หรือวันที่ที่เลือก
วิธีการ
1.สร้าง date_jsondata.php json ไฟล์ ในที่นี้กำหนดแบบตายตัว สามารถประยุกต์ใช้กับฐานข้อมูล ตามหัวข้อ
http://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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
17 Oct 08 แสดงตัวอย่างรูป ก่อน upload image preview berfore upload อ่าน 10654 25 Sep 08 Javascript กับเทคนิค Mouseover และ Mouseout อ่าน 5507 18 Aug 10 ใช้ php ดึงรูปภาพ จากโฟลเดอร์ มาแสดง พร้อม เทคนิค แบ่งหน้า อ่าน 6458 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 5004 27 Mar 10 ทำให้ เลือก list box แล้วแสดง checkbox ด้วย jQuery อ่าน 5371 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 5349 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 7706 02 Oct 10 สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย อ่าน 3206 26 Oct 08 แสดง popup window ตรงกลาง อ่าน 12387 15 Sep 10 สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ อ่าน 5166 09 Apr 10 สร้าง countdown นับเวลา ถอยหลัง ด้วย javascript อ่าน 5973 03 Nov 08 เปิด popup แล้วให้แสดงแบบ maximize อ่าน 5293 23 Aug 10 Integrate ใช้ Filemanager ของ FCKeditor กับ CKEditor แทน CKFinder อ่าน 2778 18 Sep 10 ดึงข้อมูล จากฐานข้อมูล สร้าง รายการเครือข่าย แบบ tree ด้วย php อ่าน 3332 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 5386 28 Oct 08 ดึงข้อมูลจาก text ไฟล์มาแสดงด้วย ajax อ่าน 5918 17 Mar 09 สร้างฟังก์ชันลบเวลาด้วย php อย่างง่าย อ่าน 2527 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2806 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 5945 13 Mar 09 สร้างฟังก์ชัน กรอกข้อความได้เฉพาะภาษาไทยด้วย javascript อ่าน 4370