Linux教程網 >> Linux編程 >> Linux編程 >> jQuery插件的應用之 --- 日歷

jQuery插件的應用之 --- 日歷

日期：2017/3/1 10:25:40 编辑：Linux編程

jQuery插件的應用之 --- 日歷

一介紹

（1）優點：在頁面開發中，經常會遇到需要用戶輸入日期的操作，通常的做法是提供一個文本框，讓用戶輸入，然後，再編寫代碼驗證輸入的數據，檢測其是否是日期類型，這樣比較麻煩，同時，用戶輸入日期的操作也不是很方便，影響用戶體驗。如果使用jQueryUI中的datepicker插件，這些問題就可以迎刃而解

（2）導入的js和css文件

jquery-1.7.1.min.js"
jquery-ui-1.8.18.custom.min.js"
jquery.ui.core.js"
jquery.ui.datepicker.js"
jquery.ui.widget.js"
jquery.ui.datepicker-zh-CN.js" 把界面的改為中文的所需要導入的包
jquery-ui-1.8.18.custom.css"

（3）功能實現

在頁面中，當單機文本框時，通過datepicker插件彈出一個日期選擇窗口，該窗口可以使用下拉列表框的方式選擇年份與月份，並顯示與日期相對應的星期。

二代碼詳解

1．首先來創建一個jsp頁面

<body>
<div>
<form action="">
<input type="text" id="datepicker"/>
</form>
</div>
</body>

2. 然後用js代碼來注冊當點擊id="datepicker"時觸發的事件

<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker();
});
</script>
然後我們就可以向datepicker()中加入參數來修飾日期
（1）在日期的標題欄中顯示下拉列表框
//在日期的標題欄中是否出現下拉選擇框，選擇日期中的月份，true代碼有選擇框
changeMonth : true,
changeYear : true//在日期的標題欄中出現下拉列表框顯示年
（2）關閉彈出的日期框
//在日期面板的下方出現2個按鈕，一個是tody，一個是關閉，默認值是不顯示的
showButtonPanel : true,
//關閉的效果文字必須結合showButtonPanel:true來使用
closeText : "關閉"
（3）設定在文本框中的格式
dateFormat : "yy-mm-dd"
（4）設置日期的缺省值，在當前日期中加或減一天
defaultDate : "-3"
（5）設置日期出現和消失的動畫效果，比如有slide，toggle
showAnim : "slide"
（6）現在當年中的第一周，在左邊顯示
showWeek : true
（7）默認fisrtDay是當年的第一天
firstDay : 1
（8）表示下拉框中的年份的范圍
yearRange : "2011:2012"
（9）如果是兩個選框，填寫的是從哪一天到哪一天的話，要獲取點擊的值並判斷值
onSelect : function(selectedDate) {
//獲取當前對象this.id=dp minDate //開始日期的最小值
//獲取 option的值是minDat或者是maxDate 根據dom對象的id
var option = this.id == "dep" ? "minDate" : "maxDate",
//獲取當前日期的實例對象，每遍歷一次就獲取一次
instance = $( this ).data( "datepicker" ),
//獲取日期 instance.settings 獲取日期的值
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
alert(instance.settings);
//設置日期
dates.not( this ).datepicker( "option", option, date );
},
（10）在應用中還可能會用到點擊圖片或按鈕彈出選擇日期的對話框，會用到幾下幾個屬性
//點擊按鈕時出發的事件
showOn:"button",
//向按鈕上添加文本
buttonText:"選擇日期",
//向按鈕上添加圖片
buttonImage:" images/calendar.gif",
//設置只顯示圖片，沒有按鈕
buttonImageOnly:true,
（11）還有就是補全所有的日期，但是是不可選的
//補全所有的
showOtherMonths:true,
//在當前月中，其他月的日期不可以選擇，，默認為false
selectOtherMonths:false
（12）把顯示的日期換成中文的格式，要導入包jquery.ui.datepicker-zh-CN.js，也可以加入$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);來聲明
整體的代碼為：
<script type="text/javascript">
//當頁面加載完畢的時候觸發的匿名函數
$(document).ready(function() {
$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
//當點擊的時候觸發事件，點擊的時候直接顯示
//判斷開始日期的最大值等於結束日期的最小指
var dates = $("#dep,#end").datepicker(
{
changeMonth : true,//在日期的標題欄中是否出現下拉選擇框，選擇日期中的月份，true代碼有選擇框，fals代碼沒有選擇框
changeYear : false,//在日期的標題欄中出現下拉列表框顯示年
showButtonPanel : true, //在日期面板的下方出現2個按鈕，一個是tody，一個是關閉，默認值是不顯示的
closeText : "關閉", //關閉的效果文字必須結合showButtonPanel:true來使用
dateFormat : "yy-mm-dd", //設定在文本框中的格式
defaultDate : "-3", //缺省值，在當前日期中加或減一天
showAnim : "slide", //設置動畫效果 slide toggle
showWeek : true, //顯示當年中的第幾周,在最左邊
firstDay : 1, //默認fisrtDay是當年的第一天
yearRange : "2011:2012", //表示下拉框中的年份的范圍
onSelect : function(selectedDate) {
//獲取當前對象this.id=dp minDate //開始日期的最小值
//alert(this);
//獲取 option的值是minDat或者是maxDate 根據dom對象的id
var option = this.id == "dep" ? "minDate" : "maxDate",
//獲取當前日期的實例對象，每遍歷一次就獲取一次
instance = $( this ).data( "datepicker" ),
//獲取日期 instance.settings 獲取日期的值
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
alert(instance.settings);
//設置日期
dates.not( this ).datepicker( "option", option, date );
},
//提示信息
prevText:"上一月",
nextText:"下一月",
//顯示幾個選擇的日期
numberOfMonths:1,
//點擊按鈕時出發的事件
showOn:"button",
//向按鈕上添加文本
buttonText:"選擇日期",
//向按鈕上添加圖片
buttonImage:" images/calendar.gif",
//設置只顯示圖片，沒有按鈕
buttonImageOnly:true,
//補全所有的
showOtherMonths:true,
//在當前月中，其他月的日期不可以選擇，，默認為false
selectOtherMonths:false
});
});
</script>