jQuery Calendars Datepicker เป็นตัวเสริม (plugin) ของ jQuery ที่สามารถแสดงผลปฏิทินเป็นภาษาไทย (ปี พ.ศ. ด้วยนะครับ) และก็รองรับอีกหลายภาษาเลยล่ะครับ (ประมาณ 60 กว่าภาษาครับ) ซึ่งดูแล้วน่าจะเป็นประโยชน์สำหรับเพื่อนๆ ที่กำลังมองหา plugin แนวๆ นี้อยู่นะครับ หรือคนที่ยังใช้ dropdown อยู่ก็ลองเปลี่ยนมาใช้แบบนี้ดูนะครับ จะทำให้เว็บน่าใช้ขึ้นอีกเยอะครับ ^^
มาดูวิธีการใช้งานบ้างครับ ว่าต้องทำไงบ้าง อันดับแรกเลยก็ไปดาวน์โหลดมาก่อนเลยครับ พอดาวน์โหลดเสร็จแล้ว แตกไฟล์ออกมาเราจะมีไฟล์เยอะแยะเลยครับ แต่ที่เราจะใช้จริงมีอยู่ประมาณ 7 ไฟล์ด้วยกันคือ จะเป็น javascript 6 ไฟล์และ stylesheet อีก 1 ไฟล์ครับ ด้งนี้
- jquery.calendars.min.js
- jquery.calendars.plus.min.js
- jquery.calendars.thai.min.js
- jquery.calendars.thai-th.js
- jquery.calendars.picker-th.js
- flora.calendars.picker.css
แปะโค๊ดนี้ไว้ในแท็ก head นะครับ อย่าลืมอ้างที่อยู่ของไฟล์ให้ถูกต้องนะครับ
<script type="text/javascript" src="jquery.calendars.min.js"></script> <script type="text/javascript" src="jquery.calendars.plus.min.js"></script> <script type="text/javascript" src="jquery.calendars.picker.min.js"></script> <script type="text/javascript" src="jquery.calendars.thai.min.js"></script> <script type="text/javascript" src="jquery.calendars.thai-th.js"></script> <script type="text/javascript" src="jquery.calendars.picker-th.js"></script>
จากนั้นก็มาแก้ไขแท็ก input ใน html ที่เราต้องการแสดงปฎิทินโดยการเพิ่ม id เข้าไปประมาณนี้นะครับ
<input id="mydate" type="text" name="mydate" value="" />
ขั้นตอนสุดท้ายก็เรียกใช้ฟังก์ชัน เพื่อแสดงป๊อปอัพปฏิทินขึ้นมาถ้าผู้ใช้มีการคลิกที่แท็ก input ที่เราต้องการกรอกวันที่ครับ
$('#mydate').calendarsPicker({calendar: $.calendars.instance('thai','th')});
เท่านี้ก็เรียบร้อยครับ เจ้า plugin ตัวนี้่ยังมีลูกเล่นอยู่อีกนะครับ เพื่อนๆ สามารถเข้าไปศึกษาเพิ่มเติมได้ครับ
เห็นงงกันเยอะเลยเอาโค๊ดแบบสมบูรณ์มาเพิ่มไว้ให้ด้วยครับจะได้ใช้ปฎิทินสวยๆ กันครับ แต่ก็ต้องอ้างไปหาไฟล์ javascript ให้ถูกนะครับ ^^
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>ตัวอย่างปฎิทินภาษาไทย</title>
<link type="text/css" href="flora.calendars.picker.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.calendars.min.js"></script>
<script type="text/javascript" src="jquery.calendars.plus.min.js"></script>
<script type="text/javascript" src="jquery.calendars.picker.min.js"></script>
<script type="text/javascript" src="jquery.calendars.thai.min.js"></script>
<script type="text/javascript" src="jquery.calendars.thai-th.js"></script>
<script type="text/javascript" src="jquery.calendars.picker-th.js"></script>
<script type="text/javascript">
$(function() {
$('#mydate').calendarsPicker({calendar: $.calendars.instance('thai','th')});
});
</script>
</head>
<body>
<h1>ตัวอย่างปฎิทินภาษาไทย</h1>
<p>วันที่: <input type="text" id="mydate" size="40" readonly></p>
</body>
</html>