jQuery两排弹出日期选择器js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery两排弹出日期选择器js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery���ŵ�������ѡ����</title>
<link href="blue/doubleDate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/doubleDate2.0.js"></script>
<script type="text/javascript">
$(function(){
	$('.doubledate').kuiDate({
		className:'doubledate',
		isDisabled: "0"  // isDisabledΪ��ѡ��������0����ʾ����֮ǰ����ѡ����1����־����֮ǰ��ѡ
	});
});
</script>
</head>

<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "������";}
.iptgroup{width:620px;height:60px;margin:20px auto 0 auto;}
.iptgroup li{float:left;height:30px;line-height:30px;padding:5px;}
.iptgroup li .ipticon{background:url(blue/date_icon.gif) 98% 50% no-repeat;border:1px #CFCFCF solid;padding:3px;}
</style>
<ul class="iptgroup">
	<li>�������ڣ�</li>
	<li><input type="text" readonly="readonly" class="doubledate ipticon"/></li>
	<li style="width:20px;"></li>
	<li>�������ڣ�</li>
	<li><input type="text" readonly="readonly" class="doubledate ipticon"/></li>
</ul>
</body>
</html>

JS代码(doubleDate2.0.js):

 var jqObj = [];
	//保存对象，便于点击时做操作 $.fn.kuiDate = function(k_date){
	//重写k_date的参数，把所有的值初始化k_date ={
	isDisabled:k_date.isDisabled || '0',maxDate:k_date.maxDate || '',minDate:k_date.minDate || '',className:k_date.className}
