jQuery UI API - สมาชิกตัวเลือกวัน (datepicker Widget)

หมวดหมู่

วิดเจ็ต (วิดเจ็ต)

การใช้

คำอธิบาย: จากช่องป๊อปอัพหรือปฏิทินแบบอินไลน์เพื่อเลือกวันที่

ใหม่เวอร์ชัน: 1.0

jQuery UI วันที่เลือก (datepicker) เลือกวันที่เพื่อเพิ่มความสูงไปยังหน้าการกำหนดค่า plug-in คุณสามารถปรับแต่งรูปแบบวันที่และภาษาที่ จำกัด ช่วงวันที่เลือก, เพิ่มปุ่มและตัวเลือกนำทางอื่น ๆ

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

ปฏิสัมพันธ์แป้นพิมพ์

เมื่อเลือกวันที่จะเปิดแป้นพิมพ์คำสั่งต่อไปนี้:

• PAGE UP: ย้ายกับเดือนก่อนหน้า
• PAGE DOWN: เคลื่อนย้ายไปในเดือนถัดไป
• CTRL + PAGE UP: ย้ายปีก่อน
• CTRL + PAGE DOWN: เคลื่อนย้ายไปในปีถัดไป
• CTRL + HOME: ย้ายเดือนปัจจุบัน ถ้าเลือกวันที่จะมีการเปิดปิด
• CTRL + ซ้าย: ย้ายไปวัน
• CTRL + ขวา: ย้ายไปในวันถัดไป
• CTRL + UP: ย้ายกับสัปดาห์ก่อนหน้า
• CTRL + ลง: ย้ายไปในสัปดาห์หน้า
• enter: เลือกวันโฟกัส
• CTRL + End: ปิดตัวเลือกวันและล้างวัน
• หนี: ปิดตัวเลือกวันโดยไม่มีทางเลือกใด

คุณสมบัติที่มีประโยชน์

$ .datepicker.setDefaults (ตั้งค่า)

เปลี่ยนการตั้งค่าเริ่มต้นสำหรับตัวเลือกวันทั้งหมด

ใช้ option() วิธีการที่จะเปลี่ยนการตั้งค่าสำหรับแต่ละกรณี

การตั้งค่าทั้งหมดเลือกวันที่หรือคลิกที่ไอคอนเปิดเมื่อโฟกัส

$ .datepicker.setDefaults ({
  showOn: "ทั้ง"
  buttonImageOnly: จริง
  buttonImage: "calendar.gif"
  buttonText: "ปฏิทิน"
});

ตั้งค่าตัวเลือกวันที่ทั้งหมดมีข้อความภาษาฝรั่งเศส

$ .datepicker.setDefaults ($ .datepicker.regional [ "Fr"]);

$ .datepicker.formatDate (รูปแบบ, วันที่, การตั้งค่า)

การจัดรูปแบบวันที่จะค่าสตริงที่มีรูปแบบที่กำหนด

รูปแบบอาจจะรวมกันดังต่อไปนี้:

• D - วันของเดือน (ไม่มีเลขศูนย์นำ)
• DD - วันของเดือน (สองหลัก)
• o - วันของปี (ไม่มีเลขศูนย์นำ)
• OO - วันของปี (ตัวเลขสามหลัก)
• วันชื่อสั้น - D
• วันชื่อยาว - DD
• M - สองสามเดือนแรกของปี (ไม่มีเลขศูนย์นำ)
• มม - สองสามเดือนแรกของปี (ตัวเลขสองหลัก)
• ชื่อสั้นของเดือน - M
• ชื่อเดือนยาว - เอ็มเอ็ม
• Y - ปี (สองหลัก)
• yy - ปี (สี่หลัก)
• @ - เวลา Unix (MS ตั้งแต่ 01/01/1970)
• - ของ Windows Watch (เวลา 100ns ตั้งแต่ 01/01/0001)
• ' ... ' - ข้อความ
• '' - ราคาเดียว
• อื่น ๆ - ข้อความ

นอกจากนี้ยังมีบาง $.datepicker รูปแบบวันที่มาตรฐานที่กำหนดไว้ล่วงหน้า:

