js实现工作日期选中的日历

最新推荐文章于 2024-08-12 00:30:04 发布

thisisnew

最新推荐文章于 2024-08-12 00:30:04 发布

阅读量2.9k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weu135/article/details/73391565

版权

本文介绍了一个使用JavaScript编写的日历组件，该组件能够显示日期并标记选中日期。主要内容包括计算日期对应星期的方法，根据条件渲染日历，并实现点击日期选中的功能。示例代码展示了具体的实现过程。

摘要由CSDN通过智能技术生成

最近需要做一个日历组件，默认可以选中某些日期，而且日期选中后可以点击日期。

主要做的内容如下：

1.计算天数对应的星期

2.渲染天数，并且判断是否是否为选中日期，选中则画圈。

3.设置选中日期，则直接将选中日期画圈。

废话不多说，代码如下：

(function($){
		$.fn.DatePicker=function(options,params){
			if(typeof options=="string"){
				var method=$.fn.DatePicker.methods[options];
				if(method){
					return method(this,params);
				}
			}
			
			return this.each(function(){
				var opts=$.extend({},$.fn.DatePicker.defaults,options);
				$.data(this,"DatePicker",opts);
				if(opts.width){
					$(this).css("width",opts.width+"px");
				}
				if(opts.height){
					$(this).css("height",opts.height+"px");
				}
				init(this);
			});
		};
		
		var init=function(jq){
			initDatePicker(jq);
			bindEvents(jq);
		};
		
		var isLeap=function(_year){
			if(_year % 4 === 0 && _year % 100 > 0) {
		 			return true ;
		 		}
		 		if(_year % 400 === 0 && _year % 3200 > 0) {
		 			return true ;
		 		}
		 		return false ;
		};
		
		// 获取月的天数
		 function dayLen(year,_month) {
		 		if(_month === 2) {
		 			if(!isLeap(year)) return 28;
		 			return 29;
		 		}
		 		if(_month < 8 && _month % 2 === 1) {
		 			return 31;
		 		}
		 		if(_month >= 8 && _month % 2 === 0) {
		 			return 31;
		 		}
		 		return 30 ;
		 	}
		
			
		var initDatePicker=function(jq){
			var options=$.data(jq,"DatePicker");
		    var strDay=options.strDay;
		    var eStrDay=options.eStrDay;
			var strHtml="<table width='100%'>";
			strHtml+="<thead><tr><th></th><th><a id='monthdown'><<</a></th><th>"+options.year+"年</th><th>"+options.month_EN[options.month-1]+"</th><th>"+options.month_ZH[options.mont