一、使用前提
1.该组件需要jQuery的支持，请在该js文件之前引入jQuery。
2.如果你需要为两个以上Input绑定日历组件，那么你要确保这两个Input直接父类div不同。
二、效果演示
html代码
<div>
<p>创建时间</p>
<input type="text" onclick="calendarInit(this)"/>
</div>
效果图
三、源代码
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的，所以该日历的制作不算精良，希望我的分享可以为大家提供帮助。