選擇日期控件是網(wǎng)站開發(fā)中經(jīng)常會用到的功能。其中jQuery Datepicker就是一個非常方便易用的選擇日期控件。它可以提供日歷、周數(shù)、時間選擇和語言支持等多種功能。
要使用jQuery Datepicker,需要在HTML文檔中引入jQuery庫和jQuery UI庫。可以從官網(wǎng)下載并保存在項目中。接下來就可以用JavaScript代碼初始化Datepicker:
$(function() { $( "#datepicker" ).datepicker(); });
其中#datepicker是一個input元素的ID,表示需要添加Datepicker的元素。這里只是簡單的初始化,Datepicker還可以通過配置進(jìn)行更詳細(xì)的使用。
比如,要設(shè)置Datepicker默認(rèn)日期,可以這樣:
$(function() { $( "#datepicker" ).datepicker({ defaultDate: new Date(2021, 6, 1) }); });
這里設(shè)置了Datepicker默認(rèn)選中2021年7月1日。
另外,Datepicker還可以支持不同語言的顯示。需要在引入jQuery UI庫之前先引入對應(yīng)的語言文件。比如,要使用中文,可以這樣引入:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/i18n/jquery-ui-i18n.min.js"></script>
然后就可以使用中文顯示:
$(function() { $.datepicker.setDefaults($.datepicker.regional['zh-CN']); $( "#datepicker" ).datepicker(); });
以上就是使用jQuery Datepicker選擇日期控件的簡單介紹。