js写一个日期Ⅱ（完结）

最新推荐文章于 2022-10-30 08:47:13 发布
最新推荐文章于 2022-10-30 08:47:13 发布
阅读量649 收藏
点赞数
分类专栏： javascript 文章标签： js 日期 js写一个日期 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nbin2008/article/details/49386885
版权

功能如下描述：


1、页面加载进来对应当日的日期

2、根据传进来的参数，设定按钮年份和月份的浮动值

当月是2015-9，传入的参数为5，往前5个月和往后5个月，选择范围2015-8~~2016-2

3、每个月中的日期状态从后台获取，要和底部提示的对应。（底部的提示和日期的圈圈状态图，为后台发送过来）。

4、日期是可以点击的，根据传进来的状态值，设定对应的点击策略，3种情况，并且把点击的日期发送给后台

①在今日之前的不能点击

②在今日之后的不能点击

③全部都可以点击


http://www.hui12.com/nbin/csdn/jsDate/demo2.html

https://nbin2008.github.io/demo/jsDateindex2.html


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js日期</title>
		<style type="text/css">
			*{ margin: 0; padding: 0; font-family: "微软雅黑"; }
		</style>
		<script src="jquery-2.0.3.js"></script>
		<script src="date2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				/*
				 * 设定随机参数
				 */
				var clickType = 1 - Math.round(Math.random()*2);
				switch(clickType){
					case -1: console.log("【过去日期不可以点击】");
						break;
					case 0: console.log("【所有日期可以点击】");
						break;
					case 1: console.log("【以后的日期不可以点击】");
						break;
				};
				var prevNext = Math.round(Math.random()*12)+5;
				console.log("可前后查看"+ prevNext +"个月");
				var a1 = getRan();
				var a2 = getRan();
				var a3 = getRan();
				function getRan(){
					var tmp = [];
					var j = {};
					var max = Math.round(Math.random()*15);
					while( tmp.length <max ){
						var ran = Math.round(Math.random()*31);
						if( j[ran] ){
							continue;
						}else{
							j[ran] = true;
							tmp.push(ran);
						};
					};
					return tmp;
				};
				/*
				 * gogo
				 */
				var attr = {
					obj: $(".date-container"),
					clickType: clickType,	//参数状态：-1过去的不可点击，0全部可点击，1以后不可以点击
					dayState: {
						//这里的K值要和回调MonthMsg的统一
						'today': ['images/a2.png', 'images/a22.png', '今天'],
						'now': ['images/a5.png', 'images/a55.png', '当前选中'],
						'fxhd': ['images/a1.png', 'images/a11.png', '返校活动'],
						'xmhz': ['images/a3.png', 'images/a33.png', '项目合作'],
						'pxhd': ['images/a4.png', 'images/a44.png', '培训活动']
					},
					callbackGetDate: function(date){
						//这里是点击后传入date数据,刷新右侧列表，没有返回值 ||年月日 20101010
						console.log("把当前点击的日期"+date+"传给后台");
					},
					callbackGetMonthMsg: function(date){
						//选择时间后，得到当月日程状态，有返回值 ||年月 201010
						console.log("获得"+date+"月的日期状态");
						return {
							'fxhd': a1,
							'xmhz': a2,
							'pxhd': a3
						};
					},
					monthScope: prevNext	//前后可查看的月份
				};
				var d = new dDate(attr);
			});
		</script>
	</head>
	<body>
		<p style="color: red; line-height: 50px;">请F12打开控制台查看</p>
		<div class="date-container" style=""></div>
	</body>
</html>


