简单的js日历插件

﹏ヽ暗。殇╰゛Y 2023-10-18 13:01 9阅读 0赞

### 一、使用前提 ###

1.该组件需要jQuery的支持，请在该js文件之前引入jQuery。  
2.如果你需要为两个以上Input绑定日历组件，那么你要确保这两个Input直接父类div不同。

### 二、效果演示 ###

html代码

<div>
    	<p>创建时间</p>
    	<input type="text" onclick="calendarInit(this)"/> 
    </div>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDY4ODU2_size_16_color_FFFFFF_t_70]

### 三、源代码 ###

var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月",
    	"十月", "十一月", "十二月");
    var weekDay = new Array("日", "一", "二", "三", "四", "五", "六");
    var suffix = /day$/; //请勿修改
    var moveInColor = "#79D0FF";
    var calendarColor = "#F4F4F4";
    var curMonthColor = "#444444";
    var notCurMonthColor = "#E0E0E0";
    var restDayColor = "#FF0000";
    var today = new Date();
    var divWidth = "180";
    var divHeight = "auto";
    var btnWidth ="20";
    var btnHeight="20";
    var selectWidth="68";
    var selectHeight="20";
    var startYear = 2000;
    var endYear = 2050;
    var tdWidth="25";
    var tdHeight="25";
    
    function createCalendar(input) {
        
    	var calendarDiv = $("<div class='calendarDiv'>");
    	calendarDiv.css({
        "width" : divWidth,"height" : divHeight,"border" : "1px solid black",
    		"position" : "absolute","backgroundColor" : "#F4F4F4","textAlign":"center"
    	})
    	
    	var leftBtn = $("<button><</button>");
    	var rightBtn = $("<button>></button>");
    	var yearSelect = $("<select>");
    	var monthSelect = $("<select>");
    	var calendar = $("<table>");
    	var todayTd = null;
    	// 添加年份下拉框
    	var start=startYear;
    	var end=endYear;
    	for (; start < end;) {
        
    		yearSelect.append($("<option value=" + start + ">" + start++
    				+ "年" + "</option>"));
    	}
    	// 添加月份下拉框
    	for (var i = 0; i < months.length; i++) {
        
    		monthSelect.append($("<option value=" + i + ">" + months[i]
    				+ "</option>"));
    	}
    	//添加th
    	var calendarTr = $("<tr>");
    	for (var i = 0; i < weekDay.length; i++) {
        
    		calendarTr.append($("<th>" + weekDay[i] + "</th>"));
    	}
    	
    	calendar.append(calendarTr);
    	calendarDiv.append(leftBtn);
    	calendarDiv.append(yearSelect);
    	calendarDiv.append(monthSelect);
    	calendarDiv.append(rightBtn);
    	calendarDiv.append(calendar);
    
    	// 为select添加改变事件
    	yearSelect.change(calendarChange);
    	monthSelect.change(calendarChange);
    	// 为select添加初始值，值为今天
    	yearSelect.val(today.getFullYear());
    	monthSelect.val(today.getMonth());
    	// 添加事件
    	// 日历鼠标移动事件
    	calendar.mousemove(function(e) {
        
    		var obj = $(e.target);
    		if (suffix.test(obj.attr("class"))) {
        
    			obj.css("backgroundColor", moveInColor);
    		}
    	});
    	// 日历鼠标离开事件
    	calendar.mouseout(function(e) {
        
    		var obj = $(e.target);
    		if (e.target != todayTd && suffix.test(obj.attr("class"))) {
        
    			obj.css("backgroundColor", calendarColor);
    		}
    	});
    	// 日历点击事件
    	calendar.click(function(e) {
        
    		var obj = $(e.target);
    		var year = parseInt(yearSelect.val());
    		var month = parseInt(monthSelect.val());// 这里的month是下标不是月份，需要+1
    		var day = parseInt(obj.html());
    		// 判断是这个月还是上个月还是下个月
    		if (obj.attr("class") == "day") {
        
    			input.val(year + "-" + (month+1) + "-" + day);
    		} else if (obj.attr("class") == "prevday") {
        
    			if (month <= 0) {
        
    				input.val((year-1) + "-" + 12 + "-" + day);
    			}else{
        
    				input.val(year + "-" + month + "-" + day);
    			}
    		} else if (obj.attr("class") == "nextday") {
        
    			if (month < 11) {
        
    				input.val(year + "-" + (month+2) + "-" + day);
    			} else {
        
    				input.val((year+1) + "-" + 1 + "-" + day);
    			}
    		}
    
    	});
    	// 左按钮事件
    	leftBtn.click(function() {
        
    		var month = parseInt(monthSelect.val());
    		if (month > 0) {
        
    			monthSelect.val(month - 1);
    		} else {
        
    			yearSelect.val(parseInt(yearSelect.val()) - 1);
    			monthSelect.val(11);
    		}
    		calendarChange();
    	});
    
    	// 右按钮事件
    	rightBtn.click(function() {
        
    		var month = parseInt(monthSelect.val());
    		if (month < 11) {
        
    			monthSelect.val(month + 1);
    		} else {
        
    			yearSelect.val(parseInt(yearSelect.val()) + 1);
    			monthSelect.val(0);
    		}
    		calendarChange();
    	});
    
    	// 显示日历
    	input.focusin(function() {
        
    		calendarDiv.css("display", "block");
    	});
    	// 隐藏日历
    	$(document).click(
    		function(e) {
        
    			var obj = $(e.target);
    			if ((calendarDiv.find(obj).get(0)==null && obj.get(0) != input.get(0))
    					|| suffix.test(obj.attr("class"))) {
        
    				calendarDiv.css("display", "none");
    			}
    		});
    
    	
    	// 日历改变方法
    	function calendarChange() {
        
    		calendar.find(".calendarDate").remove();
    
    		var year = parseInt(yearSelect.val());
    		var month = parseInt(monthSelect.val());
    		// 获得这个月有多少天
    		var days = new Date(year, month + 1, 0).getDate();
    		// 上个月有多少天
    		var prevDays = (month + 1) > 0 ? new Date(year, month, 0).getDate()
    				: new Date(year - 1, 12, 0).getDate();
    		// 这个月1号星期几
    		var week = new Date(year, month, 1).getDay();
    		
    		var curDay = 1, nextDay = 1;// 这个月日期和下个月日期
    		// 上个月日期
    		var prevDay = prevDays - week + 1;
    		for (var i = 0; i < 6; i++) {
        
    			calendarTr = $("<tr class='calendarDate'>");
    			calendar.append(calendarTr);
    			for (var j = 0; j < 7; j++) {
        
    				var tempYear = year;
    				var tempMonth = month;
    				if (i == 0 && j < week) {
        
    					var calendarTd = $("<td class='prevday'>" + prevDay++
    							+ "</td>");
    					if (month > 0) {
        
    						tempMonth--;
    					} else {
        
    						tempYear--;
    						tempMonth = 11;
    					}
    					calendarTd.css("color", notCurMonthColor);
    				} else if (curDay <= days) {
        
    					var calendarTd = $("<td class='day'>" + curDay++ + "</td>");
    					calendarTd.css("color", curMonthColor);
    				} else {
        
    					var calendarTd = $("<td class='nextday'>" + nextDay++
    							+ "</td>");
    					calendarTd.css("color", notCurMonthColor);
    					if (month < 11) {
        
    						tempMonth++;
    					} else {
        
    						tempYear++;
    						tempMonth = 0;
    					}
    				}
    				if ((j == 0 || j == 6) && calendarTd.attr("class") == 'day') {
        
    					calendarTd.css("color", restDayColor);
    				}
    				if (new Date(tempYear, tempMonth, calendarTd.html()).setHours(
    						0, 0, 0, 0) == today.setHours(0, 0, 0, 0)) {
        
    					todayTd = calendarTd.get(0);
    					calendarTd.css("backgroundColor", moveInColor);
    				}
    				calendarTr.append(calendarTd);
    			}
    
    		}
    
    		$(".calendarDiv th,.calendarDiv td").css({
        "width":"26","height":"24","textAlign":"center"});
    	};
    	calendarChange();
    	return calendarDiv;
    }
    
    // 初始化日历
    function calendarInit(input) {
        
    	if ($(input).next().attr("class")!= "calendarDiv") {
        
    		var startCalendar = createCalendar($(input));
    		// 为输入框添加日历组件
    		$(input).after(startCalendar);
    		$(".calendarDiv select").css({
        "height" : selectHeight,"width" : selectWidth});
    		
    		$(".calendarDiv button").css({
        "width" : btnWidth,"height" : btnHeight,"textAlign" : "center"});
    		
    		$(".calendarDiv th,.calendarDiv td").css({
        "width":tdWidth,"height":tdHeight,"textAlign":"center"});
    	}
    }

