Jquery Input calendar datepicker



datepicker เป็นสคริปต์์ที่ถูกใช้งานค่อนข้างบ่อยครั้ง สำหรับผู้ที่ต้องเขียน form input วัน/เดือน/ปี และส่วนตัวผมก็ใช้แทบทุกเว็บไซต์ที่มี back office ผมเลยถือโอกาสนี้ นำมันมารวบรวมไว้บนเว็บฯ ซะเลย เพื่อง่ายต่อการหยิบไปใช้

Date Picker แบบเดือนไทย ปี พ.ศ.

Thai Date Picker Date Thai Date Picker Date
<!DOCTYPE html>
<html>
<head>
<title>Thai Date Picker</title>
<meta charset="utf-8" />
<link href='css/jquery-ui-1.8.10.custom.css' rel='stylesheet' type='text/css'/>
 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
 
<script type="text/javascript">
<!-- 
$(document).ready(function() {
        var d = new Date();
        d.setDate(d.getDate());
        var toDay = d.getDate() + '/' + (d.getMonth() + 1) + '/' + (d.getFullYear()+543);
 
        $(".current").datepicker({ 
              buttonImage: 'images/ico-calendar.gif', 
              showOn: 'both', 
              buttonImageOnly: true, 
              changeMonth: true, 
              changeYear: true, 
              dateFormat: 'dd/mm/yy', 
              isBuddhist: true, 
              defaultDate: toDay, 
              dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],
              yearRange: "-1:+1",
              dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
              monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
              monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.']
        });
});
// -->
</script>
</head>
<body>
<Date input name="date" class="current" />
</body>
</html>

 

Download โค้ดสคริปต์ทั้งหมด datePicker-TH.zip