首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery.datepick应用

2012-10-30 
jquery.datepick使用在项目开发中经常用到日期选择控件,基于jquery的日期控件jquery.datepick使用配置起来

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    
    });       
  });
1 楼 lj1214388 2011-11-13   请问楼主,我导入了struts-jquery-plugin 的jar包,
在firebug下已经加载了jquery.datepick.min.js、jquery.datepick.css、jquery.datepick-zh-CN.js 这些文件,但就是日期控件不显示,
这是什么原因呢? 2 楼 ldzyz007 2011-12-01   有没有引入jquery.js啊

热点排行