สร้าง widget เสริม datepicker ใน jqueryui รองรับปี พ.ศ.
เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdeedatepicker thai jquery plugin jqueryui
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ datepicker_thai jquery_plugin jqueryui
ดูแล้ว 18,543 ครั้ง
ไปที่
Copy
วันนี้ เอา widget เสริม datepicker ใน jqueryui มาฝาก เป็นตัว widget ที่สร้างขึ้นมาใหม่
ปรับปรุงจาก plugin ตัวเดิมที่เคยแนะนำไปในบทความ
(บทความเนื้อหาเก่า)
สร้าง jquery plugin แสดง ปฏิทิน วัน เดือน พ.ศ. ภาษาไทย สำหรับ datepicker
https://www.ninenik.com/content.php?arti_id=469 via @ninenik
รูปประกอบ datepicker_thai widget
ดูตัวอย่างได้ท้ายบทความ
ก่อนอื่นให้ทำการดาวน์โหลดไฟล์ jqueryui_datepicker_thai_min.js
ได้ที่ลิ้งค๋ด้านล่างนี้
ดาวน์โหลด https://goo.gl/T8RJlE
ในไฟล์ดาวน์โหลดจะมีไฟล์ jqueryui_datepicker_thai_min.js และไฟล์ตัวอย่าง
demo_datepickerui.php อยู่ด้านใน
widget ตัวนี้ใช้ชื่อว่า datepicker_thai
จะมีการเรียกใช้งาน datepicker ของ jqueryui อีกที ดังนั้น การตั้งค่าก็จะยังคง
ใช้รูปแบบเดิม ซึ่สามารถดูรายละเอียดการตั้งค่าเพิ่มเติม ถ้าต้องการได้ที่
หรือถ้าต้องการดาวน์โหลด หรือสร้าง theme เอง ก็สามารถเข้าไปสร้าง
และโหลดลงมาใช้ได้ที่
สิ่งที่เพิ่มเข้ามาจะมีอยู่สองอย่างก็ การกำหนด
langTh และ yearTh
ตัวอย่างโค้ดการเรียกใช้งาน
$("#dateInput2").datepicker_thai({ dateFormat: 'dd/mm/yy', changeMonth: false, changeYear: true, numberOfMonths: 2, langTh:true, yearTh:true, });
ตัาอย่างโค้ดไฟล์ demo_datepickerui.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <?php $jquery_ui_v="1.8.5"; $theme=array("0"=>"base","1"=>"black-tie","2"=>"blitzer","3"=>"cupertino","4"=>"dark-hive","5"=>"dot-luv", "6"=>"eggplant", "7"=>"excite-bike","8"=>"flick","9"=>"hot-sneaks","10"=>"humanity","11"=>"le-frog", "12"=>"mint-choc","13"=>"overcast","14"=>"pepper-grinder","15"=>"redmond","16"=>"smoothness", "17"=>"south-street","18"=>"start","19"=>"sunny","20"=>"swanky-purse","21"=>"trontastic","22"=>"ui-darkness", "23"=>"ui-lightness","24"=>"vader"); $jquery_ui_theme=$theme[14]; ?> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" /> <style type="text/css"> /* Overide css code กำหนดความกว้างของปฏิทินและอื่นๆ */ #ui-datepicker-div {display: none;} .ui-datepicker{ width:220px; font-family:tahoma; font-size:12px; text-align:center; } /* css กำหนดปุ่ม ถ้ามีแสดง*/ .ui-datepicker-trigger{ border: 1px solid #cccccc; background: #ececec !important; padding:3px; } </style> </head> <body> <br> <br> <br> <br> <br> <br> <div class="container" style="margin:auto;width:500px;"> http://api.jqueryui.com/datepicker<br> http://jqueryui.com/themeroller/<br> https://developers.google.com/speed/libraries/#jquery-ui<br> <br> <a href="demo_datepickerui.php">reload</a><br> <br> <input name="dateInput" type="text" id="dateInput" value="" readonly /> <input type="hidden" name="h_dateinput" value="" id="h_dateinput"> <br> <br> <input name="dateInput2" type="text" id="dateInput2" value="" readonly /> <br> <br> <div id="inline_date"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="jqueryui_datepicker_thai_min.js?1"></script> <script type="text/javascript"> $(function(){ $("#dateInput").datepicker_thai({ dateFormat: 'dd-mm-yy', showOn: 'button', buttonText: "เลือกวันที่", buttonImage: "", // ใส่ path รุป buttonImageOnly: false, currentText: "วันนี้", closeText: "ปิด", showButtonPanel: true, showOn: "both", altField:"#h_dateinput", altFormat: "yy-mm-dd", langTh:true, yearTh:true, numberOfMonths: 3, }); $("#dateInput2").datepicker_thai({ dateFormat: 'dd/mm/yy', changeMonth: false, changeYear: true, numberOfMonths: 2, langTh:true, yearTh:true, }); $("#inline_date").datepicker_thai({ dateFormat: 'dd-mm-yy', changeMonth: true, changeYear: true, langTh:true, yearTh: true, }); }); </script> </body> </html>
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 04-04-2017
อัพเดทกรณีมีการกำหนดค่าเริ่มต้น ก่อนเรียกใช้งาน
พร้อมตัวอย่าง DEMO 2 ประกอบตอนท้ายเพิ่มเติม
ดาวน์โหลดได้ที่ลิ้งค์ ดาวน์โหลด https://goo.gl/T8RJlE
พร้อมตัวอย่าง DEMO 2 ประกอบตอนท้ายเพิ่มเติม
ดาวน์โหลดได้ที่ลิ้งค์ ดาวน์โหลด https://goo.gl/T8RJlE
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