bootstrap-datepicker ที่แสดงปีเป็น พ.ศ ได้ (ของแท้เดือน กุมภาพันธ์ 2559 ต้องมี 29 วันนะ U)

ก่อนเหมือนอย่างที่เคยครับ หลังจากที่ผมแก้ datepicker ของ jQuery UI ไปแล้ว ก็มีเพื่อนๆ แฟนเพจของทาง JavaScriptthai ได้เข้ามาทำถามว่าทำไมหา datepicker (ปฎิทิน) ที่เป็นของ bootstrap ไม่เจอเลยวันนี้ผมก็เลยทำมาให้เพื่อนๆ ได้ใช้กันครับ เรามาดูตัวอย่างตามด้านล่างกัน

โดยผมได้แก้โปรแกรมโดยให้มีผลต่อตัวโปรแกรมให้น้อยที่สุดและตั้งชื่อใหม่ว่า bootstrap-datepicker-custom.js โดยยังเก็บไฟล์ต้นฉบับไว้ bootstrap-datepicker.js หรือ bootstrap-datepicker.min.js

วิธีใช้ก็เพียงแค่กำหนด thaiyear: true ก็จะสามารถแสดงเป็นปี พ.ศ. ได้ทันทีครับ ส่วนรายละเอียดส่วนที่ว่าผมแก้ยังแก้ตรงไหนให้เปิด bootstrap-datepicker-custom.js แล้วหาคำว่า JavaScriptThai ก็จะเจอเลยครับ ผมเขียน Comment ไว้ให้เพื่อที่ว่าเพื่อนๆ อาจเอาไปโมต่อครับ

<!DOCTYPE html>
<html>
<head>
    <title>Datepicker for Bootstrap By javascriptthai</title>
    <meta charset="utf-8" />

    <script src="jquery-2.1.3.min.js"></script>

    <link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="stylesheet" />
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <link href="dist/css/bootstrap-datepicker.css" rel="stylesheet" />
    <script src="dist/js/bootstrap-datepicker-custom.js"></script>
    <script src="dist/locales/bootstrap-datepicker.th.min.js" charset="UTF-8"></script>

    <script>
        $(document).ready(function () {
            $('.datepicker').datepicker({
                format: 'dd/mm/yyyy',
                todayBtn: true,
                language: 'th',             //เปลี่ยน label ต่างของ ปฏิทิน ให้เป็น ภาษาไทย   (ต้องใช้ไฟล์ bootstrap-datepicker.th.min.js นี้ด้วย)
                thaiyear: true              //Set เป็นปี พ.ศ.
            }).datepicker("setDate", "0");  //กำหนดเป็นวันปัจุบัน
        });
    </script>
</head>
<body>

    <label for="inputdatepicker" class="col-md-2 control-label">datepicker</label>
    <div class="col-md-10">
        <input id="inputdatepicker" class="datepicker" data-date-format="mm/dd/yyyy">
    </div>
</body>
</html>

สำหรับ version แรกนี้ผมก็ test มาระดับหนึ่งหากผิดพลาดประการใดก็กะซิปบอกผมได้ผมจะรีบแก้ให้ทันทีครับ

Demo Vesion Datepicker for Bootstrap v1.7.0 (ตัวล่าสุด)
-jquery-2.1.3.min
-bootstrap-3.3.7

อ้างอิงจาก http://bootstrap-datepicker.readthedocs.io/en/latest/index.html

หมายเหตุ หากมีการเปลี่ยน Update Vesrion ของ Datepicker for Bootstrap แล้วผมยังไม่ได้ทำการ Update ให้เพื่อนๆ สามารถแก้ไขได้เองโดยเปิดไฟล์ bootstrap-datepicker-custom.js แล้วค้นหาคำว่า javascriptthai ด้านบนแล้วก็ Copy ไปทับตัวใหม่ได้เองเลยครับ

เตรียมพบกับ materialize Date Picker ต่อไปเร็วๆนี้ครับผม