polaris1119.javaeye/blog/557514
在Web开发中，总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而，这种方式，开发人员必须对用户输入的日期进行验证，判断其合法性。除此之外，用户输入日期也是一件不爽的事，如果用户可以直接选择日期，这两个问题都解决了。听起来很不错。实际上，很多开发者都是这么做的。

我们可以自己用javascript写一个日期选择控件，然而，想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件：datepicher，可以帮我们实现该功能，而且界面很漂亮。下面就学学如何使用它吧。

datepicher插件是jQuery UI的一个插件，它提供一个日期弹出窗口（或直接显示在页面），供用户选择日期。

datepicher插件的使用很简单，语法如下：
Javascript代码
1. $("#regDate").datepicher(optional); 
$("#regDate").datepicher(optional);


其中optional是一个对象，该对象的每一个属性及含义可以参看官方文档：jqueryui/demos/datepicker/。在此，仅介绍一些常用的属性。

1、datepicher最简单的使用
Javascript代码
1. $("#regDate").datepicher(); 
$("#regDate").datepicher();


其中,regDate是页面日期输入框的ID属性值。


就这一句话，在日期输入框获得焦点时，就会弹出一个日期选择窗口。然而，这时候的日期选择窗口有很多不方便的地方，比如：只能一个月一个月的往前或往后，没有关闭按钮等。

2、配置datepicher

通过给datepicher设置一些属性值可以改变默认的显示。如：
Javascript代码
1. $("#regDate").datepicker(   
2.  {   
3.   showMonthAfterYear: true, // 月在年之后显示   
4.   changeMonth: true,   // 允许选择月份   
5.   changeYear: true,   // 允许选择年份   
6.   dateFormat:'yy-mm-dd',  // 设置日期格式   
7.   closeText:'关闭',   // 只有showButtonPanel: true才会显示出来   
8.   duration: 'fast',   
9.   showAnim:'fadeIn',   
10.   showOn:'button',   // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both   
11.   buttonImage: 'images/commons/calendar.gif',   // 按钮图标   
12.   buttonImageOnly: true,        // 不把图标显示在按钮上，即去掉按钮   
13.   buttonText:'选择日期jquery下载文件请求',   
14.   showButtonPanel: true,   
15.   showOtherMonths: true,   
16.   //appendText: '(yyyy-mm-dd)',   
17.  }); 
$("#regDate").datepicker(
{
  showMonthAfterYear: true, // 月在年之后显示
  changeMonth: true,  // 允许选择月份
  changeYear: true,  // 允许选择年份
  dateFormat:'yy-mm-dd',  // 设置日期格式
  closeText:'关闭',  // 只有showButtonPanel: true才会显示出来
  duration: 'fast',
  showAnim:'fadeIn',
  showOn:'button',  // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both
  buttonImage: 'images/commons/calendar.gif',  // 按钮图标
mysql最常用的版本  buttonImageOnly: true,        // 不把图标显示在按钮上，即去掉按钮
  buttonText:'选择日期',
  showButtonPanel: true,
  showOtherMonths: true,
  //appendText: '(yyyy-mm-dd)',
含苯扎氯铵的湿巾有毒吗 });


这个时候的日期选择就很方便了。可以自由选择年份和月份。

3、增加清除按钮和日期判断功能（增强版datepicher1.7.2）

datepicher1.7.2版本没有提供清除按钮，这让人有点遗憾。（好像之前的版本有提供）。没有清除按钮是很不方便的，特别是输入框获得焦点就弹出日期选择窗口的情况更是如此，因为这时想要清除输入框中的日期比较麻烦。在此推荐一位网友提供的增强版datepicher1.7.2。该增强版datepicher1.7.2不仅实现了清除按钮功能，而且增加了日期大小比较验证，比如：一个日期只能在另一个之后。可以访问该网址查看：wwwblogs/yasin/archive/2009/07/10/1520736.html
。这时datepicher的使用已经相当完美：
Javascript代码
1. $(function()   
2. {   
3.  $("#effDate").datepicker(   
4.  {   
5.   showMonthAfterYear: true, // 月在年之后显示   
6.   changeMonth: true,   // 允许选择月份   
7.   changeYear: true,   // 允许选择年份   
8.   dateFormat:'yy-mm-dd',  // 设置日期格式   
9.   showClearButton: true,   
10.   //clearText: '清除',   
11.   closeText:'关闭',   // 只有showButtonPanel: true才会显示出来   
12.   duration: 'fast',   
13.   showAnim:'fadeIn',   
14.   showOn:'button',   
15.   buttonImage: 'images/commons/calendar.gif',   
16.   buttonImageOnly: true,   
17.   buttonText:'选择日期',   
18.   showButtonPanel: true,   
19.   showOtherMonths: true,   
20.   //appendText: '(yyyy-mm-dd)',   
21.   onSelect: function(dateText, inst)    // css下拉框样式使结束时间大于开始时间   
22.   {   
23.    /** 
24.     * 以下写法在IE中出现问题。 
25.     * $('#expDate').datepicker('option', 'minDate', new place(/-/g,','))); 
26.     * 时，在结束（过期时间）选择时，年会没有，而且控制会失效。通过调试，发现new place(/-/g,','))  webservice接口有什么用
27.     * 返回的结果是NaN。说明Date对象不能这么构造（但是Firefox可以） 
28.     */   
29.     var arys = new Array();   
30.     var arys = dateText.split('-');   
31.     $('#expDate').datepicker('option', 'minDate', new Date(arys[0],arys[1]-1,arys[2]));   
32.   }   
33.  });   
34.    
35.  $("#expDate").datepicker(   
36.  {   
37.   showMonthAfterYear: true, // 月在年之后显示   
38.   changeMonth: true,   // 允许选择月份   
39.   changeYear: true,   // 允许选择年份   
40.   dateFormat:'yy-mm-dd',  // 设置日期格式   
41.   showClearButton: true,  // 自定义的方法(1.7.2没有清除按钮）   
42.   //clearText: '清除',   // 自定义的文本，在文档在有定义（java基础学什么js中）   
43.   closeText:'关闭',   // 只有showButtonPanel: true才会显示出来   
44.   duration: 'fast',   
45.   showAnim:'fadeIn',   
46.   showOn:'button',   // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both   
47.   buttonImage: 'images/commons/calendar.gif',   // 按钮图标   
48.   buttonImageOnly: true,        // 不把图标显示在按钮上，即去掉按钮   
49.   buttonText:'选择日期',   
50.   showButtonPanel: true,   
51.   showOtherMonths: true,   
52.   //appendText: '(yyyy-mm-dd)',   
53.   onSelect: function(dateText, inst)   
54.   {   
55.    var arys = new Array();   
56.    var arys = dateText.split('-');   
57.    $('#effDate').datepicker('option','maxDate',new Date(arys[0],arys[1]-1,arys[2]));   

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。