การสร้าง 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>