|
การทำให้ jQuery Datepicker สามารถกำหนดวันที่ที่เลือกไม่ได้ |
การทำให้ jQuery Datepicker สามารถกำหนดวันที่ที่เลือกไม่ได้ ตามลิงก์นี้ 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 ครั้ง
ซึ่งฟังก์ชั่นดังกล่าวจะ[b]ต้องคืนค่ากลับมาเป็น Array ที่มีสมาชิกดังต่อไปนี้[/b]
[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>
|
|
|
|
|
|
|
|
By : |
phpinfo()
|
|
Article : |
บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ |
|
Score Rating : |
|
|
Create Date : |
2013-04-21 |
|
Download : |
No files |
|
Sponsored Links |
|
|
|
|
|
|