(function(window,$){
	var proto = {
		getDay: function(y, m) {
			var mday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
			if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) //判断是否是闰月 
				mday[1] = 29;
			return mday[m - 1];
		},
		getWeek: function(y, m, d) {
			var wk;
			if (m <= 12 && m >= 1) {
				for (var i = 1; i < m; ++i) {
					d += this.getDay(y, i);
				}
			}
			/*根据日期计算星期的公式*/
			wk = (y - 1 + (y - 1) / 4 - (y - 1) / 100 + (y - 1) / 400 + d) % 7;
			//0对应星期天，1对应星期一 
			return parseInt(wk);
		},
		getName: function(year,month,day){
			return year + "-" + month + "-" + day;
		},
		getLast: function(y,m){
			if( m-1 == 0){
				return {
					y: y-1,
					m: 12,
					d: this.getDay(y-1, 12)
				};
			}else{
				return {
					y: y,
					m: m-1,
					d: this.getDay(y, m-1)
				};
			}
		},
		getNext: function(y,m){
			if( m+1 > 12 ){
				return {
					y: y+1,
					m: 1,
					d: this.getDay(y+1, 1)
				};
			}else{
				return {
					y: y,
					m: m+1,
					d: this.getDay(y, m+1)
				};
			};
		},
		setDay: function(name,day,index,siblings){
			var $div = this.$obj.find("div");
			$div.eq(index).attr("name",name).html("<span>"+ day +"</span>");
			siblings && $div.eq(index).addClass("siblings");
		},
		clearDiv: function(){
			var $div = this.$obj.find("div");
			$div.removeAttr("name").removeClass().html('');
		},
		setDate: function(year, month){
			this.clearDiv();
			var year = parseInt(year);
			var month = parseInt(month);
			var $div = this.$obj.find("div");
			var dayNumber = this.getDay(year, month);
			var firstNumber = this.getWeek(year,month,1);
			var lastNumber = this.getWeek(year,month,dayNumber);
			var weekNumber = (dayNumber - (7 - (firstNumber==0?7:firstNumber) ) - (lastNumber + 1)) / 7;
			var day = 1;
			var index = 0;
			var name;
			var last = this.getLast(year, month);
			var lastDay = last.d - firstNumber + 1;
			for( var i=0; i<firstNumber; i++ ){
				name = this.getName(last.y, last.m, lastDay);
				this.setDay(name,lastDay,index,1);
				lastDay++;
				index++;
			};
			if( firstNumber == 0 ){
				lastDay = last.d - 7 + 1;
				for( var i=0; i<7; i++ ){
					name = this.getName(last.y, last.m, lastDay);
					this.setDay(name,lastDay,index,1);
					lastDay++;
					index++;
				};
				weekNumber--;
			};
			for( i= firstNumber; i<7; i++ ){
				name = this.getName(year,month,day);
				this.setDay(name,day,index);
				index++;
				day++;
			};
			for( i=0; i<weekNumber; i++ ){
				for( var k=0; k<7; k++){
					name = this.getName(year,month,day);
					this.setDay(name,day,index);
					day++;
					index++;
				};
			};
			for( i=0; i<lastNumber+1; i++ ){
				name = this.getName(year,month,day);
				this.setDay(name,day,index);
				index++;
				day++;
			};
			var next = this.getNext(year,month);
			day = 1;
			while( $div[index] ){
				name = this.getName(next.y, next.m, day);
				this.setDay(name,day,index,1);
				day++;
				index++;
			};
			return this;
		},
		init: function($obj){
			this.$obj = $obj;
			return this;
		}
	}
	function DateWeek($obj){
		return this.init($obj);
	};
	DateWeek.prototype = proto;
	DateWeek.prototype.constructor = DateWeek;
	window.DateWeek = DateWeek;
})(window,jQuery);

/*
 * 针对项目的封装
 */
