1. Prerequisites for use
1. This component needs jQuery support, please import jQuery before the js file.
2. If you need to bind calendar components to more than two Inputs, then you have to make sure that the direct parent divs of these two Inputs are different.
2. Effect demonstration
html code
<div>
<p>创建时间</p>
<input type="text" onclick="calendarInit(this)"/>
</div>
Effect picture
Three, source code
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"});
}
}
Four, use method
After importing jQuery and the js code, you
only need to add an οnclick="calendarInit(this)" click event to the specified input.
The user can modify the parameters by himself to change the style of the calendar.
Since I am doing java, the calendar is not well made. I hope my sharing can help everyone.