昨天写的Js时间选择插件

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时间选择插件</title>
<style>
*{padding:0;margin:0;}
#dateBox{width:252px;height:200px;border:1px #ddd solid;padding:20px;border-radius:3px;position:relative;}
#dateBox #yearList{width:120px;height:30px;float:left;}
#dateBox #monthList{width:120px;height:30px;float:right;}
#dateBox #dayList{width:248px;border-left:1px #ddd solid;border-top:1px #ddd solid;float:left;margin-top:10px;}
#dateBox #dayList a{width:30px;height:30px;border-right:1px #ddd solid;border-bottom:1px #ddd solid;float:left;text-align:center;line-height:30px;cursor:pointer;}
</style>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type="text" class="data1">
<input type="text" class="data1">
<script type="text/javascript">
var LDate={
	Y:"",M:"",D:"",O:"",
	init:function(o){
		this.O=o;
		if($("#dateBox").length==0){
			$("body").append('<div id="dateBox"><select id="yearList"></select><select id="monthList"></select><div id="dayList"></div></div>');
		}
		var m=12,_y=[],_m=[],i=1970,l=1,d=new Date(),dateBox=$("#dateBox");
		this.Y=d.getFullYear();
		this.M=Number(d.getMonth())+1<10?"0"+(d.getMonth()+1):d.getMonth()+1;
		this.D=d.getDate();
		for(i;i<2014;i++){
			_y.push("<option value='"+i+"'>"+i+"</option>");
		}
		for(l;l<13;l++){
			if(l<10){l="0"+l}
			_m.push("<option value='"+l+"'>"+l+"</option>");
		}
		$("#yearList").html(_y.join("")).val(this.Y).change(function(){
			LDate.month();
		});
		$("#monthList").html(_m.join("")).val(this.M).change(function(){
			LDate.day();
		});
		var offset = o.offset();
        if(offset.top + 180 - $(document).scrollTop() > $(window).height()){
            dateBox.css({'left':offset.left,'top':offset.top - dateBox.height()}).fadeIn();
        }else{
            dateBox.css({'left':offset.left,'top':offset.top+o.height()}).fadeIn();
        }
        this.day();
	},
	month:function(m){
		this.day();
	},
	day:function(d){
		var m=$("#monthList").val(),y=$("#yearList").val(),ds,i=1,_d=[],d;
		if(m=="01"||m=="03"||m=="05"||m=="07"||m=="08"||m=="10"||m=="12"){
			ds=31;
		}else if(m=="04"||m=="06"||m=="09"||m=="11"){
			ds=30;
		}else{
			(y%4==0&&y%100!=0||y%400==0)?ds=29:ds=28;
		}
		for(i;i<=ds;i++){
			_d.push('<a>'+i+'</a>');
		}
		$("#dayList").html(_d.join(""));
		$("#dayList a").click(function(){
			d=$(this).html()<10?"0"+$(this).html():$(this).html();
			LDate.show(y,m,d);
			$("#dateBox").fadeOut();
		});
		//this.show(y,m,"0"+this.D);
	},
	show:function(y,m,d){
		this.O.val(y+"-"+m+"-"+d);
	}
}
$(".data1").click(function(){
	LDate.init($(this));
});
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

昨天写的Js时间选择插件

分类

日期时间

描述

一个Js时间选择插件，有两个文本框，鼠标点击后，会弹出一个日期选择框，相信大家都见到过的，本款日期选择没有美化，留着大家美化吧。