การใช้งาน Jquery Ui DatePicker

การสร้าง Form เพื่อรับข้อมูลจากผู้ใช้งาน ในกรณีที่ต้องมีการเก็บข้อมูลในรูปแบบวันที่ เพื่อความสะดวกในการกรอกข้อมูล เราจะมา แนะนำการใช้งาน Jquery Ui DatePicker ซึ่ง ช่วยสำหรับการแสดงผล ปฏิทิน และสามารถปรับแต่งรูปแบบการแสดงผลได้

สามารถศึกษาเพิ่มเติมได้ที่ http://jqueryui.com/datepicker/

ตัวอย่างการใช้งาน

1.การเรียกใช้งาน DatePicker สร้างไฟล์ datepicker.php

การใช้งาน JqueryUi DatePicker

<!doctype html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      
      <script>
      $(function(){
           $( ".show_date" ).datepicker({
            dateFormat: "yy-mm-dd", //กำหนดรูปแบบวันที่ ปี - เดือน - วัน
            changeMonth: true, // กำหนดให้เปลี่ยนเดือนได้
            changeYear:true, //กำหนดให้เปลี่ยนปีได้
            dayNamesMin: [ "อา", "จ", "อ", "พ", "พฤ", "ศ", "ส" ],//กำหนดชื่อย่อของวัน เป็น ภาษาไทย
            monthNamesShort: [ "มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม" ],
        });
      });

      </script>
    </head>
    <body>
        <p>Date: <input type="text" class="show_date"></p>
    </body>
</html>

2.ตัวอย่าง การกำหนด Event Onclick ใน Datepicker

ปรับแก้ในส่วนของ Javascript เพิ่ม Method onSelect ในส่วนของ datepicker function ในไฟล์ datepicker.php

<script>
      $(function(){
           $( ".show_date" ).datepicker({
            dateFormat: "yy-mm-dd", //กำหนดรูปแบบวันที่ ปี - เดือน - วัน
            changeMonth: true, // กำหนดให้เปลี่ยนเดือนได้
            changeYear:true, //กำหนดให้เปลี่ยนปีได้
            dayNamesMin: [ "อา", "จ", "อ", "พ", "พฤ", "ศ", "ส" ],//กำหนดชื่อย่อของวัน เป็น ภาษาไทย
            monthNamesShort: [ "มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม" ],
                  //เพิ่ม Method onSelect เพื่อจับเหตุการณ์ขณะคลิก
               onSelect: function(select_date) {
                //alert date
                alert("คุณเลือกวันที่ : "+select_date);
                },

        });
      });
</script>

3.ตัวอย่าง การแสดง highlight แถบสี วันที่ ใน DatePicker

3.1 สร้างไฟล์ event.php สร้างตัวแปร array เก็บค่าวันที่ แล้วแปลงค่าตัวแปรให้เป็นในรูปแบบ JSON ด้วย function json_encode

ตัวอย่างไฟล์ event.php

<?php

$year = date('Y');
$month = date('m');

//กำหนดค่า วันที่ ในตัวแปร array
$event[] = $year."-".$month."-"."10";
$event[] = $year."-".$month."-"."12";
$event[] = $year."-".$month."-"."13";
$event[] = $year."-".$month."-"."15";
$event[] = $year."-".$month."-"."18";
$event[] = $year."-".$month."-"."19";
$event[] = $year."-".$month."-"."25";

//แปลงค่า Array ให้เป็นในรูปแบบ JSON
echo json_encode($event);

?>

3.2 แก้ไขไฟล์ datepicker.php
เพิ่ม Code ในส่วนของ stylesheet เพื่อ กำหนดค่าการแสดงผลของวันที่

<style>
    /*CSS FOR DATEPICKER*/
              .ui-highlight .ui-state-default{
             background: #FBF8C5 !important;
             color: red !important;
             font-weight: bold;
        }
 </style>

3.3 แก้ไขไฟล์ datepicker.php
เพิ่ม Code ในส่วนของ Javascript เพื่อดึงข้อมูลวันที่จาก ไฟล์ event.php มาแสดงผลใน DatePicker

<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <style>
            /*CSS FOR DATEPICKER*/
            .ui-highlight .ui-state-default{

                background: #FBF8C5 !important;
                color: red !important;
                font-weight: bold;
            }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
     <script>
      $(function(){  
          
          $.ajax({
              dataType:"json",
              url:"event.php",
              success:function(dates){
                 alert(dates);
                    $( ".show_date" ).datepicker({
                        dateFormat: "yy-mm-dd", //กำหนดรูปแบบวันที่ ปี - เดือน - วัน
                        changeMonth: true, // กำหนดให้เปลี่ยนเดือนได้
                        changeYear:true, //กำหนดให้เปลี่ยนปีได้
                        dayNamesMin: [ "อา", "จ", "อ", "พ", "พฤ", "ศ", "ส" ],//กำหนดชื่อย่อของวัน เป็น ภาษาไทย
                        monthNamesShort: [ "มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม" ],
                        onSelect: function(select_date) {
                            //alert date
                                alert("คุณเลือกวันที่ : "+select_date);
                                alert(date);
                            },
                        beforeShowDay : function(date){
                            var y = date.getFullYear().toString(); // get full year
                            var m = (date.getMonth() + 1).toString(); // get month.
                            var d = date.getDate().toString(); // get Day
                            if(m.length == 1){ m = '0' + m; } // append zero(0) if single digit
                            if(d.length == 1){ d = '0' + d; } // append zero(0) if single digit
                            var currDate = y+'-'+m+'-'+d;
                            
                            if(dates.indexOf(currDate) >= 0){
                                return [true, "ui-highlight"];    
                            }else{
                                return [true];
                            }                    
                        }

                    });
              }
          });
          
      });
      </script>
    </head>
    <body>
        <p>Date: <input type="text" class="show_date"></p>
    </body>
</html>

Popular Posts