(function(window, $){
	function DateWeek2(e){
		this.init(e);
	};
	var proto = {
		init: function(e){
			this.before(e);
			this.createDom(e);
			this.main(e);
		},
		before: function(e){
			this.$parent = e.obj;
			var dayState = {};
			for( var k in e.dayState ){
				dayState[k] = {};
				dayState[k]['big'] = e.dayState[k][0];
				dayState[k]['small'] = e.dayState[k][1];
				dayState[k]['txt'] = e.dayState[k][2];
			};
			this.dayState = dayState;
			this.clickType = e.clickType;
			this.callbackGetDate = e.callbackGetDate;
			this.callbackGetMonthMsg = e.callbackGetMonthMsg;
			this.monthScope = e.monthScope;
		},
		//创建基本dom结构
		createDom: function(e){
			var $parent =  this.$parent;
			var dayState = this.dayState;
			$parent[0].innerHTML = '<div class="date-secBox"> \
									<select class="date-sec1"></select> \
									<select class="date-sec2"></select> \
									<button class="date-backBtn">返回</button>	\
								</div> \
								<div class="date-week"> \
									<div>日</div> \
									<div>一</div> \
									<div>二</div> \
									<div>三</div> \
									<div>四</div> \
									<div>五</div> \
									<div>六</div> \
								</div> \
								<div class="date-day"></div> \
								<div class="date-notice"></div>';
			this.sec1 = $parent.find('.date-sec1');
			this.sec2 = $parent.find('.date-sec2');
			this.backBtn = $parent.find(".date-backBtn");
			//补充day数字+扩充数字排列方法
			var $dateDay = $parent.find(".date-day");
			this.$dateDay = $dateDay;
			for( var i=0, len=42; i<len; i++ ){
				$dateDay.append("<div></div>");
			};
			var sd = new DateWeek($dateDay);
			this.sd = function(y,m){
				sd.setDate(y,m);
			};
			//设置状态说明
			var $dateNotice = $parent.find(".date-notice");
			for( var name in dayState ){
				$dateNotice.append('<span><img src='+ dayState[name]['small'] + ' />' + dayState[name]['txt'] + '</span>');
			};
			//设置样式
			function cssSet(){
				var c = [
					[$parent, "width: 350px; height: 600px; border: 1px solid #ccc; overflow: hidden;"],
					[$parent.find(".date-secBox select"), 'color: #3aa2c7; width: 80px; font-weight: bold;'],
					[$parent.find(".date-week"), 'height: 50px; margin: 30px 0; color: #848080; font-weight: bold; font-size: 24px;'],
					[$parent.find(".date-week div"), 'width: 42px; height: 36px; float: left; text-align: center; line-height: 36px; margin: 0 4px;'],
					[$parent.find(".date-day"), 'width: 100%; height: 415px;'],
					[$parent.find(".date-day div"), 'width: 42px; height: 36px; float: left; text-align: center; line-height: 36px; position: relative; margin: 0 4px 30px; cursor: pointer;'],
					[$parent.find(".date-notice"), 'padding-top: 5px;'],
					[$parent.find(".date-notice span"), 'float: left; margin: 0 10px 4px;'],
					[$parent.find(".date-notice img"), 'margin-right: 5px;']
				];
				for( var i=0; i<c.length; i++ ){
					cssErgodic(c[i][0], c[i][1]);
				};
				function cssErgodic($obj,styles){
					$obj.each(function(index,ele){
						ele.style.cssText = styles;
					});
				};
			};
			cssSet();
		},
		main: function(){
			var This = this;
			var nd = gDate();
			this.nd = nd;
			var monthScope = this.monthScope;
			this.djson = {}
			var djson = this.djson;
			djson[nd['y']] = [nd['m']];
			prevRange();
			nextRange();
			this.setOption();
			this.fnClicks();
			this.fnClicks2();
			
			//前年月
			function prevRange(){
				var mNow = nd.m;
				if( mNow > monthScope ){
					var dis = mNow - monthScope;
					for( var i=mNow-1; i>=dis; i-- ){
						djson[nd['y']].unshift(i);
					};
				}else{
					for( var i=mNow-1; i>0; i-- ){
						djson[nd['y']].unshift(i);
					};
					var oldm = mNow - 1;
					var newm = monthScope - oldm;
					var zs = Math.floor(newm/12);
					var ys = newm%12;
					for( var i=zs; i>0; i--){
						djson[nd['y']-i] = [1,2,3,4,5,6,7,8,9,10,11,12];
					};
					var tmp = []
					for( var i=12-ys+1; i<13; i++ ){
						tmp.push(i);
					};
					djson[nd['y']-zs-1] = tmp;
				};
			};
			//后年月
			function nextRange(){
				var mNow = nd.m;
				var mNext = mNow + monthScope;
				if( mNext >12 ){
					for( var i=nd['m']+1; i<13; i++ ){
						djson[nd['y']].push(i);
					};
					var zs = Math.floor(mNext/12);
					var ys = mNext%12;
					for( var i=1; i<zs; i++ ){
						djson[nd['y']+i] = [1,2,3,4,5,6,7,8,9,10,11,12];
					};
					var tmp = []
					for( var i=1; i<ys+1; i++ ){
						tmp.push(i);
					};
					djson[nd['y']+zs] = tmp;
				}else{
					for( var i=1; i<monthScope+1; i++){
						djson[nd['y']].push(nd['m']+i);
					};
				};
			};
			function gDate(){
				var d = new Date();
				return {
					y: d.getFullYear(),
					m: d.getMonth()+1,
					d: d.getDate(),
				};
			};
		},
		//设置选项
		setOption: function(){
			var This = this;
			var nd = this.nd;
			var djson = this.djson;
			var $sec1 = this.sec1;	//这是月
			var $sec2 = this.sec2;	//这是年
			This.one = false;
			for( var name in djson ){
				$sec2.append('<option value="'+ name +'">'+ name +'年</option>');
			};
			$sec2.on("change", function(){
				var val = $(this).val();
				$sec1.html('');
				for( var i=0; i<djson[val].length; i++ ){
					$sec1.append('<option value="'+ djson[val][i] +'">'+ djson[val][i] +'月</option>');
				};
				This.one ? This.fnOptionChange() : (This.one = true);
			}).val(nd['y']).trigger("change");
			$sec1.on("change", function(){
				This.fnOptionChange();
			}).val(nd['m']).trigger("change");
		},
		//option变化事件
		fnOptionChange: function(){
			var v1 = this.sec1.val();	//这是月值
			var v2 = this.sec2.val();	//这是年值
			var $dateDay = this.$dateDay;
			var dayState = this.dayState;
			var callbackGetMonthMsg = this.callbackGetMonthMsg
			var nd = this.nd;
			var ymd = nd['y'] + '-' + nd['m'] + '-' + nd['d'];
			var sendym = v2 + '-' + v1;
			this.cache = this.cache || {};
			var cache = this.cache;
			this.sd(v2,v1);
			$dateDay.find("div").css('color','#000');
			$dateDay.find(".siblings").css('color', '#ccc');
			$dateDay.find("div[name="+ymd+"]").append('<img src='+ dayState['today']['big'] +'>');
			var $span = $dateDay.find('span');
			$span.each(function(index,ele){
				ele.style.cssText = 'position: absolute; left: 0; top: 0; width: 42px; height: 36px; z-index: 999;';
			});
			
			//这里模拟ajax回调
			var backMsg;
			if( cache[sendym] ){
				backMsg = cache[sendym];
			}else{
				backMsg = callbackGetMonthMsg(sendym);
				cache[sendym] = backMsg;
			};
			backFn();
			function backFn(){
				for( var name in backMsg ){
					var tmp = backMsg[name];
					for( var i=0; i<tmp.length; i++ ){
						var d = v2 + '-' + v1 + '-' + tmp[i];
						$dateDay.find('div[name='+ d +']').append('<img src='+ dayState[name]['big'] +'>');
					};
				};
				fnSortState();
			};
			//状态排序
			function fnSortState(){
				$dateDay.find("div").each(function(index,ele){
					var $img = $(ele).find('img');
					$img.each(function(index2,ele2){
						var top = index2*5;
						var zIndex = 20 - index2;
						ele2.style.cssText = 'position: absolute; left: 0; width: 42px; height: 36px; top: '+ top +'px; z-index: '+ zIndex +';';
					});
				});
			};
		},
		//返回按钮点击事件
		fnClicks: function(){
			var This = this;
			var backBtn = this.backBtn;
			var $sec1 = this.sec1;	//这是月值
			var $sec2 = this.sec2;	//这是年值
			var nd = this.nd;
			//返回点击
			backBtn.click(function(){
				This.one = false;
				$sec2.val(nd['y']).trigger('change');
				$sec1.val(nd['m']).trigger('change');
			});
		},
		//选择当前点击事件
		fnClicks2: function(){
			var This = this;
			var callbackGetDate = this.callbackGetDate;
			var $dateDay = this.$dateDay;
			var $day = $dateDay.find("div");
			var nd = this.nd;
			var dayState = this.dayState;
			var clickType = this.clickType;	//-1过去的不可以点击，0所有可以点击，1以后的不可以点击
			$day.click(function(){
				var tmp = $(this).attr("name").split("-");
				var nowDay = new Date().getTime();
				var clickDay = new Date().setFullYear(tmp[0],tmp[1]-1,tmp[2]);
				switch(clickType){
					case -1:
						if( clickDay >= nowDay ){
							addBg($(this));
						}
						break;
					case 0:
						addBg($(this));
						break;
					case 1:
						if( clickDay <= nowDay ){
							addBg($(this));
						};
						break;
				};
			});
			//点击后事件
			function addBg($obj){
				$obj.siblings().find("span").css("background","none");
				$obj.find("span").css("background","url("+ dayState['now']['big'] +")");
				callbackGetDate($obj.attr("name"));
			};
		},
	};
	DateWeek2.prototype = proto;
	window.dDate = DateWeek2;
})(window,jQuery)


