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

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

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

User avatar
M004
PHP VIP Members
PHP VIP Members
Posts: 1323
Joined: 01/01/1970 7:00 am

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

Post by M004 » 26/02/2014 5:57 pm

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

ภาพตัวอย่างการใช้งาน
ex1.png
ex1.png (14.93 KiB) Viewed 2049 times
ex2.png
ex2.png (14.33 KiB) Viewed 2049 times
ex3.png
ex3.png (2.86 KiB) Viewed 2049 times
ex5.png
ex5.png (8.7 KiB) Viewed 2049 times
ตัวอย่าง Code

Code: Select all

    <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>

Code: Select all

    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 คืออะไร??


Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 28 guests