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..... });

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

ซีเนียร์ ตัวเลือกและคำอธิบาย
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>

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

ในตัวอย่างด้านบนเราใช้องค์ประกอบ <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>

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

ในตัวอย่างข้างต้นคุณจะเห็นว่ารูปแบบวันที่สำหรับการป้อนข้อมูลแรกที่ถูกตั้งค่าเป็น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>

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

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

การใช้ 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>

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

ในตัวอย่างด้านบนไอคอนจะปรากฏขึ้นซึ่งจำเป็นต้องคลิกเพื่อเปิด 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>

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

ในตัวอย่างข้างต้นชื่อของวันที่มีการเปลี่ยนแปลงการใช้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>

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

ในตัวอย่างข้างต้นลิงก์ก่อนหน้าและลิงก์มีคำอธิบายภาพ หากคุณคลิกที่องค์ประกอบ 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>

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

ในตัวอย่างด้านบนคุณจะเห็นเมนูแบบเลื่อนลงสำหรับช่องเดือนและปี และเรากำลังแสดง 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>

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

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

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

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

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

ไวยากรณ์

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

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

ซีเนียร์ การดำเนินการและคำอธิบาย
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>

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

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

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