DatePicker - jQuery 的日期选择控件
DatePicker - jQuery 的日期选择控件
- 单文件
- 高度自定义
- 完善的配置参数 | jquery.DatePicker.js(未压缩) | jquery.DatePicker.min.js(压缩版)
基本的文本框选区
$('#picker_1').datePicker({followOffset : [0, 24]}});
给定默认值 & 阻止自动关闭面板
$('#picker_2').val('2012-12-12').datePicker({followOffset: [0, 24], autoHide: false}); //$('#picker_2').val('2012-12-12').datePicker({followOffset:[0, 24], defaultDate:'2012-12-12'});
限制最大值和最小值
$('#picker_3').val('2011-11-11').datePicker({ followOffset:[0, 24], minDate : '2010-10-10', maxDate : '2012-12-12' }); //以下代码等价 /*$('#picker_3').val('2011-11-11') .attr('min', '2010-10-10').attr('max', '2012-12-12') .datePicker({followOffset:[0, 24]});*/
手动绑定值&给定日期返回格式(默认:yyyy-mm-dd)&跟随元素
跟随我
给定返回格式,altFormat:'mm,dd yyyy'(月,日 年)
$('#picker_4').datePicker({ follow : '#picker_4_follow', followOffset:[0, 24], defaultDate : '2011-11-11', altFormat : 'mm, dd yyyy', onselect : function(date, formatDate){ $('#picker_4_info').html('当前选择日期:' + date + ', 格式化后日期:' + formatDate); //return false; //可以阻止默认设置值 } }); $('#picker_4_follow').click(function(e){ $('#picker_4').data('DatePicker').show(); e.stopPropagation(); });
独立的调用方式
选择日期
var picker_5 = new DatePicker({ shell : null, follow : '#picker_5_btn', followOffset:[0, 24], onselect : function(date, formatDate){ $('#picker_5').val(formatDate); } }); $('#picker_5_btn').click(function(e){ picker_5.show(); e.stopPropagation(); });
自定义动画&二次格式化日期
显示控件
$('#picker_6').datePicker({ followOffset:[0, 24], autoHide : false, effect : 'fadeIn', effectDuration : 320, onselect : function(date){ var formatDate = DatePicker.formatDate(date, 'yyyy年mm月dd日'); this.shell.val(formatDate); return false; } }); $('#picker_6_btn').click(function(e){ var datePciker = $('#picker_6').data('DatePicker'), isShow = datePciker.DOM.css('display') !== 'none'; datePciker.position(); //修正位置 //datePciker.hidePanel(); //隐藏子选择面板 this.innerHTML = isShow ? '显示控件' : '隐藏控件'; datePciker.DOM[isShow ? 'hide' : 'show'](320); e.stopPropagation(); }); $(document).click(function(){ var elem = $('#picker_6').data('DatePicker').DOM; if(elem.css('display') !== 'none'){ elem.fadeOut(320); } });
显示模式-只显示年月、只显示年
$('#picker_7').datePicker({ followOffset:[0, 24], altFormat : 'yyyy年mm月', showMode : 1 }); $('#picker_8').datePicker({ followOffset:[0, 24], altFormat : 'yyyy年', showMode : 2 });
完整配置参数
var picker = new DatePicker({ shell: null, //触发元素,如果为input类,onselect会自动设置值 shellTriggerEvent: 'click.DatePicker focus.DatePicker', //显示DatePicker的默认触发事件 follow: null, //跟随元素,如果没有,则为 shell followOffset: [0, 0], //跟随偏移值[x, y] showMode: 0, //显示模式:0 - 年月日, 1 - 年月, 2 - 年 autoHide: true, //是否自动隐藏,如果为 true,当触发 document的click时,会自动隐藏 effect: 'show', //默认打开动画,基于JQ默认动画,默认:show effectDuration: 0, //动画时长,和effect配合使用 altFormat: 'yyyy-mm-dd', //返回时间格式 unitYearSize: 12, //选择年份时,每页显示个数 defaultDate: null, //默认值 minDate: null, //最小值,默认:1680-1-1 maxDate: null, //最大值,默认:2999-12-12 onselect: ds.noop, //选择时,回调函数 onmouseenter: ds.noop, //鼠标进入DatePicker区域,触发 onmouseleave: ds.noop //鼠标离开DatePicker区域,触发 });
销毁对象
$('#picker_1').data('DatePicker').destroy(); http://www.laoshu133.com/Lab/DatePicker/
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17