-
-
-
syntax:datepicker ( options )
return type:void, element
content:ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ datepicker
โดย options ให้กำหนดค่า config ต่างๆ ให้กับการ datepicker ได้แก่
disabled, altField, altFormat, autoSize, changeMonth, changeYear, dateFormat, dayNames,
dayNamesMin, dayNamesShort, defaultDate, duration, firstDay, gotoCurrent, hideIfNoPrevNext,
maxDate, minDate, monthNames, monthNamesShort, numberOfMonths, showAnim, stepMonths,
beforeShow, beforeShowDay, onChangeMonthYear, onClose, onSelect
example:$("div#datepicker").datepicker ( { changeMonth: true } );
var canChangeMonth = $("div#datepicker").datepicker ( "option", "changeMonth" ); // ใช้คืนค่าข้อมูลของ property ที่กำหนด
$("div#datepicker").datepicker ( "option", "changeMonth", true ); // ใช้กำหนดค่าให้กับ property ที่กำหนด
-
config:disabled
return type:boolean
content:ใช้กำหนดสถานะของการ datepicker ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)
example:$("div#datepicker").datepicker ( { disabled: true } );
-
config:altField
return type:selector
content:ใช้กำหนด selector ที่จะเป็น alt ของการ hover เหนือวันที่ (default="")
example:$("div#datepicker").datepicker ( { altField: "altDatePicker" } );
-
config:altFormat
return type:string
content:ใช้กำหนด รูปแบบ ของการแสดง alt เช่น "yy-mm-dd" (default="")
โดย รูปแบบการจัดมีดังต่อไปนี้
d คือวันที่ของเดือน เช่น 1,2,3,4,...,31
dd - คือวันที่ของเดือน เช่น 01,02,03,04,...,31
o - คือวันที่ของปี เช่น 1,2,3,4,...,366
oo - คือวันที่ของปี เช่น 001,002,003,004,...,366
D - คือชื่อวันแบบสั้น
DD - คือชื่อวันแบบเด็ม
m - คือเดือนที่ของปี เช่น 1,2,3,...,12
mm - คือเดือนที่ของปี เช่น 01,02,03,...,12
M - คือชื่อเดือนแบบสั้น
MM - คือชื่อเดือนแบบเต็ม
y - คือปีที่ เช่น 96,97,98,99
yy - คือปีที่ เช่น 1996,1997,1998,1999
example:$("div#datepicker").datepicker ( { altFormat: "yy-mm-dd" } );
-
config:autoSize
return type:boolean
content:ใช้กำหนดว่าจะปรับขนาดแบบ auto ในแต่ละ field หรือไม่ (default=false)
example:$("div#datepicker").datepicker ( { autoSize: false } );
-
config:changeMonth
return type:boolean
content:ใช้กำหนดว่าสามารถเปลี่ยนเดือน ได้หรือไม่ (default=false)
example:$("div#datepicker").datepicker ( { changeMonth: true } );
-
config:changeYear
return type:boolean
content:ใช้กำหนดว่าสามารถเปลี่ยนปี ได้หรือไม่ (default=false)
example:$("div#datepicker").datepicker ( { changeYear: true } );
-
config:dateFormat
return type:string
content:ใช้กำหนดรูปแบบของวันที่ (default=mm/dd/yy)
โดย รูปแบบการจัดมีดังต่อไปนี้
d คือวันที่ของเดือน เช่น 1,2,3,4,...,31
dd - คือวันที่ของเดือน เช่น 01,02,03,04,...,31
o - คือวันที่ของปี เช่น 1,2,3,4,...,366
oo - คือวันที่ของปี เช่น 001,002,003,004,...,366
D - คือชื่อวันแบบสั้น
DD - คือชื่อวันแบบเด็ม
m - คือเดือนที่ของปี เช่น 1,2,3,...,12
mm - คือเดือนที่ของปี เช่น 01,02,03,...,12
M - คือชื่อเดือนแบบสั้น
MM - คือชื่อเดือนแบบเต็ม
y - คือปีที่ เช่น 96,97,98,99
yy - คือปีที่ เช่น 1996,1997,1998,1999
example:$("div#datepicker").datepicker ( { dateFormat: "yy-mm-dd" } );
-
config:dayNames
return type:array
content:ใช้กำหนดชื่อวันแบบเต็ม (defatult=['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'])
example:$("div#datepicker").datepicker ( { dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] } );
-
config:dayNamesMin
return type:array
content:ใช้กำหนดชื่อวันแบบย่อ (default=['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'])
example:$("div#datepicker").datepicker ( { dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] } );
-
config:dayNamesShort
return type:array
content:ใช้กำหนดชื่อวันแบบสั้น (default=['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
example:$("div#datepicker").datepicker ( { dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] } );
-
config:defaultDate
return type:date, number, string
content:ใช้กำหนดค่าเริ่มต้นของวันที่ เช่น +7 (default=null)
example:$("div#datepicker").datepicker ( { defaultDate: +7 } );
-
config:duration
return type:string, number
content:ใช้กำหนดระยะเวลาที่ให้ datepicker ปรากฏขึ้น โดยค่าที่เป็นไปได้ (default=normal)
ได้แก่ slow, normal, fast และ ค่าตัวเลขที่เป็น millisecond
example:$("div#datepicker").datepicker ( { duration: "fast" } );
-
config:firstDay
return type:number
content:ใช้กำหนดวันที่จะให้เป็นวันเลขของสัปดาห์ โดย 0 คือ วันอาทิตย์ และต่อๆไปตามลำดับ (default=0)
example:$("div#datepicker").datepicker ( { firstDay: 1 } );
-
config:gotoCurrent
return type:boolean
content:ใช้กำหนดว่าเมื่อเปลี่ยนเดือนแล้ว จะยังคงให้ focus ไปที่ วันที่ ปัจจุบันอยู่ ใช่หรือไม่ (default=false)
example:$("div#datepicker").datepicker ( { gotoCurrent: true } );
-
config:hideIfNoPrevNext
return type:boolean
content:ใช้กำหนดว่าในกรณีที่ เดือนปัจจุบันอยู่ใน minDate หรือ maxDate แล้ว
ต้องการให้ซ่อนปุ่ม next หรือ previous ด้วย ใช่หรือไม่ (default=false)
example:$("div#datepicker").datepicker ( { hideIfNoPrevNext: true } );
-
config:maxDate
return type:date, number, string
content:ใช้กำหนดวันที่สูงสุดของปฏิทิน โดยค่าที่เป็นไปได้ (default=null)
ได้แก่ 'y' for years, 'm' for months, 'w' for weeks, 'd' for days เช่น '+1m +1w'
example:$("div#datepicker").datepicker ( { maxDate: "+2y" } );
-
config:minDate
return type:date, number, string
content:ใช้กำหนดวันที่ต่ำสุดของปฏิทิน โดยค่าที่เป็นไปได้
ได้แก่ 'y' for years, 'm' for months, 'w' for weeks, 'd' for days เช่น '-1m -1w' (default=null)
example:$("div#datepicker").datepicker ( { minDate: "-2y" } );
-
config:monthNames
return type:array
content:ใช้กำหนดชื่อเดือนแบบเต็ม
(default=['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'])
example:$("div#datepicker").datepicker ( { monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] } );
-
config:monthNamesShort
return type:array
content:ใช้กำหนดชื่อเดือนแบบสั้น (default=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
example:$("div#datepicker").datepicker ( { monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] } );
-
config:numberOfMonths
return type:number, array
content:ใช้กำหนดจำนวนของเดือนที่ต้องการให้แสดงผล คือต้องการแสดงออกมาทั้งหมดกี่เดือน (default=1)
example:$("div#datepicker").datepicker ( { numberOfMonths: 3 } );
-
config:showAnim
return type:string
content:ใช้กำหนดรูปแบบการแสดงหรือซ่อน datepicker (default=show)
โดยค่าที่เป็นไปได้ เช่น blind, clip, drop, explode, fade, fold, puff, slide, scale, bounce, highlight, pulsate, shake, size, transfer เป็นต้น
example:$("div#datepicker").datepicker ( { showAnim: "fadeIn" } );
-
config:stepMonths
return type:number
content:ใช้กำหนดว่าการ click next หรือ previous จะให้เปลี่ยนเดือนกี่เดือน (default=1)
example:$("div#datepicker").datepicker ( { stepMonths: 12 } );
-
config:beforeShow
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนที่ datepicker จะแสดงขึ้นมา
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#datepicker").datepicker ( { beforeShow: function(event,object) { alert ( "datepicker before show" ); } } );
-
config:beforeShowDay
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนที่ day ของ datepicker จะแสดงขึ้นมา
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#datepicker").datepicker ( { beforeShowDay: function(event,object) { alert ( "datepicker before show day" ); } } );
-
config:onChangeMonthYear
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ถูกเปลี่ยนเดือนหรือปี
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#datepicker").datepicker ( { onChangeMonthYear: function(event,object) { alert ( "datepicker on change year" ); } } );
-
config:onClose
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ปิดตัวลง
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#datepicker").datepicker ( { onClose: function(event,object) { alert ( "datepicker on close" ); } } );
-
config:onSelect
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ถูกเลือกวันที่
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#datepicker").datepicker ( { onSelect: function(event,object) { alert ( "datepicker on select" ); } } );
