การใช้ปฏิทิน(DataTimePicker)สำหรับ Bootstrap นั้น มี script หลากหลายรูปแบบมาก แต่ที่สามารถใช้งานได้ง่ายและสะดวก ทดลองใช้แล้ว work มาก คือเป็นของ Thiago de Arruda โดยสามารถดูได้ที่ http://tarruda.github.io/bootstrap-datetimepicker/ มีคำอธิบายวิธีการใช้โดยละเอียด
ตัวอย่างการใช้งาน
ส่วน Obj.ของ Form
<div class='input-group date' id='birth_date' >
<input data-format="DD/MM/YYYY" type='text' size="10"
name="birthdate" class="form-control" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
ส่วนของ JS
<script type="text/javascript">
$(function () {
$('#birth_date').datetimepicker({
pickTime: false,
maskInput: true, //ทำให้ไม่แสดง keyboard .ใน smartphone
language: 'en',
pick12HourFormat: true,
startDate: -Infinity, // set a minimum date
endDate: Infinity // set a maximu
});
}
หมายเหตุ : สำหรับ วัน เดือน ภาษาไทย ให้แก้ไขจากไฟล์ moment.js