DatetimePicker การจัดการเวลาแบบ So easy

Datetimepicker ของ Tempus Dominus เป็นการปรับการ input data ที่เป็น date ให้อยู่ในรูปแบบที่มีการใช้งานง่าย และมีการปรับ option ได้ง่ายยิ่งขึ้น

1. การติดตั้ง

*สิ่งที่คุณต้องมีก่อนนั่นคือ

• JQuery
• Boostrap
• Moment (ถ้าหากต้องการใช้ภาษาอื่นให้ลงเป็น moment-with-locales)

การเรียกใช้ของ datetimepicker

//เรียกใช้ script
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-2JBCbWoMJPH+Uj7Wq5OLub8E5edWHlTM4ar/YJkZh3plwB2INhhOC3eDoqHm1Za/ZOSk
srLlURLoyXVdfQXqwg==" crossorigin="anonymous"></script> 
//เรียกใช้ styles
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-PMjWzHVtwxdq7m7GIxBot5vdxUY+5aKP9wpKtvnNBZrVv1srI8tU6xvFMzG8crLNcMj/8Xl/WWmo/oAP/40p1g==" crossorigin="anonymous" />

2. การใช้งานโดยทั่วไป

• แบบพื้นฐาน

<div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
                        <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>
    <script type="text/javascript">
                $(function () {
                    $('#datetimepicker1').datetimepicker();
            });
        </script>
        </div>
    </div>

• แสดงเฉพาะเวลา

<div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3" />
                        <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
                        </div>
                    </div>
                </div>
            </div>
   <script type="text/javascript">
                $(function () {
                    $('#datetimepicker3').datetimepicker({
                        format: 'LT'
                    });
            });
        </script>
        </div>
    </div>

• แสดงเฉพาะวัน

<div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3" />
                        <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
                        </div>
                    </div>
                </div>
            </div>
   <script type="text/javascript">
                $(function () {
                    $('#datetimepicker3').datetimepicker({
                        format: 'L'
                    });
            });
        </script>
        </div>
    </div>

• Enable/Disable วัน

<div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="input-group date" id="datetimepicker6" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker6" />
                        <div class="input-group-append" data-target="#datetimepicker6" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>
    <script type="text/javascript">
                $(function () {
                    $('#datetimepicker6').datetimepicker({
                        disabledDates: [
                             moment("09/29/2020"),
                             new Date(2020, 09 - 09, 29),
                             "29/09/2020"
                        ]
                    });
            });
        </script>
        </div>
    </div>

การใช้ disableDates จะให้เราไม่สามารถเลิกวันที่ disable ได้

• เชื่อมต่อวัน (Date Range)

<div class="container">
        <div class='col-md-5'>
            <div class="form-group">
                <div class="input-group date" id="datetimepicker7" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" />
                    <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div class="input-group date" id="datetimepicker8" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8" />
                    <div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">
            $(function () {
                $('#datetimepicker7').datetimepicker();
        $('#datetimepicker8').datetimepicker({
                useCurrent: false
        });
        $("#datetimepicker7").on("change.datetimepicker", function (e) {
                $('#datetimepicker8').datetimepicker('minDate', e.date);
        });
        $("#datetimepicker8").on("change.datetimepicker", function (e) {
                $('#datetimepicker7').datetimepicker('maxDate', e.date);
        });
    });
</script>

การทำ daterange จะทำให้เราเลือกวันที่เริ่มต้น และวันสิ้นสุดโดยวันที่สิ้นสุดจะมากกว่าวันเริ่มต้นเสมอ

• การใช้ viewMode

<div class="container">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker10" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker10" />
                    <div class="input-group-append" data-target="#datetimepicker10" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
    <script type="text/javascript">
            $(function () {
                $('#datetimepicker10').datetimepicker({
                    viewMode: 'years'
                });
        });
    </script>
    </div>

สำหรับการใช้ viewMode มี option ให้เลือก ‘decades’,’years’,’months’,’days’, ‘times’

• Inline

<div style="overflow:hidden;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <div id="datetimepicker13"></div>
                </div>
            </div>
        </div>
   <script type="text/javascript">
            $(function () {
                $('#datetimepicker13').datetimepicker({
                    inline: true,
                    sideBySide: true
                });
        });
    </script>
    </div>

• การเปลี่ยนภาษาของ datetimepicker

*ก่อนจะใช้เปลี่ยนภาษาต้องลง moment-with-locales นะครับ

<div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" />
                        <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>
   <script type="text/javascript">
                $(function () {
                    $('#datetimepicker2').datetimepicker({
                        locale: 'th'
                    });
            });
        </script>
        </div>
    </div>

จาการที่เลือก locales เป็น th ทำให้ปฏิทินเป็นภาษาไทย

3.การปรับการเพิ่ม/ลด จำนวนของเวลา

สำหรับการปรับเพิ่มลดเราสามารถใช้โดยการใช้ stepping โดยการ stepping นั้นจะใส่ค่าเป็นนาที

$('#startDateHourly').datetimepicker({
        stepping: 10
});

จากรูปเราใส่ stepping 10 ทำให้การเลือกจำนวนนาทีจะเพิ่มทีละ 10

4.การใช้ option KeyBinds

การใช้ keyBinds เป็นการกำหนด key ว่ากดปุ่มไหนจะเกิด action อะไรกับ datetimepicker

Example

$('#startDate').datetimepicker({
        keyBinds: {
            
            up: function () {
                this.date(this.date().clone().add(10, 'm'));
            },
            down: function () {
                this.date(this.date().clone().add(-10, 'm'));
            },
            enter: function () {
                $("#viewTenMinDataBtn").click();
            }
        }
    });

จากตัวอย่าง ได้เซตปุ่ม key up เป็นเพิ่ม 10 นาที key down เป็นลด 10 นาที และ enter เป็นการให้ไปกดปุ่ม

5.การนำค่าของ datetimepicker ไปใช้

การนำค่าไปใช้สามารถทำได้โดยง่ายๆ

//เลือก id ของ datetimepicker
$('#id').datetimepicker('viewDate')

จบกันไปแล้วนะครับสำหรับการใช้ datetimepicker หากใครต้องการอ่านเพิ่มเติมสามารถอ่านต่อได้ที่ คลิก