nbin斌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js原生写时间日期选择
weixin_43972857的博客
03-01 1131
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
JavaScript获取一个范围内日期的方法
10-24
在JavaScript中，操作日期是一个常见且重要的需求，特别是在需要处理特定日期范围时。JavaScript提供了Date对象来处理日期和时间。在这个上下文中，我们主要探讨了如何获取一个日期范围内的所有日期，并将这些日期...
js写一个日期
nbin2008的博客
10-03 894
用js写一个日期
5.18 Js基础语法（data和math）
毛毛的博客
05-18 351
目标 创建date对象 获取日期 创建日期 常用的数学方法 一、创建 Date 对象 什么是Date对象:Date对象用来处理日期和时间 Date 对象由新的 Date() 构造函数创建。 有 4 种方法创建新的日期对象： new Date() new Date(year, month, day, hours, minutes, seconds, milliseconds) new Date(milliseconds) new Date(date string) 1.1、new Date() new
js 写日期
weixin_30301449的博客
04-07 135
<SCRIPT language="JavaScript" type="text/JavaScript"> today = new Date(); var day="" var date1="" if(today.getDay()==0) day = "星期日" else if(today.g...
Js关于日期的方法
徐三岁的博客
09-30 174
返回一个月中的最后一天 function getMonthLastDate(date, format) { if (!format) format = '-'; date = date? new Date(date) : new Date(); let y = date.getFullYear(); let m = date.getMonth() + 1; let p = m; if (p < 10){ p = "0"+ p } if(m === 2){
js日期范围初始化得到前一个月日期的方法
10-24
本文将详细介绍如何使用JavaScript代码获取当前日期的前一个月日期，并且包括了一段重要的日期格式化的函数代码，使得日期能够按照我们希望的格式进行展示。 首先，我们来看看JavaScript中的Date对象。Date对象是...
js实现获取两个日期之间所有日期的方法
10-22
在给定的文件内容中，首先定义了一个名为`getDate`的函数，该函数的目的是将日期字符串转换成Date对象。在这个过程中，我们将日期字符串（格式为YYYY-MM-DD）按“-”分割，然后使用分割后的数组创建一个Date对象。这...
JS:一个匹配日期的正则
12-09
(1[0-2]|0?[1-9])[-./](0?[1-9]|[12][0-9]|3[01])[-./](\d\d\d\d) $1 匹配 10,11,12,01,02,03,04,05,06,07,08,09 也是匹配 月份 $2 匹配 01,02... 您可能感兴趣的文章:JavaScript利用正则表达式去除日期中的
js判断两个日期是否相等的方法
10-26
在JavaScript中，日期对象比较是一个常见的需求，但直接使用等号比较两个日期对象并不能得到正确的结果，因为它们属于引用类型。在JavaScript中，即使两个日期对象的日期和时间看起来完全一样，它们的引用地址是不同...
js实现日期列表 js实现日期列表
06-05
js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载 js日期列表 测试成功 欢迎下载
JavaScript 30 JavaScript 日期格式
谢谢你们的关注
10-30 3727
JavaScript 30 JavaScript 日期格式
JS 日期Date对象 创建及其方法 格式化
海胆的博客
05-21 1150
new Date() new Date(year, month, day, hours, minutes, seconds, milliseconds) new Date(milliseconds) new Date(dateString) js的月以 0-11 计算 年份只写两位以下，默认是 19xx 年 milliseconds可以设置为负数，向基准时间之前推 转化为字符串的方法 .toUTCString() 将日期转换为 UTC 字符串 (不考虑时区的加减) .toDateString() 只显示.
纯javascript编写js日期控件
Curtain
01-23 6937
function PopupCalendar(InstanceName) { ///Global Tag this.instanceName=InstanceName; ///Properties this.separator="-" this.oBtnTodayTitle="����" this.oBtnCancelTitle="ȡ��" //oCalendarChs.oBtnTo
js实现一个简单时间页面
Growing_hacker的博客
08-20 784
页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时间</title> <style> #showtime { width: 1200px; height: 800px; background-color: skyblue; line-height: 800px; margin
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、倒计时、时钟、相关插件 day.js 等
朝阳39的博客
12-12 5409
js 处理日期时间实用技能汇总 new Date() Fri Jul 13 2018 05:54:16 GMT+0800 (中国标准时间) var date = new Date(); "现在的时间是："+date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"...
需要知道的JS的日期的知识，都在这了
weixin_38170065的博客
06-25 725
译者：前端小智 原文：css-tricks.com/everything-… 为了保证的可读性，本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ JS中的 Date 很奇怪。当我们需要处理日期和时间的时候比较麻烦，经常借助像date-fns和 Moment 这样的库。 但是我们并不总是需要使用库。如果知道要注意一些总是，日期实际上可以非常简单。接下介...
Date转换为字符串
djs94832的博客
08-21 1092
Date转为字符串 <p id = "demo"></p> <script type="text/javascript"> var box = new Date(); document.write(box.toUTCString()); alert(box.toStrin...
手把手教你写Js日期时间选择器(2)-样式实现
寄莫相伴的专栏
08-09 8779
日期时间选择器样式实现. 准备工作 代码实现.
使用js 写一个日期插件
最新发布
05-27
首先，您需要定义一个HTML元素来显示日期，并在其中添加一个文本框和一个按钮。例如： ```html 选择日期 ``` 然后，您可以使用JavaScript来为按钮添加事件处理程序，以便在单击按钮时显示日期选择器。您可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值