โดย M004 » 26/02/2014 5:57 pm
สำหรับ การใช้งาน Datepicker เริ่มจาก
Download โดยไฟล์ที่เกี่ยวข้องมีดังนี้
- css/datepicker.css
- js/bootstrap-datepicker.js
ภาพตัวอย่างการใช้งาน
- ex1.png (14.93 KiB) Viewed 5116 times
- ex2.png (14.33 KiB) Viewed 5116 times
- ex3.png (2.86 KiB) Viewed 5116 times
- ex5.png (8.7 KiB) Viewed 5116 times
ตัวอย่าง Code
โค้ด: เลือกทั้งหมด
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
โค้ด: เลือกทั้งหมด
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
อ้างอิงจาก
http://www.eyecon.ro/bootstrap-datepicker/
ศึกษาการใช้งาน Bootstrap เพิ่มเติมได้ที่
-
Booststap Knowledge
-
การใช้งาน Bootstrap เบื้องต้น
-
Bootstrap Menu Responsive ย่อเมนูตาม ขนาดหน้าจอ
-
Typeahead ทำ Autocomplete บน Booststap
-
การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap
-
Auto Fill ข้อมูลด้วย Ajax บน Booststap
-
bootstrap คืออะไร??
สำหรับ การใช้งาน Datepicker เริ่มจาก [url=http://www.eyecon.ro/bootstrap-datepicker/datepicker.zip]Download[/url] โดยไฟล์ที่เกี่ยวข้องมีดังนี้
- css/datepicker.css
- js/bootstrap-datepicker.js
[b]ภาพตัวอย่างการใช้งาน[/b]
[attachment=3]ex1.png[/attachment]
[attachment=2]ex2.png[/attachment]
[attachment=1]ex3.png[/attachment]
[attachment=0]ex5.png[/attachment]
[b]ตัวอย่าง Code[/b]
[code] <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>[/code]
[code] var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');[/code]
[b]อ้างอิงจาก[/b]
http://www.eyecon.ro/bootstrap-datepicker/
[b]ศึกษาการใช้งาน Bootstrap เพิ่มเติมได้ที่[/b]
- [url=https://www.mindphp.com/forums/viewforum.php?f=76]Booststap Knowledge[/url]
- [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=17095]การใช้งาน Bootstrap เบื้องต้น[/url]
- [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=18819]Bootstrap Menu Responsive ย่อเมนูตาม ขนาดหน้าจอ[/url]
- [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=18655]Typeahead ทำ Autocomplete บน Booststap[/url]
- [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=18716]การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap[/url]
- [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=18731]Auto Fill ข้อมูลด้วย Ajax บน Booststap[/url]
- [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=18447]bootstrap คืออะไร??[/url]