DatePicker - jQuery 的日期选择控件

DatePicker - jQuery 的日期选择控件

基本的文本框选区

 

$('#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/

相关推荐