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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: ตัวอย่างการใช้งาน ปฎิทินบน Bootstrap (Datepicker for Bootstrap)

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

โดย thatsawan » 12/06/2014 6:19 pm

:lol: :lol:
12-6-2557 18-12-31.png
12-6-2557 18-12-31.png (30.81 KiB) Viewed 5101 times
ดาวน์โหลดตัวอย่างไฟล์ได้ที่นี่

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

โดย M004 » 26/02/2014 5:57 pm

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

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

ข้างบน