DatePicker - jQuery 的日期选择控件

1. 单文件
2. 高度自定义
3. 完善的配置参数 | 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/