ตัวอย่างเช่น jQuery UI - เลือกวันที่ (datepicker)
จากช่องป๊อปอัพหรือปฏิทินแบบอินไลน์เพื่อเลือกวันที่
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับส่วนประกอบ datepicker ให้ดูที่เอกสาร API สมาชิกตัวเลือกวัน (คน datepicker Widget ที่)
ฟังก์ชั่นเริ่มต้น
เลือกวันที่ (datepicker) ถูกผูกไว้กับรูปแบบมาตรฐานในช่องใส่ ย้ายโฟกัสกับการป้อนข้อมูล (หรือใช้คีย์แท็บคลิก) เพื่อเปิดปฏิทินแบบโต้ตอบบนซ้อนทับขนาดเล็ก เลือกวันที่ให้คลิกที่ใดก็ได้บนหน้าเว็บ (กล่องใส่สูญเสียโฟกัส) หรือคลิกปุ่ม Esc เพื่อปิด หากคุณเลือกวันที่ความคิดเห็นจะปรากฏเป็นมูลค่าของการป้อนข้อมูล
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - ฟังก์ชั่นเริ่มต้น </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ();
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> </ p>
</ body>
</ html>
นิเมชั่น
ใช้ภาพเคลื่อนไหวที่แตกต่างกันเมื่อคุณเปิดหรือปิด datepicker เลือกภาพยนตร์จากกล่องแบบหล่นลงแล้วคลิกในช่องเพื่อดูผลของมัน คุณสามารถใช้หนึ่งในสามของนิเมชั่นมาตรฐานเทคนิคพิเศษใด ๆ หรือใช้ใด ๆ ของ UI
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - อะนิเมะ </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ();
$ ( "#anim") .change (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ( "ตัวเลือก", "showAnim", $ (นี้) .val ());
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker" size = "30"> </ p>
<p> นิเมชั่น: ฟรี
<เลือก id = "Anim">
<option value = "แสดง"> แสดง (เริ่มต้น) </ option>
<value option = "slideDown"> สไลด์ </ option>
<value option = "fadeIn"> Fade </ option>
<value option = "ตาบอด"> (ผลกระทบผ้าม่าน UI) คนตาบอด </ option>
<option value = "ตีกลับ"> ตีกลับ (ผลกระทบการฟื้นตัว UI) </ option>
<option value = "คลิป"> คลิป (ผลกระทบการแก้ไข UI) </ option>
<value option = "วาง"> Drop (UI ที่ดินผลกระทบ) </ option>
<value option = "พับ"> เท่า (ผลกระทบ UI พับ) </ option>
<option value = "สไลด์"> สไลด์ (UI เลื่อนผล) </ option>
<value option = ""> ไม่ </ option>
</ เลือก>
</ p>
</ body>
</ html>
เดือนอื่น ๆ ของวันที่
datepicker สามารถแสดงวันเดือนเพิ่มเติมวันที่เหล่านี้อาจจะกำหนดให้เป็นตัวเลือก
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - ในเดือนอื่น ๆ ของวันที่ </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ({
showOtherMonths: จริง
selectOtherMonths: จริง
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> </ p>
</ body>
</ html>
แถบปุ่มแสดงผล
โดยบูลี showButtonPanel สำหรับการเลือกของการแสดงวันที่วันนี้ปุ่ม "วันนี้" เพื่อปิดปฏิทินแสดง "เสร็จ" ตัวเลือกปุ่ม โดยค่าเริ่มต้นเมื่อมีการแสดงแถบปุ่มจะช่วยให้แต่ละปุ่ม แต่ปุ่มสามารถปิดได้ผ่านตัวเลือกอื่น ๆ ข้อความของปุ่มที่สามารถปรับแต่ง
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - จอแสดงผลแถบปุ่ม </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ({
showButtonPanel: จริง
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> </ p>
</ body>
</ html>
จอแสดงผลแบบอินไลน์
datepicker ซ้อนในการแสดงผลหน้ามากกว่าในชั้นปก เพียงแค่โทร .datepicker div () สามารถแทนการเรียกร้องให้มีการป้อนข้อมูล
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI ตัวเลือกวัน (datepicker) - จอแสดงผลแบบอินไลน์ </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ();
});
</ script>
</ head>
<body>
วันที่: <div id = "datepicker"> </ div>
</ body>
</ html>
แสดงเดือนและปีที่เมนู
หล่นลงกล่องแสดงเดือนและปีแทนที่จะเป็นจอแสดงผลแบบคงที่ของชื่อเดือน / ปีนั้นมันเป็นเรื่องง่ายที่จะครอบคลุมช่วงใหญ่ของเวลาในการนำทาง เพิ่มค่าบูลีน changeMonth และ changeYear ตัวเลือก
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - จอแสดงผลเดือน & amp; เมนูปี </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ({
changeMonth: จริง
changeYear: จริง
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> </ p>
</ body>
</ html>
แสดงผลหลายเดือน
การตั้งค่า numberOfMonths ตัวเลือกที่เป็นจำนวนเต็ม 2 หรือจำนวนเต็มมากกว่า 2 จะแสดงบน datepicker หลายเดือน
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - จอแสดงผลหลายเดือน </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ({
NUMBEROFMONTHS: 3,
showButtonPanel: จริง
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> </ p>
</ body>
</ html>
รูปแบบวันที่
ในความหลากหลายของวิธีการที่จะแสดงความคิดเห็นวันที่ เลือกรูปแบบวันที่จากกล่องแบบหล่นลงแล้วคลิกขวาและเลือกวันที่ในกล่องใส่ให้ดูรูปแบบวันที่ของการแสดงผลที่เลือก
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - รูปแบบวันที่ </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ();
$ ( "#format") .change (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ( "ตัวเลือก", "DATEFORMAT", $ (นี้) .val ());
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker" size = "30"> </ p>
<p> ตัวเลือกรูปแบบ: วิธีการ
<เลือก id = "รูปแบบ">
<option value = "dd / mm / yy"> เริ่มต้น - dd / mm / yy </ option>
<option value = "yy-MM-DD"> ISO 8601 - yy-MM-DD </ option>
<value option = "D M, Y"> สั้น - D M, Y </ option>
<value option = "D MM, y"> ขนาดกลาง - D MM, y </ option>
<option value = "DD, D MM, yy"> Full - DD, D MM, yy </ option>
<option value = "& apos; Day & apos; apos D &; ของเว็บไซต์นั้น MM & apos; ในปี & apos; yy"> ด้วยข้อความ - 'วัน' D 'ของ' เอ็มเอ็ม 'ปี' yy </ option>
</ เลือก>
</ p>
</ body>
</ html>
ไอคอนทริกเกอร์
คลิกที่ไอคอนที่อยู่ติดกับกล่องใส่เพื่อแสดง datepicker การตั้งค่าเปิด datepicker (พฤติกรรมเริ่มต้น) ที่โฟกัสหรือคลิกที่ไอคอนเพื่อเปิดหรือเปิด / รับโฟกัสเมื่อคลิกที่ไอคอน
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - ไอคอน Trigger </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ({
showOn: "ปุ่ม"
buttonImage: "images / calendar.gif"
buttonImageOnly: จริง
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> </ p>
</ body>
</ html>
ปฏิทินในภาษาท้องถิ่น
การแปลภาษา datepicker ปฏิทินและรูปแบบ (เริ่มต้นคืออังกฤษ / รูปแบบตะวันตก) datepicker มีการสนับสนุนในตัวสำหรับภาษาที่อ่านจากขวาไปซ้ายเช่นภาษาอาหรับและภาษาฮิบรู
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - ปฏิทินที่มีการแปล </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
<script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
<script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
<script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ($ .datepicker.regional [ "Fr"]);
$ ( "#locale") .change (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ( "ตัวเลือก"
$ .datepicker.regional [$ (นี้) .val ()]);
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> & nbsp;
<เลือก id = "สถานที่">
<option value = "AR"> อาหรับ (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
<option value = "zh-TW"> ภาษาจีนแบบดั้งเดิม (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
<value option = ""> ภาษาอังกฤษ </ option>
<option value = "FR" เลือก = "เลือก"> ฝรั่งเศส (Fran & ccedil; AIS) </ option>
<value option = "เขา"> ภาษาฮิบรู (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
</ เลือก> </ p>
</ body>
</ html>
เติมกล่องใส่อีก
ใช้ altField และ altFormat ตัวเลือกเมื่อใดก็ตามที่เลือกวันที่วันที่จะเต็มไปด้วยรูปแบบบางอย่างในกล่องใส่อีก เมื่อฟังก์ชั่นนี้โดยวันที่ประมวลผลต่อไปยังคอมพิวเตอร์ที่เป็นมิตรกับผู้ใช้จะนำเสนอกับวันที่ใช้งานง่าย
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - เติมกล่องใส่อีก </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ({
altField: "#alternate"
altFormat: "DD, D MM, yy"
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> & nbsp; <ชนิดของการป้อนข้อมูล = "text" id = "สำรอง" size = "30"> </ p>
</ body>
</ html>
จำกัด ช่วงวันที่
โดย minDate และ maxDate ตัวเลือก จำกัด ช่วงวันที่เลือก การตั้งค่าเริ่มต้นและสิ้นสุดวันนับจากวันที่เกิดขึ้นจริง (วันที่ใหม่ (2009, 1 - 1, 26)) หรือสตริงของค่าชดเชยของวันนี้ (-20) หรือเป็นวงจรและหน่วย (+ 1M + 10D ') หากการตั้งค่าสตริงใช้ 'D' วันโดยใช้ 'w' หมายถึงสัปดาห์ที่ผ่านมาโดยใช้ 'M' สำหรับเดือนโดยใช้ 'Y' เป็นปีที่
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - จำกัด ช่วงวันที่ </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ({MinDate: -20, maxDate: "+ 1M + 10D"});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> </ p>
</ body>
</ html>
เลือกช่วงวันที่
เลือกช่วงวันที่ที่จะค้นหา
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - เลือกช่วงวันที่ </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#from") .datepicker ({
defaultDate: "+ 1W"
changeMonth: จริง
NUMBEROFMONTHS: 3,
OnClose: ฟังก์ชั่น (SelectedDate) {
$ ( "#to") .datepicker ( "ตัวเลือก", "minDate" SelectedDate);
}
});
$ ( "#to") .datepicker ({
defaultDate: "+ 1W"
changeMonth: จริง
NUMBEROFMONTHS: 3,
OnClose: ฟังก์ชั่น (SelectedDate) {
$ ( "#from") .datepicker ( "ตัวเลือก", "maxDate" SelectedDate);
}
});
});
</ script>
</ head>
<body>
<label สำหรับ = "จาก"> จาก </ label>
<ประเภทขาเข้า = "text" id = "จาก" name = "จาก">
<label สำหรับ = "ถึง"> เพื่อ </ label>
<ประเภทขาเข้า = "text" id = "เป็น" name = "เพื่อ">
</ body>
</ html>
สัปดาห์ของการแสดงปี
datepicker สามารถแสดงไม่กี่สัปดาห์แรกของปีนี้ เริ่มต้นที่มีการคำนวณตามมาตรฐาน ISO 8601 ความหมาย: เริ่มต้นสัปดาห์ในวันจันทร์สัปดาห์แรกของปีที่มีวันพฤหัสบดีแรกของ ซึ่งหมายความว่าในหนึ่งปีและอาจจะสองสามวันอีกในสัปดาห์
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI วันที่เลือก (datepicker) - แสดงไม่กี่สัปดาห์แรกของปี </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#datepicker") .datepicker ({
showWeek: จริง
FirstDay: 1
});
});
</ script>
</ head>
<body>
<p> วันที่: <ชนิดของการป้อนข้อมูล = "text" id = "datepicker"> </ p>
</ body>
</ html>