### 四、使用方式 ###

在导入jQuery和该js代码后，  
只需要在指定input中加入一个 οnclick=“calendarInit(this)” 点击事件即可。  
使用者可以自行修改参数改变该日历的样式。  
由于我是做java的，所以该日历的制作不算精良，希望我的分享可以为大家提供帮助。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDY4ODU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181223175408408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDY4ODU2,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 js写简单日历

目录生成日历绑定事件代码部分样式 ![在这里插入图片描述][1248f150b8d247f4989cb845c47aaa0e.png_p

水深无声/ 2024年03月31日 10:02/ 0 赞/ 69 阅读

相关简单的js日历插件

一、使用前提 1.该组件需要jQuery的支持，请在该js文件之前引入jQuery。 2.如果你需要为两个以上Input绑定日历组件，那么你要确保这两个Input直接

﹏ヽ暗。殇╰゛Y/ 2023年10月18日 13:01/ 0 赞/ 10 阅读

相关 bootstrap-datepicker日历插件

bootstrap-datepicker为日历插件，需要加载css与js 先把网址放上去找到一个英文版的：[https://bootstrap-datepicker.

骑猪看日落/ 2023年06月16日 15:53/ 0 赞/ 47 阅读

相关原生js日历选择器插件开发实例教程

在web开发过程中经常会碰到需要选择日期的功能，一般的操作都是在文本框点击，然后弹出日历选择框，直接选择日期就可以在文本框显示选择的日期。开发好之后给用户使用是很方便，但如果每

迷南。/ 2022年10月23日 14:30/ 0 赞/ 594 阅读

相关 js带事件功能的日历插件代码

[下载地址][Link 1] js带事件功能的日历插件代码，可以添加每日事项内容和更改主题颜色，日历笔记应用功能代码 ![6dab05f1ec4f84f77a561691f

短命女/ 2022年08月28日 08:57/ 0 赞/ 180 阅读

相关 js实现的日历控件

js实现的日历控件效果如下： ![Center][] 需要引入dateWidget.js <!DOCTYPE HTML PUBLIC "-//W3C//

朴灿烈づ我的快乐病毒、/ 2022年08月27日 03:22/ 0 赞/ 248 阅读

相关 jQuery 日历插件：daterangepicker

官网：[http://www.daterangepicker.com/][http_www.daterangepicker.com] 介绍 jQuery 插件库：

蔚落/ 2022年05月27日 12:06/ 0 赞/ 354 阅读

相关 js日历控件

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

水深无声/ 2022年03月09日 05:30/ 0 赞/ 334 阅读

相关 js日历控件

[http://kimsoft-jscalendar.googlecode.com/svn/trunk/help.html][http_kimsoft-jscalendar.g

朱雀/ 2021年12月15日 14:39/ 0 赞/ 517 阅读

相关日历插件

html文件: <!DOCTYPE html> <html> <head lang="en"> <meta charset='utf-8'/

谁践踏了优雅/ 2021年07月24日 15:55/ 0 赞/ 726 阅读