jQuery是一款非常常用的JavaScript庫，它提供了方便的操作HTML文檔、動畫效果等方法，其中$.datepicker是它提供的日期選擇器組件。
使用$.datepicker非常簡單，首先需要引入jQuery庫和jQuery UI庫：
<head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" > <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head>
接著，在需要使用datepicker的元素上調用datepicker方法即可：
<input type="text" id="datepicker"> <script> $( "#datepicker" ).datepicker(); </script>
datepicker提供了多種設置選項，如設置默認日期、日期格式、語言等等，下面是一些常用的設置：
<script>
$( "#datepicker" ).datepicker({
dateFormat: "yy年mm月dd日", //設置日期格式
defaultDate: new Date(), //設置默認日期為當前日期
changeMonth: true, //允許選擇月份
changeYear: true, //允許選擇年份
yearRange: "1900:2100", //限制年份范圍
showOtherMonths: true, //顯示其他月份的日期
selectOtherMonths: true, //允許選擇其他月份的日期
showButtonPanel: true, //顯示一個按鈕面板
currentText: "今天", //設置“今天”按鈕文本
closeText: "關閉", //設置“關閉”按鈕文本
prevText: "上月", //設置“上月”按鈕文本
nextText: "下月", //設置“下月”按鈕文本
monthNames: ["一月","二月","三月","四月","五月","六月",
"七月","八月","九月","十月","十一月","十二月"], //設置月份名稱
monthNamesShort: ["一","二","三","四","五","六",
"七","八","九","十","十一","十二"], //設置月份的短名稱
dayNames: ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"], //設置星期的名稱
dayNamesShort: ["日","一","二","三","四","五","六"], //設置星期的短名稱
dayNamesMin: ["日","一","二","三","四","五","六"], //設置星期的極短名稱
onClose: function( selectedDate ) { //設置選擇日期后的回調函數
$( "#end_datepicker" ).datepicker( "option", "minDate", selectedDate );
}
});
</script>$.datepicker是一個非常實用的組件，適用于需要選擇日期的場景，如訂餐、預約等等。它提供了豐富的設置選項，能夠滿足不同場景的需求。
上一篇學習css的心得體會
下一篇學習css看啥書