;
	var kDate;
	$(this).live('click',function(e){
	$('#popup_frame,#popup_pane,#a_tips_frame,#air_down_tips').hide();
	kDate = $(this);
	kui_date();
}
).live('focus',function(e){
	$('#popup_frame,#popup_pane,#a_tips_frame,#air_down_tips').hide();
	kDate = $(this);
	kui_date();
}
);
	//清空按钮$('.kui_date_reset span.off').click(function(){
	//清空文本框内容jqObj[0].val('');
	$('#kui_d_pane').hide();
}
)//关闭按钮$('.kui_date_reset span.close').click(function(){
	//清空文本框内容$('#kui_d_pane').hide();
}
)// Download by http://www.jb51.netfunction kui_date(){
	//var d = new Date().getTime();
	// 给日期插件定位var txt_left = kDate.offset().left;
	var txt_top = kDate.offset().top + kDate.outerHeight();
	var txt_wid = kDate.outerWidth();
	var scrollWidth = $(window).width();
	if(txt_left + 370 < scrollWidth){
	// 判断文本框的下方是否够显示弹出框的高度if($(document).clientHeight - txt_top < 217 && $(document).clientHeight > 217){
	$('#kui_d_pane').attr('style','left:'+ txt_left +'px;
	top:'+ (kDate.offset().top - 197) +'px;
	');
}
else{
	$('#kui_d_pane').attr('style','left:'+ txt_left +'px;
	top:'+ txt_top +'px;
	');
}
}
else{
	$('#kui_d_pane').attr('style','left:'+(txt_left+txt_wid-370)+'px;
	top:'+ txt_top +'px;
	');
}
$('#kui_d_pane').show();
	// 获取当前系统时间var kui_dd = new Date();
	var kui_year = kui_dd.getFullYear();
	var kui_month = kui_dd.getMonth()+1;
	var kui_date = kui_dd.getDate();
	var kui_day = kui_dd.getDay();
	var kui_hours = kui_dd.getHours();
	var kui_minutes = kui_dd.getMinutes();
	var kui_seconds = kui_dd.getSeconds();
	var n_time = kui_dd.getTime();
	var vals = kDate.val();
	var now_year = $.trim(vals) == '' ? kui_year:$.trim(vals).substring(0,4);
	var now_month = $.trim(vals) == '' ? kui_month:$.trim(vals).substring(5,7);
	var now_d = $.trim(vals) == '' ? kui_date:$.trim(vals).substring(8,10);
	$('.kui_today').text(now_year+'年'+now_month+'月');
	// 上月下月$('a.kui_prev_m').click(function(){
	var kui_y = now_year;
	var kui_m = now_month;
	if(kui_m==1){
	now_year = kui_y-1;
	now_month = '12';
}
if(kui_m>1 && kui_m <11){
	now_month = '0'+(kui_m-1);
}
if(kui_m>10 && kui_m <13){
	now_month = kui_m-1;
}
$('.kui_today').text(now_year+'年'+now_month+'月');
	change_date('left');
	change_date('right');
}
);
	$('a.kui_next_m').click(function(){
	var kui_y = now_year;
	var kui_m = now_month;
	if(kui_m>0 && kui_m <9){
	now_month = '0'+(parseInt(kui_m,10)+1);
}
if(kui_m>8 && kui_m <12){
	now_month = parseInt(kui_m,10)+1;
}
if(kui_m==12){
	now_year ++;
	now_month = '01';
}
$('.kui_today').text(now_year+'年'+now_month+'月');
	change_date('left');
	change_date('right');
}
);
	change_date('left');
	change_date('right');
	// 日期变化函数function change_date(dir){
	jqObj.pop();
	jqObj.push(kDate);
	// 日期 -- 根据年和月计算出来var kui_y = now_year;
	var kui_m = now_month;
	if(dir == 'right'){
	if(kui_m == 12){
	kui_y ++;
	kui_m = '01';
}
else{
	kui_m++;
	if(kui_m<10){
	kui_m = '0'+kui_m;
}
}
$('.kui_tomorrow').text(kui_y+'年'+kui_m+'月');
}
else{
	kui_m = (kui_m < 10) ? '0'+parseInt(kui_m,10):kui_m;
}
var kui_d = now_d;
	var now_date = '';
	if(vals == ''){
	now_date = kui_y+'-'+kui_m+'-'+kui_d;
}
else{
	now_date = $.trim(vals);
}
var kui_max_date = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	if (((kui_y % 4 == 0) && (kui_y % 100 != 0)) || (kui_y % 400 == 0)){
	kui_max_date[1] = 29;
}
var this_max_date = kui_max_date[kui_m-1];
	// 计算星期数var C = 1;
	// C是从这一年的元旦算起到这一天为止（包括这一天是内）的天数for(var i=0;
	i < kui_m - 1;
	i++){
	C += kui_max_date[i];
}
var kui_si = ((kui_y - 1)%4) == 0 ? ((kui_y - 1)/4):((kui_y - 1 - (kui_y - 1)%4)/4);
	var kui_yibai = ((kui_y - 1)%100) == 0 ? ((kui_y - 1)/100):((kui_y - 1 - (kui_y - 1)%100)/100);
	var kui_sibai = ((kui_y - 1)%400) == 0 ? ((kui_y - 1)/400):((kui_y - 1 - (kui_y - 1)%400)/400);
	var S= kui_y - 1 + kui_si - kui_yibai + kui_sibai + C;
	//求出S的值之后，除以7，余几就是星期几；除尽了就是星期日var aa = (kui_date - 1)%7;
	var bb = S%7;
	// 每月1号的星期数// TD表格的行数var kui_td_lines = (bb + this_max_date)%7 == 0 ? (bb + this_max_date)/7:(bb + this_max_date - (bb + this_max_date)%7)/7 +1;
	//动态添加表格数据var kui_tbody;
	if(dir == 'left'){
	kui_tbody = $('#kui_left_t');
}
else{
	kui_tbody = $('#kui_right_t');
}
kui_tbody.html('');
	var arr_tr = [];
	for(var i=0;
	i<kui_td_lines;
	i++){
	var m_ = kui_month < 10 ? '0'+kui_month:kui_month;
	var k_d_ = kui_date < 10 ? '0'+kui_date:kui_date;
	var dd1 = kui_year+'-'+m_+'-'+k_d_;
	//拼接当前系统时间的年月日if(i == 0){
	// 第一行中有空白的单元格for(var j = 1;
	j < bb+1;
	j ++){
	arr_tr.push('<dt class="kui_td_kong">&nbsp;
	</dt>');
}
// 第一行中有值单元格var kui_i = 1;
	for(var j=bb+1;
	j<=7;
	j++){
	var d_ = (7*i+kui_i) < 10 ? '0'+(7*i+kui_i):(7*i+kui_i);
	var mm_ = kui_m < 10 ? '0'+parseInt(kui_m,10):kui_m;
	var dd2 = kui_y+'-'+mm_+'-'+d_;
	var cla = '';
	if(dd2 >= dd1){
	if(vals == ''){
	cla = 'kui_not_kong';
	if(kui_d == d_ && dir == 'left'){
	cla = 'kui_not_kong td_select';
}
}
else if(vals == dd2){
	cla = 'kui_not_kong td_select';
}
else{
	cla = 'kui_not_kong';
}
}
else{
	if(k_date.isDisabled == '1'){
	if(vals == ''){
	cla = 'kui_not_kong';
	if(kui_d == d_ && dir == 'left'){
	cla = 'kui_not_kong td_select';
}
}
else if(vals == dd2){
	cla = 'kui_not_kong td_select';
}
else{
	cla = 'kui_not_kong';
}
}
else{
	cla = 'kui_td_hui';
}
}
arr_tr.push('<dt class="'+cla+'" onmouseover="kui_mouseover_(this)" onmouseout="kui_mouseout_(this)" onclick="kui_click_(this,'+now_date+','+kui_y+','+kui_m+','+kui_d+');
	">'+(7*i+kui_i)+'</dt>');
	kui_i++;
}
$('.kui_top_tr').removeClass('kui_top_tr');
}
else if(i==kui_td_lines-1){
	var kui_i = 8-bb;
	for(var j=1;
	j<=7;
	j++){
	var dd2 = kui_y+'-'+kui_m+'-'+(7*(i-1)+kui_i);
	var cla = '';
	if((7*(i-1)+kui_i) > this_max_date){
	arr_tr.push('<dt class="kui_td_kong">&nbsp;
	</dt>');
}
else{
	if(dd2 >= dd1){
	if(vals == ''){
	cla = 'kui_not_kong';
	if(kui_d == (7*(i-1)+kui_i) && dir == 'left'){
	cla = 'kui_not_kong td_select';
}
}
else if(vals == dd2){
	cla = 'kui_not_kong td_select';
}
else{
	cla = 'kui_not_kong';
}
}
else{
	if(k_date.isDisabled == '1'){
	if(vals == ''){
	cla = 'kui_not_kong';
	if(kui_d == (7*(i-1)+kui_i) && dir == 'left'){
	cla = 'kui_not_kong td_select';
}
}
else if(vals == dd2){
	cla = 'kui_not_kong td_select';
}
else{
	cla = 'kui_not_kong';
}
}
else{
	cla = 'kui_td_hui';
}
}
arr_tr.push('<dt class="'+cla+'" onmouseover="kui_mouseover_(this)" onmouseout="kui_mouseout_(this)" onclick="kui_click_(this,'+now_date+','+kui_y+','+kui_m+','+kui_d+');
	">'+(7*(i-1)+kui_i)+'</dt>');
}
kui_i++;
}
}
else{
	var kui_i = 8 - bb;
	for(var j=1;
	j<=7;
	j++){
	var d_ = (7*(i-1)+kui_i) < 10 ? '0'+(7*(i-1)+kui_i):(7*(i-1)+kui_i);
	var mm_ = kui_m < 10 ? '0'+parseInt(kui_m,10):kui_m;
	var dd2 = kui_y+'-'+mm_+'-'+d_;
	var cla = '';
	if(dd2 >= dd1){
	if(vals == ''){
	cla = 'kui_not_kong';
	if(kui_d == d_ && dir == 'left'){
	cla = 'kui_not_kong td_select';
}
}
else if(vals == dd2){
	cla = 'kui_not_kong td_select';
}
else{
	cla = 'kui_not_kong';
}
}
else{
	if(k_date.isDisabled == '1'){
	if(vals == ''){
	cla = 'kui_not_kong';
	if(kui_d == d_ && dir == 'left'){
	cla = 'kui_not_kong td_select';
}
}
else if(vals == dd2){
	cla = 'kui_not_kong td_select';
}
else{
	cla = 'kui_not_kong';
}
}
else{
	cla = 'kui_td_hui';
}
}
arr_tr.push('<dt class="'+cla+'" onmouseover="kui_mouseover_(this)" onmouseout="kui_mouseout_(this)" onclick="kui_click_(this,'+now_date+','+kui_y+','+kui_m+','+kui_d+',1);
	">'+(7*(i-1)+kui_i)+'</dt>');
	kui_i++;
}
}
}
kui_tbody.html(arr_tr.join(''));
}
// 清除日期按钮$('.kui_clean_btn').click(function(){
	kDate.val('');
}
);
	// 关闭日期插件$('.kui_close_btn').click(function(){
	$('#kui_d_pane').hide();
}
);
	//var t = new Date().getTime();
	//alert(t-d);
}
}
// 点击文档的其它地方让日期插件关闭$(function(){
	$(document).click(function(e){
	var data_pane = $(e.target).closest('.kui_data_content_pane');
	var t_id = $(e.target).attr('t_id');
	if(t_id == 'kui_date'){
}
else if(typeof(data_pane[0]) == 'undefined'){
	$('#kui_d_pane').hide();
}
}
);
}
);
	$(function(){
	/* 日期插件的HTML元素 */
var kui_div_date = '<div class="kui_d_pane" id="kui_d_pane" style="display:none;
	"><iframe id="kui_frame_d" width="370" height="203" frameborder="0"></iframe></iframe><div class="kui_data_content_pane"><div class="kui_prev_next_month"><a href="javascript:;
	" class="kui_prev_m"></a><span class="kui_today"></span><a href="javascript:;
	" class="kui_next_m"></a><span class="kui_tomorrow"></span></div><div id="left_table"><dl class="kui_data_tab"><dt class="d_th_bg">日</dt><dt>一</dt><dt>二</dt><dt>三</dt><dt>四</dt><dt>五</dt><dt class="d_th_bg">六</dt></dl><dl class="kui_date_info" id="kui_left_t"></dl></div><div id="right_table"><dl class="kui_data_tab"><dt class="d_th_bg">日</dt><dt>一</dt><dt>二</dt><dt>三</dt><dt>四</dt><dt>五</dt><dt class="d_th_bg">六</dt></dl><dl class="kui_date_info" id="kui_right_t"></dl></div><div class="kui_date_reset"><span class="off">清空</span><span class="close">关闭</span></div></div></div>';
	$('body').append(kui_div_date);
}
)//鼠标移上function kui_mouseover_(obj){
	if(!$(obj).hasClass("kui_td_kong")){
	$(obj).addClass('td_hover');
}
}
//鼠标移走function kui_mouseout_(obj){
	$(obj).removeClass('td_hover');
}
//点击事件function kui_click_(obj,now_date,kui_y,kui_m,kui_d){
	var cla = obj.className;
	if(cla.indexOf('kui_td_hui') < 0){
	var now_month;
	if(kui_m < 10){
	now_month = '0'+parseInt(kui_m,10);
}
else{
	now_month = kui_m;
}
kui_d = $(obj).html() == null ? now_date.substring(8,10):($(obj).html() < 10 ? 0 + $(obj).html():$(obj).html());
	jqObj[0].val(kui_y +'-'+ now_month +'-'+ kui_d);
	$('#kui_d_pane').hide();
}
}

