|
 |
|
สอบถามเรื่อง jQuery UI Datepicker อยากทำให้ Start Date ไม่สามารถเลือกวันที่ย้อนหลังได้ |
|
 |
|
|
 |
 |
|
Code (JavaScript)
<script type="text/javascript">
$(function(){
var startDateTextBox = $('#dateStart');
var endDateTextBox = $('#dateEnd');
startDateTextBox.datepicker({
dateFormat: 'dd-M-yy',
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datetimepicker('setDate', testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
}
});
endDateTextBox.datepicker({
dateFormat: 'dd-M-yy',
onClose: function(dateText, inst) {
if (startDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datetimepicker('setDate', testEndDate);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
}
});
});
</script>
Start Date : <input type="text" name="dateStart" id="dateStart" value="" />
End Date : <input type="text" name="dateEnd" id="dateEnd" value="" />
จากโค้ดนะครับ เอามาจาก https://www.thaicreate.com/community/jquery-datepicker.html
มันคือการสร้าง Datepicker โดยกำหนด Start Date และ End Date ซึ่ง End Date จะไม่สามารถเลือกย้อนหลังได้
ถ้าผมอยากทำให้ Start Date ไม่สามารถเลือกวันที่ย้อนหลังได้ ให้เป็นวันปัจจุบัน - อนาคต จะต้องแก้ตรงไหนครับ
Tag : PHP

|
ประวัติการแก้ไข 2014-12-03 17:08:00 2014-12-03 17:09:09 2014-12-03 17:09:27 2014-12-03 17:10:03
|
 |
 |
 |
 |
Date :
2014-12-03 17:07:15 |
By :
por-jr |
View :
1833 |
Reply :
5 |
|
 |
 |
 |
 |
|
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ไม่แน่ใจนะว่ามี เมธอดเซตพวกนี้หรือเปล่า
แต่มีอีกวิธีคือเช็คเวลาตอนซับมิตฟอร์มครับ ดึงค่าเวลาจากสองอันมาคำนวณเอา
อ๋อ เห็นละ มี onSelect() ตัวนี้แหละคับ
ลองหาอ่านในเอกสารของ datepicker ดูครับ โอเวไรด์เมธอด ให้คำนวณตามต้องการ
โทษทีอ่านคำถามไม่ครบ
Code (JavaScript)
ถ้าผมอยากทำให้ Start Date ไม่สามารถเลือกวันที่ย้อนหลังได้ ให้เป็นวันปัจจุบัน - อนาคต จะต้องแก้ตรงไหนครับ
สามารถเซตได้ตั้งแต่แรกเลยคับ เพิ่ม property
minDate: "dateToday"
ค่าตัวนี้ใส่เป็นตัวเลขก็ได้มั้ง ลองเทสดูครับ ตั้งแต่ 0 อาจจะเป็นวันปัจจุบัน ลองใส่เลขติดลบดู
|
ประวัติการแก้ไข 2014-12-03 20:40:58 2014-12-03 20:43:25 2014-12-03 20:48:02 2014-12-03 20:49:07 2014-12-03 20:50:01
 |
 |
 |
 |
Date :
2014-12-03 20:39:06 |
By :
pjgunner.com |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ก็ให้กำหนด option minDate ไว้ตั้งแต่ตอนสร้าง datepicker ครับ
Code (JavaScript)
startDateTextBox.datepicker({
dateFormat: 'dd-M-yy',
minDate: new Date(), // วันที่ปัจจุบัน
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datetimepicker('setDate', testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
// เอาตรงนี้ออกไป เพราะกำหนด minDate ตั้งแต่ตอนสร้าง datepicker แล้ว
//onSelect: function (selectedDateTime){
//endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
//}
});
|
 |
 |
 |
 |
Date :
2014-12-03 20:48:04 |
By :
phpinfo() |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ได้แล้วครับ ใส่ minDate: 0, ใต้ dateFormat: 'dd-M-yy',
startDateTextBox.datepicker({
dateFormat: 'dd-M-yy',
minDate: 0,
|
 |
 |
 |
 |
Date :
2014-12-03 23:25:01 |
By :
por-jr |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|

|
 |
 |
 |
 |
Date :
2014-12-04 08:56:18 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 02
|