JqueryUI - Datepicker

Datepickers ใน jQueryUI ช่วยให้ผู้ใช้ป้อนวันที่ได้ง่ายและมองเห็นได้ คุณสามารถปรับแต่งรูปแบบวันที่และภาษา จำกัด ช่วงวันที่ที่เลือกได้และเพิ่มปุ่มและตัวเลือกการนำทางอื่น ๆ ได้อย่างง่ายดาย

jQueryUI ให้ datepicker()วิธีที่สร้าง datepicker และเปลี่ยนรูปลักษณ์ขององค์ประกอบ HTML บนเพจโดยการเพิ่มคลาส CSS ใหม่ แปลงองค์ประกอบ <input>, <div> และ <span> ในชุดที่รวมเป็นตัวควบคุม datepicker

ตามค่าเริ่มต้นสำหรับองค์ประกอบ <input> ปฏิทิน datepicker จะเปิดขึ้นในภาพซ้อนทับขนาดเล็กเมื่อช่องข้อความที่เกี่ยวข้องได้รับโฟกัส สำหรับปฏิทินแบบอินไลน์ให้แนบ datepicker เข้ากับ <div> หรือ <span> องค์ประกอบ

ไวยากรณ์

datepicker() วิธีการสามารถใช้ได้สองรูปแบบ -

$ (ตัวเลือกบริบท) .datepicker (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .datepicker ("action", [params]) Method

$ (ตัวเลือกบริบท) .datepicker (ตัวเลือก) วิธีการ

datepicker (ตัวเลือก) ตัวเลือก

ไวยากรณ์

$(selector, context).datepicker(options);

คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

$(selector, context).datepicker({option1: value1, option2: value2..... });

ตารางต่อไปนี้แสดงตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$(".selector").datepicker(
   { altField: "#actualDate" }
);
$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
$(".selector").datepicker(
   { autoSize: true }
);


$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);
$(".selector").datepicker(
   { buttonImageOnly: true }
);
$(".selector").datepicker(
   { buttonText: "Choose" }
);
$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);
$(".selector").datepicker(
   { changeMonth: true }
);
$(".selector").datepicker(
   { changeYear: true }
);
$(".selector").datepicker(
   { closeText: "Close" }
);
$(".selector").datepicker(
   { constrainInput: false }
);
$(".selector").datepicker(
   { currentText: "Now" }
);
$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);
$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);
$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);
$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);
$(".selector").datepicker(
   { defaultDate: +7 }
);
$(".selector").datepicker(
   { duration: "slow" }
);
$(".selector").datepicker(
   { firstDay: 1 }
);
$(".selector").datepicker(
   { gotoCurrent: true }
);
$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);
$(".selector").datepicker(
   { isRTL: true }
);
$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);
$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);
$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);
$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);
$(".selector").datepicker(
   { navigationAsDateFormat: true }
);
$(".selector").datepicker(
   {  nextText: "Later" }
);
$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);