CSS代码(doubleDate.css):

@charset "utf-8";.kui_d_pane{position:absolute;width:187px;margin:0;z-index:9999;}
.kui_data_content_pane{border:1px solid #1F73C9;width:370px;overflow:hidden;font-size:12px;position:absolute;left:0;z-index:100;top:0;background:#fff;height:225px;}
.kui_data_content_pane a:link,.kui_data_content_pane a:visited{color:#222222;text-decoration:none;font-weight:900;}
.kui_data_content_pane a:hover{color:#fff;}
.kui_date_reset{border-top:1px #2092D6 dotted;clear:both;margin:3px;padding:3px;text-align:right;}
.kui_date_reset span{cursor:pointer;background:#2192D6;color:#FFF;padding:2px 5px;margin-left:3px;}
.kui_prev_next_month{background:url(date_top.png) 4px 0 no-repeat;border-bottom:0px solid #fd5900;height:23px;line-height:23px;font-weight:900;text-align:center;margin-top:3px;padding-top:1px;}
.kui_prev_m,.kui_today{float:left;margin-left:6px;}
.kui_prev_m{background:url(date_prev.png) 0 0 no-repeat;height:21px;width:21px;}
.kui_today,.kui_tomorrow{width:148px;text-align:center;color:#fff;cursor:default;}
.kui_tomorrow{float:right;}
.kui_next_m{float:right;margin-right:6px;background:url(date_next.png) 0 0 no-repeat;height:21px;width:21px;}
.kui_data_tab,.kui_date_info{width:171px;margin:2px auto;zoom:1;overflow:hidden;}
dl.kui_data_tab dt{font-weight:900;}
.kui_data_tab dt,.kui_date_info dt{line-height:24px;height:24px;text-align:center;border-bottom:0px solid #B2C4D2;border-right:none;cursor:default;background:#EDECEC;font:12px/24px arial;width:24px;float:left;text-align:center;}
.d_th_bg{color:#FF9900;}
.kui_date_info dt{background:#fff;border-left:0px solid #B2C4D2;border-bottom:0px solid #B2C4D2;color:#005DAD;font-weight:900;}
.kui_date_info .kui_td_kong{background:#fff;cursor:default;}
.kui_time_pane{background:#2092D6;line-height:22px;height:22px;overflow:hidden;margin-bottom:4px;padding-bottom:1px;background:url(date_top.png) 4px 0 no-repeat;}
.kui_clean_btn{float:left;padding-left:6px;}
.kui_close_btn{float:right;padding-right:6px;}
.kui_time{float:left;padding-left:8px;}
.kui_time input{width:17px;padding:1px;line-height:12px;height:12px;margin-right:2px;margin-top:2px;_margin-top:1px;}
.kui_date_info .td_select{background:url(td_selected.png) center no-repeat;}
.kui_date_info .td_hover{color:red;cursor:pointer;}
.kui_txt_hide{display:none;}
dl.kui_date_info .kui_td_hui{background:#fff;cursor:default;color:#DBDBDB;font-weight:400;}
a img{border:0;}
#left_table,#right_table{float:left;width:184px;height:172px;overflow:hidden;}
#left_table{border-right:1px solid #6793BC;}

附件:下载该文件资源,减少时间成本(增值服务)