DatePicker - 基于jQuery 1.7的日期选择控件

1. 单文件
2. 高度自定义
3. 完善的配置参数　jquery.DatePicker.js(未压缩)

基本的文本框选区

$('#picker_1').datePicker({followOffset : [0, 24]}});

给定默认值

$('#picker_2').val('2012-12-12').datePicker({followOffset:[0, 24]});
//$('#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 : 'focus',	//显示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();