jQuery之日期选择器的深入解析

1:默认情况下，日期输入文本框获得页面焦点的时候，日期选择器组件会在一个覆盖层中打开日历选择面板，当日期输入文本框失去焦点或者选择一个日期的时候，将自动关闭该日历选择面板$(选择器)。日期选择器([选项]);简单实例：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/title date picker Local/title link rel='样式表type=' text/CSS ' href=' themes/ui-lighting/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。js '/' ready(function(){ $(' # inputDate ')).datepicker({/*区域化周名为中文*/dayNamesMin : ['日', '一', '二', '三', '四', '五', '六'], /* 每周从周一开始*/firstDay : 1，/*区域化月名为中文习惯*/monthNames : ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],/* 月份显示在年后面*/showMonthAfterYear : true，/*年份后缀字符*/yearuffix : '年',/* 格式化中文日期（因为月份中已经包含"月"字，所以这里省略)*/dateFormat : 'yy年MMdd日' });});/script style * { font-size :12 px；}/样式/床头柜请输入一个日期：输入类型=' text ' id=' input date '/body/html效果图

2:指定弹出日期选择器的图片按钮需要添加响应的资源文件：复制代码代码如下：美元（文件)。ready(function(){ $(“# date picker”)).日期选择器({显示： '按钮，按钮图像： '图像/日历。gif '，buttonimageonly : true })；});复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312/title datepiken/title link rel='样式表'类型=' text/CSS ' href=' themes/ui-lighting/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。js '/' ready(function(){ $(' # date picker ')).日期选择器({显示： '按钮，按钮图像： '图像/日历。gif '，buttonimageonly : true })；});/script style * { font-size :12 px；}正文{填充： 30px} #日期选择器{边距：0高：13 px }/样式/标题dydiv请选择一个日期：输入类型=' text ' id=' date picker '/div/body/html效果图

3:显示带年、月份下拉列表和按钮面板的日期选择器复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/title date picker Local/title link rel='样式表type=' text/CSS ' href=' themes/ui-lighting/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。js '/' ready(function(){ $(' # inputDate ')).日期选择器({ changemonth : true，//可以选择月份changeYear: true，//可以选择年份showButtonPanel: true，//显示按钮面板' currentText: '今天', //当前日期按钮上显示的文字壁橱： '关闭', //关闭按钮上显示的文本年份范围： ' c-60: c 20 ' })；});/script style * { font-size :12 px；}/样式/床头柜请输入一个日期：输入类型=' text ' id=' input date '/body/html效果图

4:同时显示多个月份的日期选择器复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/title datepikerbutton/title link rel='样式表type=' text/CSS ' href=' themes/ui-lighting/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。jsready(function(){ $(“# date picker”)).日期选择器({月数： 3，//显示月份的个数showCurrentAtPos : 1，//当前月份在第二个位置stepMonths : 3 /翻页时一次跳过三个月份});});/script style * { font-size :11 px；} # date picker { margin :0 height :13 px }/样式/床头柜请选择一个日期：输入类型=' text ' id=' date picker '/body/html效果图

5:日期选择器的一些方法对话框，显示，隐藏，显示，刷新，获取日期，设置日期复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题日期选择器对话框/标题链接rel='样式表type=' text/CSS ' href=' themes/ui-lighting/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。js '/' ready(function(){ $(' # inputDate ')).datepicker()；$('#showDialog ').单击(函数(){$('#inputDate ')).datepicker(' dialog '，'，function(dateText，inst){$('#inputDate ').val(DateText)；});});});/script style * { font-size :12 px；}/样式/床头柜请输入一个日期：输入类型='文本id='输入日期'/按钮id='显示对话框'显示/按钮/正文/html效果图

6:日期选择器的一些事件6.1放映前事件：显示日期选择器之前触发该事件放映日之前6.2事件：日期选择器上每一天选择之前都将触发该事件函数（日期){}6.3 onChangeMonthYear:当日期选择器选定新的年份或者月份时触发该事件功能（年、月、月);6.4 onClose事件：当关闭日期选择器控件的时候触发此事件功能（数据文本，inst) {}6.5 onSelect事件：当日期选择器选中一个日期时触发该事件函数(dataText，inst) {} //dataText为所选的日期的字符串研究所为日期选择器实例复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题日期选择器对话框/标题链接rel='样式表type=' text/CSS ' href=' themes/ui-lighting/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。js '/'就绪（函数(){/*有日志的日期集合*/var hasLog=[{ month:10，day:1 }，{ month:10，day:5 }，{ month:10，day :20 }]；函数hasToday(日期){/*测试当前日期是否在集合中存在有相同项*/for(HasLog中的var I){/*因为射流研究…中的日期类型的月份取值范围是0-11,所以这里调用getDate()以后要加一才是当前月份*/if(hasLog[i]).月==(日期。getmonth(1)HasLog[I].day==date。getdate()){返回true} }返回false } $(“# date picker”).日期选择器({ beforeShowDay :函数（日期){/*在显示日期之前，测试如果当前日期在集合中存在，则为当前日期添加一个类别*/var dat=新日期(日期)；var CSS=if(hasToday(dat)){ CSS=' light _ day '；}返回[true，CSS]；}，onSelect :函数(日期文本，本月){/*在选中日期之后，测试如果当前日期在集合中存在，则向页面打印相应的提示信息*/var dat=新日期(日期文本)；if(hasToday(dat)){var msg='得到了日期："日期文本",我们可以在这里查询当前日期的日志列表；$('#logList ').文本(味精)；}}});});/script style body { padd :30 px；} * { font-size :12 px} # LogList { margin 336010 px 0；padding:8px }。晴天ui-state-默认值{ background: # fdc}。晴天ui-state-default:hover .晴天ui-state-default : active {后台： # fed}/style/head dydiv id='日期选取器'/div div id=' LogList '/div/body/html效果图