|
 |
|
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 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 00
|