คอมพิวเตอร์และอินเตอร์เน็ต,บรรยายวิชาการ,วิจัย,ศึกษากุรอาน,E-Book

วันพุธที่ 25 มิถุนายน พ.ศ. 2557

DateTimePicker ใน BootStrap



                  การใช้ปฏิทิน(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