jquery.datepick使用

在项目开发中经常用到日期选择控件，基于jquery的日期控件jquery.datepick使用配置起来很方面灵活，此控件支持多语言，兼容多种浏览器材，支持jquery的validate，有多种样式供选择....
1.官方下载地址：http://keith-wood.name/datepick.html 有详细的demo和参数说明及validate和其他一些特效演示
2.下载jquery.datepick.package-4.0.3后解压
   2.1有3个gif图片，这3个图片是点击按钮弹出日期控件的按钮效果图片，你可以自定义按钮图片，也可以不用按钮，直接点击input时弹出
   2.2有3个自带样式供选择，使用不同的样式弹出的日期控件效果不一样。
   2.3jquery.datepick.js这个是最重要的js必须引入，还有压缩版jquery.datepick.pack.js的和最小版jquery.datepick.min.js，一般不需要特别效果引入jquery.datepick.min.js即可
   2.4jquery.datepick.validation.js这个是在做日期验证时才用，当然还有压缩版和最小版供选择
   2.5jquery.datepick-zh-CN.js简体中文资源文件，可以不引，默认提示和显示就是英文，也可以在页面datepick参数中定义中文显示文字及提示信息，建议直接引入jquery.datepick-zh-CN.js文件。
3.一般情况小引入jquery.datepick.min.js、jquery.datepick.css、jquery.datepick-zh-CN.js这三个文件即可，当然必须引入jquery-1.4.2.js(jquery低版本可能不兼容)
4.重要参数介绍
  $('#startTime').datepick({  
        showOnFocus: true,
        firstDay: 0,
        rangeSelect: true,
        monthsToShow: 2,
        yearRange: '-10:+10',
        dateFormat: 'yyyy-mm-dd',
        minDate: new Date(2007, 1 - 1, 1),
        maxDate: new Date(2009, 1 - 1, 1)         
    });  
  4.1 startTime这个是input的id。默认是onfocus时弹出日期控件，不是onclick。showOnFocus参数默认为true，如果配置为false,是触发不了日期控件的。
  4.2 firstDay星期的第一天设置。默认是星期日，设置为0或者7都是星期日，设置为1是星期一，设置为2是星期二....
  4.3 rangeSelect 多选设置。默认为false,设置为true时可以选择一个日期段，开始日期至结束日期
  4.4 monthsToShow 显示弹出多个日期控件供选择。2就是显示同时弹出2个日期控件，这个参数必须配合rangeSelect一起使用，rangeSelect 为true才起作用
  4.5 yearRange 设置年的选择范围。-10:+10表示以现在年为标准，可选前10年后10年的日期，当然还有其他一些设置技巧，可参考官方demo
  4.6 dateFormat 日期格式化。可参考官方demo
  4.7 minDate 日期控件显示的最小日期。其他技巧可参考官方demo
  4.8 maxDate 日期控件显示的最大日期。其他技巧可参考官方demo
5.开始日期结束日期大小限制
  function customRange(dates) {
    if (this.id == 'startTime') {
        $('#endTime').datepick('option', 'minDate', dates[0] || null);
    }
    else {
        $('#startTime').datepick('option', 'maxDate', dates[0] || null);
    }
  }

  $(document).ready(function() {    
    $('#startTime,#endTime').datepick({           
        yearRange: '-10:+10',       
        dateFormat: 'yyyy-mm-dd',
        minDate: new Date(),
        onSelect: customRange    
    });       
  });

评论

2 楼 ldzyz007 2011-12-01  

有没有引入jquery.js啊

1 楼 lj1214388 2011-11-13  

请问楼主，我导入了struts-jquery-plugin 的jar包，
在firebug下已经加载了jquery.datepick.min.js、jquery.datepick.css、jquery.datepick-zh-CN.js 这些文件，但就是日期控件不显示，
这是什么原因呢？