JQuery Datepicker 是一個非常方便實用的插件?？梢暂p易地在網站上添加日期選擇器。在本文中，我們將會介紹 JQuery Datepicker 的使用方法。

引入JQuery和Datepicker

<!-- 在head標簽中引入JQuery庫 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 然后再引入JQuery Datepicker庫 -->
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<!-- 加載樣式文件 -->
<link >

在HTML中添加日期選擇器

在需要使用日期選擇器的地方添加 input 元素。

<label for="start-date">選擇日期:</label>
<input type="text" class="form-control" id="start-date">

這里 input 元素的 class 為 "form-control" 是 Bootstrap 樣式中的，如果您不使用 Bootstrap，可以省略它。

初始化DatePicker

當 DOM 加載之后，我們需要使用 JQuery 初始化 Datepicker。

$(document).ready(function(){
$('#start-date').datepicker({
format: "yyyy-mm-dd", // 日期格式
todayHighlight:true,  // 高亮顯示今天
autoclose: true      // 選擇后日期框自動關閉
});
});

總結

通過以上步驟，我們就可以在網站上添加日期選擇器了。

<label for="start-date">選擇日期:</label>
<input type="text" class="form-control" id="start-date">
<script>
$(document).ready(function(){
$('#start-date').datepicker({
format: "yyyy-mm-dd",
todayHighlight:true,
autoclose: true
});
});
</script>