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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by thatsawan » 12/06/2014 6:19 pm

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

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 2585 times
ex2.png
ex2.png (14.33 KiB) Viewed 2585 times
ex3.png
ex3.png (2.86 KiB) Viewed 2585 times
ex5.png
ex5.png (8.7 KiB) Viewed 2585 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 คืออะไร??

Top