ASP網頁開發中使用jQuery日期插件可以使日期選取更加方便、快捷,在日期的格式化和顯示上也能提供更好的支持。jQuery日期插件為我們提供了各種日期格式選項、時間段選擇、快捷鍵操作、日期范圍限制等功能,可以精確的實現我們需要的日期功能。
// jQuery日期插件的引用 <link rel="stylesheet" href="jquery-ui.min.css"> <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> // 獲取當前日期的代碼 var date = new Date(); // 初始化日期控件 $(document).ready(function() { $( "#datepicker" ).datepicker(); }); // 日期格式化示例 var dateFormat = "yy-mm-dd"; $( "#datepicker" ).datepicker({ dateFormat: dateFormat }); // 日期時間范圍限制示例 $("#start_date").datepicker({ dateFormat: 'yy-mm-dd', minDate: date, // 限制日期范圍,禁止選擇過去的日期 onSelect: function (selected) { // 設置結束日期的最小值是選中的開始日期 $("#end_date").datepicker("option", "minDate", selected); } }); $("#end_date").datepicker({ dateFormat: 'yy-mm-dd', minDate: date, // 限制日期范圍,禁止選擇過去的日期 onSelect: function (selected) { // 設置開始日期的最大值是選中的結束日期 $("#start_date").datepicker("option", "maxDate", selected); } }); // 菜單選擇范圍示例 var availableDates = ["2021-01-01", "2021-03-29", "2021-04-01", "2021-05-07"]; $( "#datepicker" ).datepicker({ beforeShowDay: function(date) { var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date); var day = date.getDay(); // 判斷日期是否在可選日期數組中,如果在則返回true,可以選擇該日期,否則返回false禁用該日期 return [ availableDates.indexOf(dateString) != -1 || day == 0 || day == 6 ]; } });
以上為使用jQuery日期插件的一些實現示例,這些示例可以通過修改代碼中的參數,實現所需要的功能。總的來說,jQuery日期插件能夠使我們的開發工作更便捷,提高程序的交互性和用戶體驗。