สร้าง widget เสริม datepicker ใน jqueryui รองรับปี พ.ศ.

18 March 2017 By Ninenik Narkdee
jquery plugin jqueryui datepicker thai

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery_plugin jqueryui datepicker_thai



วันนี้ เอา widget เสริม datepicker ใน jqueryui มาฝาก เป็นตัว widget ที่สร้างขึ้นมาใหม่
ปรับปรุงจาก plugin ตัวเดิมที่เคยแนะนำไปในบทความ
 
(บทความเนื้อหาเก่า)
สร้าง jquery plugin แสดง ปฏิทิน วัน เดือน พ.ศ. ภาษาไทย สำหรับ datepicker 
http://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 อีกที ดังนั้น การตั้งค่าก็จะยังคง
ใช้รูปแบบเดิม ซึ่สามารถดูรายละเอียดการตั้งค่าเพิ่มเติม ถ้าต้องการได้ที่
 
http://api.jqueryui.com/datepicker
 
หรือถ้าต้องการดาวน์โหลด หรือสร้าง theme เอง ก็สามารถเข้าไปสร้าง
และโหลดลงมาใช้ได้ที่
 
http://jqueryui.com/themeroller/
 
สิ่งที่เพิ่มเข้ามาจะมีอยู่สองอย่างก็ การกำหนด
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





อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: jquery plugin datepicker thai jqueryui







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