หน้า 1 จากทั้งหมด 1

ตัวอย่างการใช้งาน ปฎิทินบน Bootstrap (Datepicker for Bootstrap)

โพสต์แล้ว: 26/02/2014 5:57 pm
โดย M004
สำหรับ การใช้งาน Datepicker เริ่มจาก Download โดยไฟล์ที่เกี่ยวข้องมีดังนี้
- css/datepicker.css
- js/bootstrap-datepicker.js

ภาพตัวอย่างการใช้งาน
ex1.png
ex1.png (14.93 KiB) Viewed 5090 times
ex2.png
ex2.png (14.33 KiB) Viewed 5090 times
ex3.png
ex3.png (2.86 KiB) Viewed 5090 times
ex5.png
ex5.png (8.7 KiB) Viewed 5090 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 คืออะไร??

Re: ตัวอย่างการใช้งาน ปฎิทินบน Bootstrap (Datepicker for Bootstrap)

โพสต์แล้ว: 12/06/2014 6:19 pm
โดย thatsawan