• ATOM - 'yy-MM-DD' (และ RFC 3339 / ISO 8601 เดียวกัน)
• Cookie - 'D, M DD yy'
• ISO_8601 - 'yy-MM-DD'
• RFC_822 - 'D, D M Y' (โปรดดู RFC 822)
• RFC_850 - 'DD, DD-ของฉัน' (โปรดดู RFC 850)
• RFC_1036 - 'D, D M Y' (โปรดดู RFC 1036)
• RFC_1123 - 'D, D M yy' (โปรดดู RFC 1123)
• RFC_2822 - 'D, D M yy' (โปรดดู RFC 2822)
• ข่าว RSS - 'D, D M Y' (เช่นเดียวกับ RFC 822)
• เห็บ - ''
• ลงเวลา - '@'
• W3C - 'yy-MM-DD' (เช่นเดียวกับมาตรฐาน ISO 8601)

ISO รูปแบบการแสดงวันที่ ผลิต "2007/01/26."

$ .datepicker.formatDate ( "Yy-MM-DD" วันที่ใหม่ (2007, 1 - 1, 26));

ฝรั่งเศสจะขยายรูปแบบการแสดงวันที่ ผลิต "Samedi, Juillet 14, 2007"

$ .datepicker.formatDate ( "DD, MM D, yy" วันที่ใหม่ (2007, 7-1, 14), {
  dayNamesShort: $ .datepicker.regional [ "FR"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "FR"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "FR"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "FR"] .monthNames
});

$ .datepicker.parseDate (รูปแบบค่าการตั้งค่า)

สารสกัดจากค่าสตริงจากรูปแบบวันที่ที่ระบุ

รูปแบบอาจจะรวมกันดังต่อไปนี้:

• D - วันของเดือน (ไม่มีเลขศูนย์นำ)
• DD - วันของเดือน (สองหลัก)
• o - วันของปี (ไม่มีเลขศูนย์นำ)
• OO - วันของปี (ตัวเลขสามหลัก)
• D - ชื่อสั้นของสัปดาห์
• DD - สัปดาห์ที่ยาวนานชื่อไม่กี่
• M - สองสามเดือนแรกของปี (ไม่มีเลขศูนย์นำ)
• มม - สองสามเดือนแรกของปี (ตัวเลขสองหลัก)
• ชื่อสั้นของเดือน - M
• ชื่อเดือนยาว - เอ็มเอ็ม
• Y - ปี (สองหลัก)
• yy - ปี (สี่หลัก)
• @ - เวลา Unix (MS ตั้งแต่ 01/01/1970)
• - ของ Windows Watch (เวลา 100ns ตั้งแต่ 01/01/0001)
• ' ... ' - ข้อความ
• '' - ราคาเดียว
• อื่น ๆ - ข้อความ

ยกเว้นบางคนอาจจะโยน:

• 'ข้อโต้แย้งที่ไม่ถูกต้อง' - หรือถ้ารูปแบบเป็นโมฆะข้อยกเว้นนี้จะถูกโยนทิ้ง
• หายไปจำนวนหนึ่งที่ตำแหน่ง NN '- ถ้ารูปแบบที่จะแสดงค่าที่ไม่พบข้อยกเว้นนี้จะถูกโยนทิ้ง
• 'ไม่ทราบชื่อที่ตำแหน่ง NN' - ถ้ารูปไม่พบสัปดาห์ที่ผ่านมาหรือชื่อไม่กี่เดือนชื่อข้อยกเว้นนี้จะถูกโยนทิ้ง
• 'ที่ไม่คาดคิดที่แท้จริงที่ตำแหน่ง NN' - ถ้าค่าของรูปแบบข้อความไม่พบข้อยกเว้นนี้จะถูกโยนทิ้ง
• 'วันที่ไม่ถูกต้อง' - วันที่ไม่ถูกต้องถ้าข้อยกเว้นนี้จะถูกโยนทิ้งเช่น '31 / 02/2007 '

สารสกัดจากวันที่ในรูปแบบแสง ISO

$ .datepicker.parseDate ( "Yy-MM-DD", "2007/01/26");