$(".selector").datepicker(
   { prevText: "Earlier" }
);
$(".selector").datepicker(
   { selectOtherMonths: true }
);
$(".selector").datepicker(
   { shortYearCutoff: 50 }
);
$(".selector").datepicker(
   { showAnim: "fold" }
);
$(".selector").datepicker(
   { showButtonPanel: true }
);
$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);
$(".selector").datepicker(
   { showMonthAfterYear: true }
);
$(".selector").datepicker(
   { showOn: "both" }
);
$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);
$(".selector").datepicker(
   { showOtherMonths: true }
);
$(".selector").datepicker(
   { showWeek: true }
);
$(".selector").datepicker(
   { stepMonths: 3 }
);
$(".selector").datepicker(
   { weekHeader: "W" }
);
$(".selector").datepicker(
   { yearRange: "2002:2012" }
);
$(".selector").datepicker(
   { yearSuffix: "CE" }
);

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	altField ตัวเลือกนี้ระบุตัวเลือก jQuery สำหรับฟิลด์ที่อัพเดตด้วยการเลือกวันที่ altFormatตัวเลือกที่สามารถใช้ในการกำหนดรูปแบบสำหรับค่านี้ สิ่งนี้มีประโยชน์มากสำหรับการตั้งค่าวันที่ในองค์ประกอบอินพุตที่ซ่อนไว้เพื่อส่งไปยังเซิร์ฟเวอร์ในขณะที่แสดงรูปแบบที่เป็นมิตรกับผู้ใช้มากขึ้นให้กับผู้ใช้ โดยค่าเริ่มต้นคือ"". Option - altField ตัวเลือกนี้ระบุตัวเลือก jQuery สำหรับฟิลด์ที่อัพเดตด้วยการเลือกวันที่ altFormatตัวเลือกที่สามารถใช้ในการกำหนดรูปแบบสำหรับค่านี้ สิ่งนี้มีประโยชน์มากสำหรับการตั้งค่าวันที่ในองค์ประกอบอินพุตที่ซ่อนไว้เพื่อส่งไปยังเซิร์ฟเวอร์ในขณะที่แสดงรูปแบบที่เป็นมิตรกับผู้ใช้มากขึ้นให้กับผู้ใช้ โดยค่าเริ่มต้นคือ"". Syntax `$(".selector").datepicker( { altField: "#actualDate" } );`
2	altFormat อ็อพชันนี้ใช้เมื่อระบุอ็อพชันaltField จัดเตรียมรูปแบบสำหรับค่าที่จะเขียนไปยังองค์ประกอบทางเลือก โดยค่าเริ่มต้นคือ"". Option - altFormat อ็อพชันนี้ใช้เมื่อระบุอ็อพชันaltField จัดเตรียมรูปแบบสำหรับค่าที่จะเขียนไปยังองค์ประกอบทางเลือก โดยค่าเริ่มต้นคือ"". Syntax `$(".selector").datepicker( { altFormat: "yy-mm-dd" } );`
3	appendText ตัวเลือกนี้เป็นค่าสตริงที่จะวางไว้หลังองค์ประกอบ <input> โดยมีจุดประสงค์เพื่อแสดงคำแนะนำแก่ผู้ใช้ โดยค่าเริ่มต้นคือ"". Option - appendText ตัวเลือกนี้เป็นค่าสตริงที่จะวางไว้หลังองค์ประกอบ <input> โดยมีจุดประสงค์เพื่อแสดงคำแนะนำแก่ผู้ใช้ โดยค่าเริ่มต้นคือ"". Syntax `$(".selector").datepicker( { appendText: "(yyyy-mm-dd)" } );`
4	autoSize ตัวเลือกนี้เมื่อตั้งค่าเป็น trueจะปรับขนาดองค์ประกอบ <input> เพื่อรองรับรูปแบบวันที่ของ datepicker ตามที่ตั้งไว้ด้วยตัวเลือก dateFormat โดยค่าเริ่มต้นคือfalse. Option - autoSize ตัวเลือกนี้เมื่อตั้งค่าเป็น trueจะปรับขนาดองค์ประกอบ <input> เพื่อรองรับรูปแบบวันที่ของ datepicker ตามที่ตั้งไว้ด้วยตัวเลือก dateFormat โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { autoSize: true } );`
5	beforeShow ตัวเลือกนี้เป็นฟังก์ชันเรียกกลับที่เรียกใช้ก่อนที่จะแสดง datepicker โดยมีองค์ประกอบ <input> และอินสแตนซ์ datepicker ที่ส่งผ่านเป็นพารามิเตอร์ ฟังก์ชันนี้สามารถคืนค่าแฮชตัวเลือกที่ใช้ในการแก้ไข datepicker โดยค่าเริ่มต้นคือ"". Option - beforeShow ตัวเลือกนี้เป็นฟังก์ชันเรียกกลับที่เรียกใช้ก่อนที่จะแสดง datepicker โดยมีองค์ประกอบ <input> และอินสแตนซ์ datepicker ที่ส่งผ่านเป็นพารามิเตอร์ ฟังก์ชันนี้สามารถคืนค่าแฮชตัวเลือกที่ใช้ในการแก้ไข datepicker โดยค่าเริ่มต้นคือ"".
6	beforeShowDay ตัวเลือกนี้เป็นฟังก์ชันเรียกกลับซึ่งรับวันที่เป็นพารามิเตอร์ซึ่งจะเรียกใช้สำหรับแต่ละวันใน datepicker ก่อนที่จะแสดงโดยมีวันที่ที่ผ่านเป็นพารามิเตอร์เดียว สามารถใช้เพื่อลบล้างลักษณะการทำงานเริ่มต้นบางอย่างขององค์ประกอบวัน ฟังก์ชันนี้ต้องส่งคืนอาร์เรย์สามองค์ประกอบโดยค่าเริ่มต้นคือnull. Option - beforeShowDay ตัวเลือกนี้เป็นฟังก์ชันเรียกกลับซึ่งรับวันที่เป็นพารามิเตอร์ซึ่งจะเรียกใช้สำหรับแต่ละวันใน datepicker ก่อนที่จะแสดงโดยมีวันที่ที่ผ่านเป็นพารามิเตอร์เดียว สามารถใช้เพื่อลบล้างลักษณะการทำงานเริ่มต้นบางอย่างขององค์ประกอบวัน ฟังก์ชันนี้ต้องส่งคืนอาร์เรย์สามองค์ประกอบดังต่อไปนี้ - [0] - ความจริงที่จะทำให้การเลือกวันที่เป็นเท็จอย่างอื่น [1] - สตริงชื่อคลาส CSS ที่คั่นด้วยช่องว่างที่จะใช้หรือสตริงว่างที่จะใช้ไม่มี [2] - สตริงที่ไม่บังคับเพื่อใช้คำแนะนำเครื่องมือกับองค์ประกอบวัน โดยค่าเริ่มต้นคือ null.
7	buttonImage ตัวเลือกนี้ระบุเส้นทางไปยังรูปภาพที่จะแสดงบนปุ่มที่เปิดใช้งานโดยตั้งค่าตัวเลือกshowOnเป็นปุ่มใดปุ่มหนึ่งหรือทั้งสองปุ่ม หากมีการระบุ buttonTextด้วยข้อความของปุ่มจะกลายเป็นแอตทริบิวต์altของปุ่ม โดยค่าเริ่มต้นคือ"". Option - buttonImage ตัวเลือกนี้ระบุเส้นทางไปยังรูปภาพที่จะแสดงบนปุ่มที่เปิดใช้งานโดยตั้งค่าตัวเลือกshowOnเป็นปุ่มใดปุ่มหนึ่งหรือทั้งสองปุ่ม หากมีการระบุ buttonTextด้วยข้อความของปุ่มจะกลายเป็นแอตทริบิวต์altของปุ่ม โดยค่าเริ่มต้นคือ"". Syntax `$(".selector").datepicker( { buttonImage: "/images/datepicker.gif" } );`
8	buttonImageOnly ตัวเลือกนี้หากตั้งค่าเป็นจริงจะระบุว่ารูปภาพที่ระบุโดย buttonImage จะปรากฏแบบสแตนด์อโลน (ไม่ใช่บนปุ่ม) ยังต้องตั้งค่าตัวเลือก showOn เป็นปุ่มใดปุ่มหนึ่งหรือทั้งสองปุ่มเพื่อให้ภาพปรากฏ โดยค่าเริ่มต้นคือfalse. Option - buttonImageOnly ตัวเลือกนี้หากตั้งค่าเป็นจริงจะระบุว่ารูปภาพที่ระบุโดย buttonImage จะปรากฏแบบสแตนด์อโลน (ไม่ใช่บนปุ่ม) ยังต้องตั้งค่าตัวเลือก showOn เป็นปุ่มใดปุ่มหนึ่งหรือทั้งสองปุ่มเพื่อให้ภาพปรากฏ โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { buttonImageOnly: true } );`
9	buttonText ตัวเลือกนี้ระบุคำอธิบายสำหรับปุ่มเปิดใช้งานโดยการตั้งค่าshowOnตัวเลือกให้เป็นหนึ่งในปุ่มหรือทั้งสอง โดยค่าเริ่มต้นคือ"...". Option - buttonText ตัวเลือกนี้ระบุคำอธิบายสำหรับปุ่มเปิดใช้งานโดยการตั้งค่าshowOnตัวเลือกให้เป็นหนึ่งในปุ่มหรือทั้งสอง โดยค่าเริ่มต้นคือ"...". Syntax `$(".selector").datepicker( { buttonText: "Choose" } );`
10	คำนวณสัปดาห์ ตัวเลือกนี้เป็นฟังก์ชันที่กำหนดเองในการคำนวณและส่งคืนหมายเลขสัปดาห์สำหรับวันที่ที่ส่งผ่านเป็นพารามิเตอร์เดี่ยว การใช้งานเริ่มต้นนั้นมาจากฟังก์ชันยูทิลิตี้$ .datepicker.iso8601Week () Option - calculateWeek ตัวเลือกนี้เป็นฟังก์ชันที่กำหนดเองในการคำนวณและส่งคืนหมายเลขสัปดาห์สำหรับวันที่ที่ส่งผ่านเป็นพารามิเตอร์เดี่ยว การใช้งานเริ่มต้นนั้นมาจากฟังก์ชันยูทิลิตี้$ .datepicker.iso8601Week () Syntax `$(".selector").datepicker( { calculateWeek: myWeekCalc } );`
11	เปลี่ยนเดือน ตัวเลือกนี้หากตั้งค่าเป็นจริงระบบจะแสดงรายการแบบเลื่อนลงของเดือนซึ่งช่วยให้ผู้ใช้สามารถเปลี่ยนเดือนได้โดยตรงโดยไม่ต้องใช้ปุ่มลูกศรเพื่อเลื่อนดู โดยค่าเริ่มต้นคือfalse. Option - changeMonth ตัวเลือกนี้หากตั้งค่าเป็นจริงระบบจะแสดงรายการแบบเลื่อนลงของเดือนซึ่งช่วยให้ผู้ใช้สามารถเปลี่ยนเดือนได้โดยตรงโดยไม่ต้องใช้ปุ่มลูกศรเพื่อเลื่อนดู โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { changeMonth: true } );`
12	เปลี่ยนปี ตัวเลือกนี้หากตั้งค่าเป็นจริงจะมีการแสดงรายการแบบเลื่อนลงปีเพื่อให้ผู้ใช้สามารถเปลี่ยนปีได้โดยตรงโดยไม่ต้องใช้ปุ่มลูกศรเพื่อข้ามผ่าน ตัวเลือกyearRangeสามารถใช้เพื่อควบคุมปีที่มีให้เลือก โดยค่าเริ่มต้นคือfalse. Option - changeYear ตัวเลือกนี้หากตั้งค่าเป็นจริงจะมีการแสดงรายการแบบเลื่อนลงปีเพื่อให้ผู้ใช้สามารถเปลี่ยนปีได้โดยตรงโดยไม่ต้องใช้ปุ่มลูกศรเพื่อข้ามผ่าน ตัวเลือกyearRangeสามารถใช้เพื่อควบคุมปีที่มีให้เลือก โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { changeYear: true } );`
13	closeText ตัวเลือกนี้ระบุข้อความเพื่อแทนที่คำบรรยายเริ่มต้นของ Done สำหรับปุ่มปิด ใช้เมื่อแผงปุ่มแสดงผ่านตัวเลือกshowButtonPanel โดยค่าเริ่มต้นคือ"Done". Option - closeText ตัวเลือกนี้ระบุข้อความเพื่อแทนที่คำบรรยายเริ่มต้นของ Done สำหรับปุ่มปิด ใช้เมื่อแผงปุ่มแสดงผ่านตัวเลือกshowButtonPanel โดยค่าเริ่มต้นคือ"Done". Syntax `$(".selector").datepicker( { closeText: "Close" } );`
14	จำกัด ตัวเลือกนี้หากตั้งจริง (เริ่มต้น), การป้อนข้อความลงใน <input> เป็นข้อ จำกัด กับตัวละครได้รับอนุญาตจากปัจจุบันdateformatตัวเลือก โดยค่าเริ่มต้นคือtrue. Option - constrainInput ตัวเลือกนี้หากตั้งจริง (เริ่มต้น), การป้อนข้อความลงใน <input> เป็นข้อ จำกัด กับตัวละครได้รับอนุญาตจากปัจจุบันdateformatตัวเลือก โดยค่าเริ่มต้นคือtrue. Syntax `$(".selector").datepicker( { constrainInput: false } );`
15	currentText ตัวเลือกนี้ระบุข้อความที่จะแทนที่คำบรรยายเริ่มต้นของวันนี้สำหรับปุ่มปัจจุบัน ใช้หากแผงปุ่มแสดงผ่านตัวเลือกshowButtonPanel โดยค่าเริ่มต้นคือToday. Option - currentText ตัวเลือกนี้ระบุข้อความที่จะแทนที่คำบรรยายเริ่มต้นของวันนี้สำหรับปุ่มปัจจุบัน ใช้หากแผงปุ่มแสดงผ่านตัวเลือกshowButtonPanel โดยค่าเริ่มต้นคือToday. Syntax `$(".selector").datepicker( { currentText: "Now" } );`
16	รูปแบบวันที่ ตัวเลือกนี้ระบุรูปแบบวันที่ที่จะใช้ โดยค่าเริ่มต้นคือmm/dd/yy. Option - dateFormat ตัวเลือกนี้ระบุรูปแบบวันที่ที่จะใช้ โดยค่าเริ่มต้นคือmm/dd/yy. Syntax `$(".selector").datepicker( { dateFormat: "yy-mm-dd" } );`
17	dayNames อ็อพชันนี้เป็นอาร์เรย์ 7 องค์ประกอบที่ระบุชื่อเต็มวันด้วยองค์ประกอบที่ 0 แทนวันอาทิตย์ สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]. Option - dayNames อ็อพชันนี้เป็นอาร์เรย์ 7 องค์ประกอบที่ระบุชื่อเต็มวันด้วยองค์ประกอบที่ 0 แทนวันอาทิตย์ สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]. Syntax `$(".selector").datepicker( { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] } );`
18	dayNamesMin อ็อพชันนี้เป็นอาร์เรย์ 7 องค์ประกอบที่ระบุชื่อวันที่น้อยที่สุดโดยมีองค์ประกอบ 0 ที่แทนวันอาทิตย์ซึ่งใช้เป็นส่วนหัวของคอลัมน์ สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]. Option - dayNamesMin อ็อพชันนี้เป็นอาร์เรย์ 7 องค์ประกอบที่ระบุชื่อวันที่น้อยที่สุดโดยมีองค์ประกอบ 0 ที่แทนวันอาทิตย์ซึ่งใช้เป็นส่วนหัวของคอลัมน์ สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]. Syntax `$(".selector").datepicker( { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] } );`
19	dayNamesShort ตัวเลือกนี้ระบุอาร์เรย์ 7 องค์ประกอบที่ระบุชื่อวันแบบสั้นพร้อมด้วยองค์ประกอบ 0 ที่แสดงถึงวันอาทิตย์ สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]. Option - dayNamesShort ตัวเลือกนี้ระบุอาร์เรย์ 7 องค์ประกอบที่ระบุชื่อวันแบบสั้นพร้อมด้วยองค์ประกอบ 0 ที่แสดงถึงวันอาทิตย์ สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]. Syntax `$(".selector").datepicker( { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] } );`
20	defaultDate ตัวเลือกนี้ตั้งค่าวันที่เริ่มต้นสำหรับตัวควบคุมโดยแทนที่ค่าเริ่มต้นของวันนี้หากองค์ประกอบ <input> ไม่มีค่า ซึ่งอาจเป็นอินสแตนซ์วันที่จำนวนวันนับจากวันนี้หรือสตริงที่ระบุวันที่แน่นอนหรือวันที่สัมพันธ์กัน โดยค่าเริ่มต้นคือnull. Option - defaultDate ตัวเลือกนี้ตั้งค่าวันที่เริ่มต้นสำหรับตัวควบคุมโดยแทนที่ค่าเริ่มต้นของวันนี้หากองค์ประกอบ <input> ไม่มีค่า ซึ่งอาจเป็นอินสแตนซ์วันที่จำนวนวันนับจากวันนี้หรือสตริงที่ระบุวันที่แน่นอนหรือวันที่สัมพันธ์กัน โดยค่าเริ่มต้นคือnull. Syntax `$(".selector").datepicker( { defaultDate: +7 } );`
21	ระยะเวลา ตัวเลือกนี้ระบุความเร็วของภาพเคลื่อนไหวที่ทำให้ datepicker ปรากฏขึ้น สามารถเป็นหนึ่งในช้าปกติหรือเร็วหรือจำนวนมิลลิวินาทีเพื่อให้ภาพเคลื่อนไหวขยายได้ โดยค่าเริ่มต้นคือnormal. Option - duration ตัวเลือกนี้ระบุความเร็วของภาพเคลื่อนไหวที่ทำให้ datepicker ปรากฏขึ้น สามารถเป็นหนึ่งในช้าปกติหรือเร็วหรือจำนวนมิลลิวินาทีเพื่อให้ภาพเคลื่อนไหวขยายได้ โดยค่าเริ่มต้นคือnormal. Syntax `$(".selector").datepicker( { duration: "slow" } );`
22	วันแรก ตัวเลือกนี้ระบุวันที่ถือเป็นวันแรกของสัปดาห์และจะแสดงเป็นคอลัมน์ทางซ้ายสุด โดยค่าเริ่มต้นคือ0. Option - firstDay ตัวเลือกนี้ระบุวันที่ถือเป็นวันแรกของสัปดาห์และจะแสดงเป็นคอลัมน์ทางซ้ายสุด โดยค่าเริ่มต้นคือ0. Syntax `$(".selector").datepicker( { firstDay: 1 } );`
23	gotoCurrent ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงลิงก์วันปัจจุบันจะถูกตั้งค่าเป็นวันที่ที่เลือกซึ่งจะลบล้างค่าเริ่มต้นของวันนี้ โดยค่าเริ่มต้นคือfalse. Option - gotoCurrent ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงลิงก์วันปัจจุบันจะถูกตั้งค่าเป็นวันที่ที่เลือกซึ่งจะลบล้างค่าเริ่มต้นของวันนี้ โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { gotoCurrent: true } );`
24	hideIfNoPrevNext ตัวเลือกนี้หากการตั้งค่าที่แท้จริงซ่อนลิงก์ถัดไปและก่อนหน้านี้ (เมื่อเทียบกับเพียงปิดการใช้งานพวกเขา) เมื่อพวกเขาไม่ได้บังคับตามที่กำหนดโดยการตั้งค่าของminDateและmaxDateตัวเลือก โดยค่าเริ่มต้นคือfalse. Option - hideIfNoPrevNext ตัวเลือกนี้หากการตั้งค่าที่แท้จริงซ่อนลิงก์ถัดไปและก่อนหน้านี้ (เมื่อเทียบกับเพียงปิดการใช้งานพวกเขา) เมื่อพวกเขาไม่ได้บังคับตามที่กำหนดโดยการตั้งค่าของminDateและmaxDateตัวเลือก โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { hideIfNoPrevNext: true } );`
25	isRTL ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะระบุการแปลเป็นภาษาจากขวาไปซ้าย โดยค่าเริ่มต้นคือfalse. Option - isRTL ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะระบุการแปลเป็นภาษาจากขวาไปซ้าย โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { isRTL: true } );`
26	maxDate ตัวเลือกนี้ตั้งค่าวันที่ที่เลือกได้สูงสุดสำหรับตัวควบคุม ซึ่งอาจเป็นอินสแตนซ์วันที่จำนวนวันนับจากวันนี้หรือสตริงที่ระบุวันที่แน่นอนหรือวันที่สัมพันธ์กัน โดยค่าเริ่มต้นคือnull. Option - maxDate ตัวเลือกนี้ตั้งค่าวันที่ที่เลือกได้สูงสุดสำหรับตัวควบคุม ซึ่งอาจเป็นอินสแตนซ์วันที่จำนวนวันนับจากวันนี้หรือสตริงที่ระบุวันที่แน่นอนหรือวันที่สัมพันธ์กัน โดยค่าเริ่มต้นคือnull. Syntax `$(".selector").datepicker( { maxDate: "+1m +1w" } );`
27	minDate ตัวเลือกนี้กำหนดวันที่ต่ำสุดที่เลือกได้สำหรับตัวควบคุม ซึ่งอาจเป็นอินสแตนซ์วันที่จำนวนวันนับจากวันนี้หรือสตริงที่ระบุวันที่แน่นอนหรือวันที่สัมพันธ์กัน โดยค่าเริ่มต้นคือnull. Option - minDate ตัวเลือกนี้กำหนดวันที่ต่ำสุดที่เลือกได้สำหรับตัวควบคุม ซึ่งอาจเป็นอินสแตนซ์วันที่จำนวนวันนับจากวันนี้หรือสตริงที่ระบุวันที่แน่นอนหรือวันที่สัมพันธ์กัน โดยค่าเริ่มต้นคือnull. Syntax `$(".selector").datepicker( { minDate: new Date(2007, 1 - 1, 1) } );`
28	monthNames อ็อพชันนี้เป็นอาร์เรย์ 12 องค์ประกอบที่ระบุชื่อเดือนแบบเต็มพร้อมด้วยองค์ประกอบที่ 0 แทนเดือนมกราคม สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]. Option - monthNames อ็อพชันนี้เป็นอาร์เรย์ 12 องค์ประกอบที่ระบุชื่อเดือนแบบเต็มพร้อมด้วยองค์ประกอบที่ 0 แทนเดือนมกราคม สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]. Syntax `$(".selector").datepicker( { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ] } );`
29	monthNamesShort อ็อพชันนี้ระบุอาร์เรย์ 12 องค์ประกอบที่ให้ชื่อเดือนแบบสั้นพร้อมด้วยองค์ประกอบที่ 0 ซึ่งเป็นตัวแทนของเดือนมกราคม สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]. Option - monthNamesShort อ็อพชันนี้ระบุอาร์เรย์ 12 องค์ประกอบที่ให้ชื่อเดือนแบบสั้นพร้อมด้วยองค์ประกอบที่ 0 ซึ่งเป็นตัวแทนของเดือนมกราคม สามารถใช้เพื่อกำหนดตำแหน่งการควบคุม โดยค่าเริ่มต้นคือ[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]. Syntax `$(".selector").datepicker( { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] } );`
30	navigationAsDateFormat ตัวเลือกนี้หากการตั้งค่าที่แท้จริงของการเชื่อมโยงนำทางสำหรับnextText, prevText,และcurrentTextจะผ่าน$ .datepicker.formatDate ()ฟังก์ชั่นก่อนที่จะมีการแสดงผล สิ่งนี้ช่วยให้สามารถระบุรูปแบบวันที่สำหรับตัวเลือกที่ถูกแทนที่ด้วยค่าที่เกี่ยวข้อง โดยค่าเริ่มต้นคือfalse. Option - navigationAsDateFormat ตัวเลือกนี้หากการตั้งค่าที่แท้จริงของการเชื่อมโยงนำทางสำหรับnextText, prevText,และcurrentTextจะผ่าน$ .datepicker.formatDate ()ฟังก์ชั่นก่อนที่จะมีการแสดงผล สิ่งนี้ช่วยให้สามารถระบุรูปแบบวันที่สำหรับตัวเลือกที่ถูกแทนที่ด้วยค่าที่เกี่ยวข้อง โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { navigationAsDateFormat: true } );`
31	nextText ตัวเลือกนี้ระบุข้อความเพื่อแทนที่คำบรรยายเริ่มต้นของ Next สำหรับลิงก์การนำทางในเดือนถัดไป ThemeRoller แทนที่ข้อความนี้ด้วยไอคอน โดยค่าเริ่มต้นคือNext. Option - nextText ตัวเลือกนี้ระบุข้อความเพื่อแทนที่คำบรรยายเริ่มต้นของ Next สำหรับลิงก์การนำทางในเดือนถัดไป ThemeRoller แทนที่ข้อความนี้ด้วยไอคอน โดยค่าเริ่มต้นคือNext. Syntax `$(".selector").datepicker( { nextText: "Later" } );`
32	numberOfMonths ตัวเลือกนี้ระบุจำนวนเดือนที่จะแสดงใน datepicker โดยค่าเริ่มต้นคือ1. Option - numberOfMonths ตัวเลือกนี้ระบุจำนวนเดือนที่จะแสดงใน datepicker โดยค่าเริ่มต้นคือ1. รองรับหลายประเภท - Number - จำนวนเดือนที่จะแสดงในแถวเดียว Array - อาร์เรย์กำหนดจำนวนแถวและคอลัมน์ที่จะแสดง Syntax `$(".selector").datepicker( { numberOfMonths: [ 2, 3 ] } );`
33	onChangeMonthYear ตัวเลือกนี้เป็นการเรียกกลับที่เรียกใช้เมื่อ datepicker ย้ายไปยังเดือนหรือปีใหม่โดยมีอินสแตนซ์ปีเดือน (ตาม 1) ที่เลือกและส่งผ่านอินสแตนซ์ datepicker เป็นพารามิเตอร์และบริบทของฟังก์ชันถูกตั้งค่าเป็นองค์ประกอบช่องป้อนข้อมูล โดยค่าเริ่มต้นคือnull. Option - onChangeMonthYear ตัวเลือกนี้เป็นการเรียกกลับที่เรียกใช้เมื่อ datepicker ย้ายไปยังเดือนหรือปีใหม่โดยมีอินสแตนซ์ปีเดือน (ตาม 1) ที่เลือกและส่งผ่านอินสแตนซ์ datepicker เป็นพารามิเตอร์และบริบทของฟังก์ชันถูกตั้งค่าเป็นองค์ประกอบช่องป้อนข้อมูล โดยค่าเริ่มต้นคือnull.
34	onClose ตัวเลือกนี้เป็นการเรียกกลับที่เรียกเมื่อใดก็ตามที่ datepicker ถูกปิดส่งผ่านวันที่ที่เลือกเป็นข้อความ (สตริงว่างหากไม่มีการเลือก) และอินสแตนซ์ datepicker และบริบทของฟังก์ชันถูกตั้งค่าเป็นองค์ประกอบฟิลด์อินพุต โดยค่าเริ่มต้นคือnull. Option - onClose ตัวเลือกนี้เป็นการเรียกกลับที่เรียกเมื่อใดก็ตามที่ datepicker ถูกปิดส่งผ่านวันที่ที่เลือกเป็นข้อความ (สตริงว่างหากไม่มีการเลือก) และอินสแตนซ์ datepicker และบริบทของฟังก์ชันถูกตั้งค่าเป็นองค์ประกอบฟิลด์อินพุต โดยค่าเริ่มต้นคือnull.
35	onSelect ตัวเลือกนี้เป็นการเรียกกลับที่เรียกเมื่อใดก็ตามที่เลือกวันที่ส่งผ่านวันที่ที่เลือกเป็นข้อความ (สตริงว่างหากไม่มีการเลือก) และอินสแตนซ์ datepicker และบริบทของฟังก์ชันถูกตั้งค่าเป็นองค์ประกอบช่องอินพุต โดยค่าเริ่มต้นคือnull. Option - onSelect ตัวเลือกนี้เป็นการเรียกกลับที่เรียกเมื่อใดก็ตามที่เลือกวันที่ส่งผ่านวันที่ที่เลือกเป็นข้อความ (สตริงว่างหากไม่มีการเลือก) และอินสแตนซ์ datepicker และบริบทของฟังก์ชันถูกตั้งค่าเป็นองค์ประกอบช่องอินพุต โดยค่าเริ่มต้นคือnull.
36	ก่อนหน้า ตัวเลือกนี้ระบุข้อความเพื่อแทนที่คำบรรยายเริ่มต้นของPrevสำหรับลิงก์การนำทางของเดือนก่อนหน้า (โปรดทราบว่า ThemeRoller จะแทนที่ข้อความนี้ด้วยไอคอน) โดยค่าเริ่มต้นคือPrevdefaultDatedayNamesMin. Option - prevText ตัวเลือกนี้ระบุข้อความเพื่อแทนที่คำบรรยายเริ่มต้นของPrevสำหรับลิงก์การนำทางของเดือนก่อนหน้า (โปรดทราบว่า ThemeRoller จะแทนที่ข้อความนี้ด้วยไอคอน) โดยค่าเริ่มต้นคือPrev. Syntax `$(".selector").datepicker( { prevText: "Earlier" } );`
37	selectOtherMonths ตัวเลือกนี้หากตั้งค่าเป็นจริงวันที่แสดงก่อนหรือหลังเดือนที่แสดงจะสามารถเลือกได้ วันดังกล่าวจะไม่ปรากฏเว้นแต่ว่าตัวเลือกshowOtherMonthsจะเป็นจริง โดยค่าเริ่มต้นคือfalse. Option - selectOtherMonths ตัวเลือกนี้หากตั้งค่าเป็นจริงวันที่แสดงก่อนหรือหลังเดือนที่แสดงจะสามารถเลือกได้ วันดังกล่าวจะไม่ปรากฏเว้นแต่ว่าตัวเลือกshowOtherMonthsจะเป็นจริง โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { selectOtherMonths: true } );`
38	shortYearCutoff ตัวเลือกนี้หากเป็นตัวเลขระบุค่าระหว่าง 0 ถึง 99 ปีก่อนหน้าซึ่งค่าปี 2 หลักจะถือว่าเป็นของศตวรรษก่อนหน้า หากตัวเลือกนี้เป็นสตริงค่าจะผ่านการแปลงเป็นตัวเลขและจะเพิ่มในปีปัจจุบัน ค่าเริ่มต้นคือ+10 ซึ่งแสดงถึง 10 ปีจากปีปัจจุบัน Option - shortYearCutoff ตัวเลือกนี้หากเป็นตัวเลขระบุค่าระหว่าง 0 ถึง 99 ปีก่อนหน้าซึ่งค่าปี 2 หลักจะถือว่าเป็นของศตวรรษก่อนหน้า หากตัวเลือกนี้เป็นสตริงค่าจะผ่านการแปลงเป็นตัวเลขและจะเพิ่มในปีปัจจุบัน ค่าเริ่มต้นคือ+10 ซึ่งแสดงถึง 10 ปีจากปีปัจจุบัน Syntax `$(".selector").datepicker( { shortYearCutoff: 50 } );`
39	showAnim ตัวเลือกนี้ระบุชุดชื่อของภาพเคลื่อนไหวที่จะใช้เพื่อแสดงและซ่อน datepicker หากระบุจะต้องเป็นหนึ่งในการแสดง (ค่าเริ่มต้น), fadeIn, slideDownหรือใด ๆ ของ jQuery UI ที่แสดง / ซ่อนภาพเคลื่อนไหว โดยค่าเริ่มต้นคือshow. Option - showAnim ตัวเลือกนี้ระบุชุดชื่อของภาพเคลื่อนไหวที่จะใช้เพื่อแสดงและซ่อน datepicker หากระบุจะต้องเป็นหนึ่งในการแสดง (ค่าเริ่มต้น), fadeIn, slideDownหรือใด ๆ ของ jQuery UI ที่แสดง / ซ่อนภาพเคลื่อนไหว โดยค่าเริ่มต้นคือshow. Syntax `$(".selector").datepicker( { showAnim: "fold" } );`
40	showButtonPanel ตัวเลือกนี้หากตั้งค่าเป็นจริงแผงปุ่มที่ด้านล่างของ datepicker จะปรากฏขึ้นโดยมีปุ่มปัจจุบันและปุ่มปิด คำบรรยายใต้ภาพของปุ่มเหล่านี้จะสามารถให้ผ่านทางcurrentTextและcloseTextตัวเลือก โดยค่าเริ่มต้นคือfalse. Option - showButtonPanel ตัวเลือกนี้หากตั้งค่าเป็นจริงแผงปุ่มที่ด้านล่างของ datepicker จะปรากฏขึ้นโดยมีปุ่มปัจจุบันและปุ่มปิด คำบรรยายใต้ภาพของปุ่มเหล่านี้จะสามารถให้ผ่านทางcurrentTextและcloseTextตัวเลือก โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { showButtonPanel: true } );`
41	showCurrentAtPos ตัวเลือกนี้ระบุดัชนีที่ใช้ 0 โดยเริ่มต้นที่ด้านซ้ายบนซึ่งควรวางเดือนที่มีวันที่ปัจจุบันไว้ในการแสดงผลแบบหลายเดือน โดยค่าเริ่มต้นคือ0. Option - showCurrentAtPos ตัวเลือกนี้ระบุดัชนีที่ใช้ 0 โดยเริ่มต้นที่ด้านซ้ายบนซึ่งควรวางเดือนที่มีวันที่ปัจจุบันไว้ในการแสดงผลแบบหลายเดือน โดยค่าเริ่มต้นคือ0. Syntax `$(".selector").datepicker( { showCurrentAtPos: 3 } );`
42	showMonthAfterYear ตัวเลือกนี้ระบุว่าหากตั้งค่าเป็นจริงตำแหน่งของเดือนและปีจะย้อนกลับในส่วนหัวของ datepicker โดยค่าเริ่มต้นคือfalse. Option - showMonthAfterYear ตัวเลือกนี้ระบุว่าหากตั้งค่าเป็นจริงตำแหน่งของเดือนและปีจะย้อนกลับในส่วนหัวของ datepicker โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { showMonthAfterYear: true } );`
43	showOn ตัวเลือกนี้ระบุว่า datepicker ควรจะปรากฏเมื่อใด ค่าที่เป็นไปได้คือโฟกัสปุ่มหรือทั้งสองอย่าง โดยค่าเริ่มต้นคือfocus. Option - showOn ตัวเลือกนี้ระบุว่า datepicker ควรจะปรากฏเมื่อใด ค่าที่เป็นไปได้คือโฟกัสปุ่มหรือทั้งสองอย่าง โดยค่าเริ่มต้นคือfocus. focus (ค่าเริ่มต้น) ทำให้ datepicker แสดงเมื่อองค์ประกอบ <input> ได้รับโฟกัส ปุ่มทำให้ปุ่มถูกสร้างขึ้นหลังจากองค์ประกอบ <input> (แต่ก่อนข้อความที่ต่อท้าย) ที่ทริกเกอร์ datepicker เมื่อคลิก ทั้งสองทำให้ปุ่มทริกเกอร์ถูกสร้างขึ้นและสำหรับเหตุการณ์โฟกัสจะทริกเกอร์ datepicker ด้วย Syntax `$(".selector").datepicker( { showOn: "both" } );`
44	showOptions ตัวเลือกนี้ให้กัญชาจะผ่านการเคลื่อนไหวเมื่อมีการเคลื่อนไหว jQuery UI ที่ระบุไว้สำหรับshowAnimตัวเลือก โดยค่าเริ่มต้นคือ{}. Option - showOptions ตัวเลือกนี้ให้กัญชาจะผ่านการเคลื่อนไหวเมื่อมีการเคลื่อนไหว jQuery UI ที่ระบุไว้สำหรับshowAnimตัวเลือก โดยค่าเริ่มต้นคือ{}. Syntax `$(".selector").datepicker( { showOptions: { direction: "up" } } );`
45	showOtherMonths ตัวเลือกนี้หากตั้งค่าเป็นจริงวันที่ก่อนหรือหลังวันแรกและวันสุดท้ายของเดือนปัจจุบันจะแสดงขึ้น วันที่เหล่านี้ไม่สามารถเลือกได้เว้นแต่จะตั้งค่าตัวเลือก selectOtherMonths เป็น true โดยค่าเริ่มต้นคือfalse. Option - showOtherMonths ตัวเลือกนี้หากตั้งค่าเป็นจริงวันที่ก่อนหรือหลังวันแรกและวันสุดท้ายของเดือนปัจจุบันจะแสดงขึ้น วันที่เหล่านี้ไม่สามารถเลือกได้เว้นแต่จะตั้งค่าตัวเลือก selectOtherMonths เป็น true โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { showOtherMonths: true } );`
46	showWeek ตัวเลือกนี้หากตั้งค่าเป็นจริงหมายเลขสัปดาห์จะแสดงในคอลัมน์ทางด้านซ้ายของการแสดงเดือน สามารถใช้อ็อพชันคำนวณสัปดาห์เพื่อเปลี่ยนลักษณะที่กำหนดค่านี้ได้ โดยค่าเริ่มต้นคือfalse. Option - showWeek ตัวเลือกนี้หากตั้งค่าเป็นจริงหมายเลขสัปดาห์จะแสดงในคอลัมน์ทางด้านซ้ายของการแสดงเดือน สามารถใช้อ็อพชันคำนวณสัปดาห์เพื่อเปลี่ยนลักษณะที่กำหนดค่านี้ได้ โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").datepicker( { showWeek: true } );`
47	stepMonths ตัวเลือกนี้ระบุจำนวนเดือนที่จะย้ายเมื่อมีการคลิกตัวควบคุมการนำทางหนึ่งในเดือน โดยค่าเริ่มต้นคือ1. Option - stepMonths ตัวเลือกนี้ระบุจำนวนเดือนที่จะย้ายเมื่อมีการคลิกตัวควบคุมการนำทางหนึ่งในเดือน โดยค่าเริ่มต้นคือ1. Syntax `$(".selector").datepicker( { stepMonths: 3 } );`
48	weekHeader ตัวเลือกนี้ระบุข้อความที่จะแสดงสำหรับคอลัมน์จำนวนสัปดาห์ซึ่งจะแทนที่ค่าเริ่มต้นของ Wk เมื่อ showWeek เป็นจริง โดยค่าเริ่มต้นคือWk. Option - weekHeader ตัวเลือกนี้ระบุข้อความที่จะแสดงสำหรับคอลัมน์จำนวนสัปดาห์ซึ่งจะแทนที่ค่าเริ่มต้นของ Wk เมื่อ showWeek เป็นจริง โดยค่าเริ่มต้นคือWk. Syntax `$(".selector").datepicker( { weekHeader: "W" } );`
49	yearRange ตัวเลือกนี้ระบุข้อ จำกัด เกี่ยวกับซึ่งปีที่ผ่านมาจะแสดงในแบบเลื่อนลงในแบบฟอร์มจาก:เมื่อchangeYearเป็นจริง ค่าอาจเป็นค่าสัมบูรณ์หรือสัมพัทธ์ (ตัวอย่างเช่น 2005: +2 สำหรับปี 2005 ถึง 2 ปีนับจากนี้) คำนำหน้า c สามารถใช้เพื่อให้ค่าสัมพัทธ์หักล้างจากปีที่เลือกแทนที่จะเป็นปีปัจจุบัน (ตัวอย่าง: c-2: c + 3) โดยค่าเริ่มต้นคือc-10:c+10. Option - yearRange ตัวเลือกนี้ระบุข้อ จำกัด เกี่ยวกับซึ่งปีที่ผ่านมาจะแสดงในแบบเลื่อนลงในแบบฟอร์มจาก:เมื่อchangeYearเป็นจริง ค่าอาจเป็นค่าสัมบูรณ์หรือสัมพัทธ์ (ตัวอย่างเช่น 2005: +2 สำหรับปี 2005 ถึง 2 ปีนับจากนี้) คำนำหน้า c สามารถใช้เพื่อให้ค่าสัมพัทธ์หักล้างจากปีที่เลือกแทนที่จะเป็นปีปัจจุบัน (ตัวอย่าง: c-2: c + 3) โดยค่าเริ่มต้นคือc-10:c+10. Syntax `$(".selector").datepicker( { yearRange: "2002:2012" } );`
50	yearSuffix ตัวเลือกนี้จะแสดงข้อความเพิ่มเติมหลังปีในส่วนหัว datepicker โดยค่าเริ่มต้นคือ"". Option - yearSuffix ตัวเลือกนี้จะแสดงข้อความเพิ่มเติมหลังปีในส่วนหัว datepicker โดยค่าเริ่มต้นคือ"". Syntax `$(".selector").datepicker( { yearSuffix: "CE" } );`

