- css/datepicker.css
- js/bootstrap-datepicker.js
ภาพตัวอย่างการใช้งาน ตัวอย่าง 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 คืออะไร??