แยกรูปแบบวันที่ว่าฝรั่งเศสขยาย

$ .datepicker.parseDate ( "DD, MM D, yy", "Samedi, Juillet 14, 2007" {
  shortYearCuroff: 20,
  dayNamesShort: $ .datepicker.regional [ "FR"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "FR"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "FR"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "FR"] .monthNames
});

$ .datepicker.iso8601Week (Date)

การกำหนดวันที่ที่ระบุในไม่กี่สัปดาห์แรกของปี: 1-53

ฟังก์ชั่นนี้จะใช้คำนิยามมาตรฐาน ISO 8601 หนึ่งสัปดาห์: หนึ่งสัปดาห์เริ่มต้นในวันจันทร์สัปดาห์แรกของแต่ละปีมี 4 มกราคม ซึ่งหมายความว่าในปีก่อนหน้านี้อาจรวมถึงสามวันในสัปดาห์แรกของปีปีอาจมีถึงสามวันในสัปดาห์สุดท้ายของปีที่ผ่านมา

ฟังก์ชั่นนี้เป็น calculateWeek เริ่มต้นใช้งาน

หาวันในไม่กี่สัปดาห์แรกของปีนี้

$ .datepicker.iso8601Week (วันที่ใหม่ (2007, 1 - 1, 26));

$ .datepicker.noWeekends

การตั้งค่าฟังก์ชั่น beforeShowDay เช่นการป้องกันการเลือกของวันหยุดสุดสัปดาห์

เราสามารถ beforeShowDay ให้ตัวเลือก noWeekends() ฟังก์ชั่นที่ใช้ในการคำนวณทุกคนที่ทำงานเพื่อให้ความ true / false อาร์เรย์ของค่าใช้เพื่อระบุวันที่จะเลือก

ตั้ง DatePicker ให้วันหยุดสุดสัปดาห์เป็นตัวเลือก

$ ( "#datepicker") .datepicker ({
  beforeShowDay: $ .datepicker.noWeekends
});

จำกัด

เลือกวันที่จัดไว้ให้เพื่อตอบสนองภาษาที่แตกต่างกันและรูปแบบวันที่ได้รับการสนับสนุนโดยเนื้อหาเป็นภาษาท้องถิ่น แต่ละรหัสภาษาที่แปลเป็นภาษาท้องถิ่นที่มีอยู่ในท้ายหลังชื่อของไฟล์ตัวอย่างเช่นฝรั่งเศส jquery.ui.datepicker-fr.js แปลไฟล์ที่จำเป็นต้องได้รับการรวมอยู่ในด้านหลังของรหัสวันที่ตัวเลือกหลัก แต่ละไฟล์ที่มีการแปลที่จะเพิ่มในชุดของตัวเองชุดแปลใช้ได้ทุกกรณีโดยอัตโนมัติใช้การตั้งค่าเหล่านี้เป็นค่าเริ่มต้น

$.datepicker.regional คุณสมบัติเก็บอาร์เรย์ของภาษาท้องถิ่นเป็นรหัสภาษาที่เป็นก่อนที่ก่อนเริ่มต้นคือ "" แสดงในภาษาอังกฤษ แต่ละรายการเป็นวัตถุที่มีคุณสมบัติต่อไปนี้: closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear และ yearSuffix

คุณสามารถเรียกคืนรหัสการแปลค่าเริ่มต้นดังต่อไปนี้

คุณสามารถแทนที่เลือกวันที่ไปยังสถานที่โดยเฉพาะรหัสต่อไปนี้:

ชุดรูปแบบ

สมาชิกเลือกวันที่ (datepicker Widget) โดยใช้ กรอบ jQuery UI CSS เพื่อกำหนดรูปลักษณ์และความรู้สึกของสไตล์ หากคุณจำเป็นต้องใช้ตัวเลือกวันที่ที่ระบุสไตล์คุณสามารถใช้ชื่อคลาส CSS ต่อไปนี้:

• ui-datepicker ที่: วันที่เลือกภาชนะนอก ถ้าเลือกวันที่จะอินไลน์องค์ประกอบที่มีให้นอกจากนี้ยังมี ui-datepicker-inline ชั้น ถ้า isRTL ตัวเลือกองค์ประกอบนอกจากนี้จะมี ui-datepicker-rtl ชั้น
  • ui-datepicker-header ที่: วันที่ภาชนะหัวตัวเลือก
    • ui-datepicker-prev การควบคุมจะใช้ในการเลือกเดือนก่อนหน้า
    • ui-datepicker-next การควบคุมจะใช้ในการเลือกเดือนถัดไป
    • ui-datepicker-title ที่: วันที่ชื่อฟอร์คมีเดือนและปีของภาชนะ
      • ui-datepicker-month : ข้อความแสดงผลเดือนถ้าคุณตั้ง changeMonth ตัวเลือก <select> องค์ประกอบ
      • ui-datepicker-year : ข้อความในหน้าจอถ้าคุณตั้ง changeYear ตัวเลือก <select> องค์ประกอบ
  • ui-datepicker-calendar : มีรูปแบบปฏิทิน
    • ui-datepicker-week-end เซลล์วันหยุดสุดสัปดาห์ : เซลล์ที่มีวันหยุดสุดสัปดาห์
    • ui-datepicker-other-month : สถานที่ในเดือน แต่ไม่ได้เป็นเดือนปัจจุบันจำนวนวันเซลล์
    • ui-datepicker-unselectable : ผู้ใช้ไม่สามารถเลือกเซลล์
    • ui-datepicker-current-day : เลือกวันที่เซลล์
    • ui-datepicker-today : เซลล์วันที่วันนี้
  • ui-datepicker-buttonpane : เมื่อตั้ง showButtonPanel ใช้แผงปุ่ม (buttonpane) เมื่อตัวเลือก
    • ui-datepicker-current : เลือกปุ่มสำหรับวันที่วันนี้

หาก numberOfMonths ตัวเลือกในการแสดงผลหลายเดือนใช้บางชั้นพิเศษ:

• ui-datepicker-multi : เดือนส่วนวันที่ขโมยของชั้นนอกสุดของภาชนะ องค์ประกอบนี้จะปรากฏขึ้นตามจำนวนของเดือนที่มีการเพิ่มเติม ui-datepicker-multi-2 , ui-datepicker-multi-3 หรือ ui-datepicker-multi-4 ชื่อชั้น
  • ui-datepicker-group : การจัดกลุ่มที่อยู่ในตัวเลือกเดียว องค์ประกอบนี้ขึ้นอยู่กับตำแหน่งในแพ็คเก็ตที่มีการเพิ่มเติม ui-datepicker-group-first , ui-datepicker-group-middle หรือ ui-datepicker-group-last , ชื่อชั้น

วางใจ

• UI หลัก (UI หลัก)
• ผลกระทบหลัก (หลักผลกระทบ) (ไม่จำเป็นเมื่อและ showAnim เมื่อใช้ร่วมกับตัวเลือก)

ข้อมูลเพิ่มเติม

• ส่วนที่ต้องมีการทำงาน CSS มิฉะนั้นมันจะไม่ทำงาน ถ้าคุณสร้างธีมที่กำหนดเองใช้วิดเจ็ตที่ระบุ CSS แฟ้มเป็นจุดเริ่มต้น
• องค์ประกอบในการเขียนโปรแกรมจัดการค่าขององค์ประกอบเพื่อที่ว่าเมื่อค่าของการเปลี่ยนแปลงองค์ประกอบไม่ได้เรียกพื้นเมือง change เหตุการณ์
• มันไม่สนับสนุน <input type="date"> สร้างตัวเลือกวันที่บนเพราะมันจะทำให้เกิดความขัดแย้งกับตัวเลือก UI ท้องถิ่น

ตัวอย่าง

ง่าย jQuery UI ตัวเลือกวัน (datepicker)

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> สมาชิกตัวเลือกวัน (datepicker Widget) สาธิต </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ head>
<body>
 
<div id = "datepicker"> </ div>
 
<script>
$ ( "#datepicker") .datepicker ();
</ script>
 
</ body>
</ html>

ดูการสาธิต