ส่วนต่อไปนี้จะแสดงตัวอย่างการทำงานของฟังก์ชัน datepicker

ฟังก์ชันเริ่มต้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวอย่างง่ายๆของฟังก์ชัน datepicker ที่ไม่ส่งพารามิเตอร์ไปยังไฟล์ datepicker() วิธี.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML datepickerexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

Datepicker แบบอินไลน์

ตัวอย่างต่อไปนี้แสดงตัวอย่างง่ายๆของฟังก์ชัน datepicker แบบอินไลน์

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

ในตัวอย่างด้านบนเราใช้องค์ประกอบ <div> เพื่อรับเครื่องมือเลือกวันที่แบบอินไลน์

การใช้ appendText, dateFormat, altField และ altFormat

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือกที่สำคัญสามตัวเลือก (a) appendText (b) dateFormat (c) altField และ (d) altFormat ในฟังก์ชัน datepicker ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>

ในตัวอย่างข้างต้นคุณจะเห็นว่ารูปแบบวันที่สำหรับการป้อนข้อมูลแรกที่ถูกตั้งค่าเป็นyy-MM-DD หากคุณเลือกวันที่จาก datepicker วันที่เดียวกันจะแสดงในช่องป้อนข้อมูลที่สองซึ่งรูปแบบวันที่ถูกตั้งค่าเป็น "DD, d MM, yy"

