Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > datepicker สามารถกำหนดวันที่เลือกไม่ได้ไหมครับหามานานแล้ว



 

datepicker สามารถกำหนดวันที่เลือกไม่ได้ไหมครับหามานานแล้ว

 



Topic : 094004



โพสกระทู้ ( 56 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



datepicker สามารถกำหนดวันที่เลือกไม่ได้ไหมครับ
เช่นผมจะให้ 2013-04-30 กับ 2013-05-02 ให้เลือกไม่ได้อะครับ



Tag : PHP, JavaScript, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2013-04-21 15:33:40 By : popfanta View : 4007 Reply : 8
 

 

No. 1



โพสกระทู้ ( 3,847 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Twitter Facebook

กำหนดใน datepicker น่าจะยาก แต่เขียนเป็นเงื่อนไขใน Javascript เอาไว้เช็คค่าจะง่ายกว่า
ถ้าตรงกับที่กำหนดเอาไว้ ก็ให้เคลียค่าทิ้งไป ประมาณนี้






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-21 15:51:53 By : mangkunzo
 


 

No. 2



โพสกระทู้ ( 56 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

หมายถึงยังไงช่วยอธิบายด้วยครับผม ขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-21 16:04:48 By : popfanta
 

 

No. 3



โพสกระทู้ ( 1,569 )
บทความ ( 2 )



สถานะออฟไลน์
Twitter Facebook Blogger

ใช้ปลั๊กอินของอะไรอยุอ่าครับ เจ้า datepicker ของคุณเนี่ย?
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-21 16:24:23 By : itpcc
 


 

No. 4



โพสกระทู้ ( 3,847 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Twitter Facebook

ตอบความคิดเห็นที่ : 2 เขียนโดย : popfanta เมื่อวันที่ 2013-04-21 16:04:48
รายละเอียดของการตอบ ::
ผมได้อธิบายไปแล้วครับ เว้นเสียแต่ว่าคุณจะไม่เข้าใจ

ลองรัน Code นี้ดูครับ(PHP)
<meta charset="utf-8">
<script>
function validate_val()
{
    var chkinput = document.getElementById('date_input');
    
    if(chkinput.value != ''){
        if(chkinput.value=='2013-04-21'){            
            chkinput.value='';
        alert(chkinput.value +'invalid value');
        }
    }
}
</script>
<p><input type="text" id="date_input" name="date_input" onmouseout="validate_val()"> 
ลองใส่ค่า 2013-04-21 ดูครับ</p>




ประวัติการแก้ไข
2013-04-21 17:05:02
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-21 16:58:50 By : mangkunzo
 


 

No. 5



โพสกระทู้ ( 1,819 )
บทความ ( 20 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Facebook

เห็นว่าเป็นคำถามที่น่าสนใจผมจึงลองค้นหาดูในเว็บ 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
});
เพิ่ม tooltip

เลือกวันหยุดไม่ได้
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
 


 

No. 6



โพสกระทู้ ( 1,819 )
บทความ ( 20 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Facebook

เขียนเป็นบทความไว้แล้วนะครับ รอ approve
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-22 09:28:10 By : cookiephp
 


 

No. 7

Guest


ตอบความคิดเห็นที่ : 6 เขียนโดย : cookiephp เมื่อวันที่ 2013-04-22 09:28:10
รายละเอียดของการตอบ ::
ขอบคุณสำหรับความรู้นี้ด้วยครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-22 13:25:09 By : WiTT
 


 

No. 8



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook



jQuery UI Datepicker ปฏิทินวันที่ Calendar เลือกลงใน Textbox เลือกได้ทั้ง Date/Time

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-02-03 22:05:04 By : mr.win
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : datepicker สามารถกำหนดวันที่เลือกไม่ได้ไหมครับหามานานแล้ว
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่