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

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
M004
PHP VIP Members
PHP VIP Members
โพสต์: 1323
ลงทะเบียนเมื่อ: 01/01/1970 7:00 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย M004 »

สำหรับ การใช้งาน Datepicker เริ่มจาก Download โดยไฟล์ที่เกี่ยวข้องมีดังนี้
- css/datepicker.css
- js/bootstrap-datepicker.js

ภาพตัวอย่างการใช้งาน
ex1.png
ex1.png (14.93 KiB) Viewed 5086 times
ex2.png
ex2.png (14.33 KiB) Viewed 5086 times
ex3.png
ex3.png (2.86 KiB) Viewed 5086 times
ex5.png
ex5.png (8.7 KiB) Viewed 5086 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 คืออะไร??
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 30