ใช้ beforeShowDay

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือก beforeShowDay ในฟังก์ชัน datepicker ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>

ในตัวอย่างข้างต้นวันอาทิตย์และวันเสาร์ถูกปิดใช้งาน

การใช้ showOn, buttonImage และ buttonImageOnly

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือกที่สำคัญสามตัวเลือก (a) showOn (b) buttonImage และ (c) buttonImageOnly ในฟังก์ชัน datepicker ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>

ในตัวอย่างด้านบนไอคอนจะปรากฏขึ้นซึ่งจำเป็นต้องคลิกเพื่อเปิด datepicker

การใช้ defaultDate, dayNamesMin และระยะเวลา

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือกที่สำคัญสามตัวเลือก (a) dayNamesMin (b) dayNamesMin และ (c) duration ในฟังก์ชัน datepicker ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>

ในตัวอย่างข้างต้นชื่อของวันที่มีการเปลี่ยนแปลงการใช้dayNamesMin คุณยังสามารถดูวันที่ตั้งค่าเริ่มต้นได้

การใช้ prevText, nextText, showOtherMonths และ selectOtherMonths

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือกที่สำคัญสามตัวเลือก (a) prevText (b) nextText (c) showOtherMonths และ (d) selectOtherMonths ในฟังก์ชัน datepicker ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      
      <script>
         $(function() { $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>

ในตัวอย่างข้างต้นลิงก์ก่อนหน้าและลิงก์มีคำอธิบายภาพ หากคุณคลิกที่องค์ประกอบ datepicker จะเปิดขึ้น ตอนนี้อยู่ใน datepicker แรกเดือนวันที่ปิดการใช้งานอื่น ๆ ที่เป็น selectOtherMonths เป็นชุดที่เป็นเท็จ ในวันที่ตัวเลือกที่สองสำหรับการป้อนข้อมูลประเภทสอง selectOtherMonths ถูกตั้งค่าให้เป็นจริง

การใช้ changeMonth, changeYear และ numberOfMonths

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือกที่สำคัญสามตัวเลือก (a) changeMonth (b) changeYear และ (c) numberOfMonths ในฟังก์ชัน datepicker ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>

ในตัวอย่างด้านบนคุณจะเห็นเมนูแบบเลื่อนลงสำหรับช่องเดือนและปี และเรากำลังแสดง 4 เดือนในโครงสร้างอาร์เรย์ของ [2,2]

การใช้ showWeek, yearSuffix และ showAnim

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือกที่สำคัญสามตัวเลือก (a) showWeek (b) yearSuffix และ (c) showAnim ในฟังก์ชัน datepicker ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>

ในตัวอย่างข้างต้นจะเห็นได้ว่าตัวเลขสัปดาห์ที่จะปรากฏบนด้านซ้ายของ datepicker เป็นshowWeekถูกตั้งค่าให้เป็นจริง ปีมีส่วนต่อท้ายเป็น "-CE"

$ (ตัวเลือกบริบท) .datepicker ("action", [params]) Method

datepicker (การกระทำ params)วิธีการสามารถดำเนินการดำเนินการในปฏิทินเช่นเช่นการเลือกวันที่ใหม่ action ถูกระบุเป็นสตริงในอาร์กิวเมนต์แรกและทางเลือกหนึ่งหรือมากกว่า params สามารถให้ตามการกระทำที่กำหนด

โดยพื้นฐานแล้วการกระทำที่นี่ไม่มีอะไรนอกจากเป็นวิธี jQuery ที่เราสามารถใช้ในรูปแบบของสตริง

ไวยากรณ์

$(selector, context).datepicker ("action", [params]);

ตารางต่อไปนี้แสดงการดำเนินการสำหรับวิธีนี้ -


$(".selector").datepicker("destroy");
$(".selector").datepicker( "dialog", "10/12/2012" );
$(".selector").datepicker("getDate");
$(".selector").datepicker("hide");
$(".selector").datepicker("isDisabled");
$(".selector").datepicker( "option", "disabled");
var options = $( ".selector" ).datepicker( "option" );
$(".selector").datepicker( "option", "disabled", true );
$(".selector").datepicker("option", { disabled: true });
$(".selector").datepicker("refresh");
$(".selector").datepicker("setDate", "10/12/2012");
$(".selector").datepicker("show");
$(".selector").datepicker("widget");

ซีเนียร์	การดำเนินการและคำอธิบาย
1	ทำลาย() การดำเนินการนี้จะลบฟังก์ชัน datepicker ทั้งหมด สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - destroy() การดำเนินการนี้จะลบฟังก์ชัน datepicker ทั้งหมด สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").datepicker("destroy");`
2	โต้ตอบ (วันที่ [, onSelect] [, การตั้งค่า] [, ตำแหน่ง]) การดำเนินการนี้แสดง datepicker ในกล่องโต้ตอบ jQuery UI Action - dialog( date [, onSelect ] [, settings ] [, pos ] ) การดำเนินการนี้แสดง datepicker ในกล่องโต้ตอบ jQuery UI ที่ไหน - วันที่คือวันที่เริ่มต้น onSelectเป็นฟังก์ชันโทรกลับเมื่อเลือกวันที่ ฟังก์ชันรับข้อความวันที่และอินสแตนซ์ตัวเลือกวันที่เป็นพารามิเตอร์ settingsคือการตั้งค่าใหม่สำหรับตัวเลือกวันที่ posคือตำแหน่งด้านบน / ซ้ายของกล่องโต้ตอบเป็น [x, y] หรือ MouseEvent ที่มีพิกัด หากไม่ได้ระบุกล่องโต้ตอบจะอยู่ตรงกลางหน้าจอ Syntax `$(".selector").datepicker( "dialog", "10/12/2012" );`
3	getDate () การดำเนินการนี้จะส่งคืนวันที่ที่ตรงกับวันที่ที่เลือก วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - getDate() การดำเนินการนี้จะส่งคืนวันที่ที่ตรงกับวันที่ที่เลือก วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").datepicker("getDate");`
4	ซ่อน () การดำเนินการนี้จะปิดตัวเลือกวันที่ที่เปิดไว้ก่อนหน้านี้ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - hide() การดำเนินการนี้จะปิดตัวเลือกวันที่ที่เปิดไว้ก่อนหน้านี้ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").datepicker("hide");`
5	ถูกปิดใช้งาน() การดำเนินการนี้จะตรวจสอบว่า funcitonality ตัวเลือกวันที่ถูกปิดใช้งานหรือไม่ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - isDisabled() การดำเนินการนี้จะตรวจสอบว่า funcitonality ตัวเลือกวันที่ถูกปิดใช้งานหรือไม่ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").datepicker("isDisabled");`
6	ตัวเลือก (optionName) การดำเนินการนี้จะเรียกค่าเชื่อมโยงกับที่ระบุOptionName Action - option( optionName ) การดำเนินการนี้จะเรียกค่าเชื่อมโยงกับที่ระบุOptionName Syntax `$(".selector").datepicker( "option", "disabled");`
7	ตัวเลือก () การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชอ็อพชัน datepicker ปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - option() การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชอ็อพชัน datepicker ปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `var options = $( ".selector" ).datepicker( "option" );`
8	ตัวเลือก (optionName ค่า) การดำเนินการนี้ตั้งค่าของอ็อพชัน datepicker ที่เชื่อมโยงกับ optionName ที่ระบุ Action - option( optionName, value ) การดำเนินการนี้ตั้งค่าของอ็อพชัน datepicker ที่เชื่อมโยงกับ optionName ที่ระบุ Syntax `$(".selector").datepicker( "option", "disabled", true );`
9	option (ตัวเลือก) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งรายการสำหรับ datepicker Action - option( options ) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งรายการสำหรับ datepicker Syntax `$(".selector").datepicker("option", { disabled: true });`
10	รีเฟรช () การดำเนินการนี้จะวาดตัวเลือกวันที่ใหม่หลังจากทำการแก้ไขภายนอกบางอย่าง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - refresh() การดำเนินการนี้จะวาดตัวเลือกวันที่ใหม่หลังจากทำการแก้ไขภายนอกบางอย่าง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").datepicker("refresh");`
11	setDate (วันที่) การดำเนินการนี้ตั้งค่าวันที่ที่ระบุเป็นวันที่ปัจจุบันของ datepicker Action - setDate() การดำเนินการนี้ตั้งค่าวันที่ที่ระบุเป็นวันที่ปัจจุบันของ datepicker Syntax `$(".selector").datepicker("setDate", "10/12/2012");`
12	แสดง() การดำเนินการนี้จะเปิดตัวเลือกวันที่ หากใส่ datepicker เข้ากับอินพุตอินพุตจะต้องมองเห็นได้เพื่อให้ datepicker แสดง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - show() การดำเนินการนี้จะเปิดตัวเลือกวันที่ หากใส่ datepicker เข้ากับอินพุตอินพุตจะต้องมองเห็นได้เพื่อให้ datepicker แสดง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").datepicker("show");`
13	วิดเจ็ต () การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มี datepicker Action - widget() การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มี datepicker Syntax `$(".selector").datepicker("widget");`

ตัวอย่างต่อไปนี้แสดงการใช้การดำเนินการบางอย่างที่ระบุไว้ในตารางด้านบน

การใช้ setDate () การกระทำ

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของการกระทำsetDate

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML datepickerexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -

การใช้การแสดง () การกระทำ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของการกระทำที่แสดง

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker(); $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

การจัดการเหตุการณ์ในองค์ประกอบ datepicker

ไม่มีวิธีการจัดงาน datepicker ณ ตอนนี้!