超过字数限制了，所以分多次发，js源码因为有30207个字，又超最大限度了，所以只能一半一半发。这是上半部分，需要和下半部分连起来。
js文件上半部分
function Calendar() {
var wrapContent = this;
var boxWrap = $('<div class="calendar_box_wrap hide"></div>'); //外层透明遮罩
var wrapNode = this.wrapNode = $('<div class="calendar_box"></div>'); //日历外壳
boxWrap.append(wrapNode.get(0));
var nstr = new Date(); //当前Date资讯
var ynow = nstr.getFullYear(); //年份
var mnow = nstr.getMonth(); //月份
var mnowTxt = mnow + 1;
var dnow = nstr.getDate(); //今日日期
var hnow = nstr.getHours(); //当前小时
var minnow = nstr.getMinutes(); //当前分钟
var nowData = new Date(); //选中日期
var week = "周" + "日一二三四五六".split("")[nowData.getDay()];
var dataList = {};
var selectHour = 0;
var selectMinutes = 0;
dataList.year = ynow;
dataList.info = mnowTxt + "月" + dnow + "日" + "," + week;
dataList.txt = ynow + "年" + mnowTxt + "月";
var headShowNode = new HeadShowNode();
var calendarNode = new CalendarNode();
var buttonNode = new ButtonNode();
var timeNode = new TimeNode();
var monthNode = new MonthNode();
var yearNode = new YearNode();
var cfg = {};
var finalDate = null;
var formatParameter = ""; //格式化格式
var clickMark = 0; //0-未点击，1-点击过一次，2-点击过两次
//参数数组
var arg = Array.prototype.slice.call(arguments);
//var 默认配置
var defaultConfig = {
showPosition: "false",
wrapBg: "rgba(0, 0, 0, 0.541176)",
inputId: "",
boxWidth: "240px",
boxHeight: "350px",
boxRadius: "0px",
txtColor: "#222222",
bgColor: "#ffffff",
boxPadding: "0",
boxMargin: "-175px 0 0 -120px",
boxZIndex: "999",
boxOpacity: "1",
boxSizing: "border-box",
boxPosition: "absolute",
boxTop: "50%",
boxLeft: "50%",
boxShadow: "rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px",
headColor: "#f36444",
startTime: "1970-0-1 00:00",
endTime: "2100-0-1 00:00",
dataFormat: "yyyy-MM-dd hh:mm",
isHourMin: true,
isHourOnly: false,
callback: null,
showCallback: null,
hideCallback: null
};
//配置函数(会根据用户传的参数和defaultConfig合并生成用户配置对象)
var config = $.extend(defaultConfig, arg[0]);
var startTimeArr=config.startTime.split(" ");
var endTimeArr=config.endTime.split(" ");
var startYear=startTimeArr[0].split("-")[0];
var startMonth=startTimeArr[0].split("-")[1]-1;
var startDay=startTimeArr[0].split("-")[2];
// var startHour=startTimeArr[1].split(":")[0];
// var startMin=startTimeArr[1].split(":")[1];
var endYear=endTimeArr[0].split("-")[0];
var endMonth=endTimeArr[0].split("-")[1]-1;
var endDay=endTimeArr[0].split("-")[2];
// var endHour=endTimeArr[1].split(":")[0];
// var endMin=endTimeArr[1].split(":")[1];
if(config.showPosition == true) {
config.boxTop = parseInt($(config.inputId).offset().top) + parseInt($(config.inputId).css("height")) + "px";
config.boxLeft = $(config.inputId).offset().left;
config.boxMargin = 0;
config.wrapBg = "rgba(255, 255, 255,0)";
} else {
config.boxTop = "50%";
config.boxLeft = "50%";
config.boxMargin = "-175px 0 0 -120px";
config.wrapBg = "rgba(0, 0, 0, 0.541176)";
}
//添加到页面
this.appendTo = function(_jq) {
$(_jq).append(boxWrap.get(0));
boxWrap.css({
background: config.wrapBg
})
wrapNode.css({
width: config.boxWidth,
height: config.boxHeight,
borderRadius: config.boxRadius,
color: config.txtColor,
background: config.bgColor,
fontSize: config.txtSize,
padding: config.boxPadding,
margin: config.boxMargin,
zIndex: config.boxZIndex,
opacity: config.boxOpacity,
boxSizing: config.boxSizing,
position: config.boxPosition,
top: config.boxTop,
left: config.boxLeft,
boxShadow: config.boxShadow
});
};
//初始化
this.setConfig = function() {
wrapContent.appendTo("body");
wrapContent.setInstall();
wrapContent.formatDate();
}
//初始化设置
this.setInstall = function() {
wrapContent.wrapNode.find(".go_back_btn").addClass("hide");
wrapContent.wrapNode.find(".cancel_btn").removeClass("hide");
calendarNode.show();
timeNode.hide();
formatMark = config.isHourMin;
if(formatMark) {
wrapContent.wrapNode.find(".make_sure_btn").removeClass("hide");
wrapContent.wrapNode.find(".ok_btn").addClass("hide");
} else {
wrapContent.wrapNode.find(".make_sure_btn").addClass("hide");
wrapContent.wrapNode.find(".ok_btn").removeClass("hide");
}
}
var calendarControl = new CalendarControl();
//回调函数
this.setCallback = function(_callback) {
callback = _callback;
};
this.getCallback = function() {
return callback;
};
this.show = function() {
boxWrap.fadeIn(500, function() {
if(typeof(config.showCallback) === "function") {
config.showCallback();
}
}).removeClass("hide");
}
this.hide = function() {
boxWrap.fadeOut(500, function() {
if(typeof(config.hideCallback) === "function") {
config.hideCallback();
}
}).addClass("hide");
}
//格式化日期
this.formatDate = function() {
formatParameter = config.dataFormat;
var paddNum = function(num) {
num += "";
return num.replace(/^(\d)$/, "0$1");
}
//指定格式字符
cfg = {
yyyy: ynow, //年 : 4位
yy: ynow.toString().substring(2), //年 : 2位
M: mnowTxt, //月 : 如果1位的时候不补0
MM: mnowTxt < 10 ? "0" + mnowTxt : mnowTxt, //月 : 如果1位的时候补0
d: dnow, //日 : 如果1位的时候不补0
dd: dnow < 10 ? "0" + dnow : dnow, //日 : 如果1位的时候补0
hh: selectHour < 10 ? "0" + selectHour : selectHour, //时
mm: selectMinutes < 10 ? "0" + selectMinutes : selectMinutes, //分
ss: "00" //秒
}
if(!formatMark) {
if(formatParameter.indexOf("h") == -1) {
formatParameter = formatParameter;
} else {
formatParameter = "yyyy-MM-dd";
}
}
return formatParameter.replace(/([a-z])(\1)*/ig, function(m) {
return cfg[m];
});
}
this.getNowTime = function() {
var aaaaaa = new Date(ynow, mnow, dnow, selectHour, selectMinutes).getTime();
return aaaaaa;
}
//总管理器
function CalendarControl() {
headShowNode.setData(dataList);
calendarNode.setData();
buttonNode.setData();
timeNode.setData();
monthNode.setData();
yearNode.setData();
}
//头部显示对象
function HeadShowNode() {
var content = this;
var node = this.node = $('<div class="head_show"><div class="head_year">' + "2016" + '</div><div class="head_info_box"><div class="head_info">' + "12月30日,周五" + '</div></div></div>');
this.appendTo = function(_jq) {
$(_jq).append(content.node.get(0));
}
this.setData = function(_dataList) {
node.css({
background: config.headColor
});
content.appendTo(wrapNode);
content.setText(_dataList);
}
this.setText = function(_list) {
node.find(".head_year").text(_list.year);
node.find(".head_info").text(_list.info);
}
}
//中部日历对象
function CalendarNode() {
var content = this;
var node = this.node = $('<div class="calendar_node_wrap"></div>');
this.appendTo = function(_jq) {
$(_jq).append(content.node.get(0));
}
this.setData = function() {
content.appendTo(wrapNode);
content.setCalendar(ynow, mnow, dnow);
}
this.show = function() {
content.node.css({
left: "0px"
});
}
this.hide = function() {
content.node.css({
left: "-300px"
});
}
//缩小消失
this.hideScale = function() {
content.node.find(".all_wrap").removeClass("scale_box_big").removeClass("scale_box_big_big").addClass("scale_box_lit").addClass("hide");
}
//放大出现
this.showScale = function() {
content.node.find(".num_wrap").removeClass("num_wrap_move");
content.node.find(".all_wrap").removeClass("scale_box_big_big").removeClass("scale_box_lit").addClass("scale_box_big").removeClass("hide");
}
//判断选中月份是否为当年当月
this.selectIsYM = function() {
if(ynow == new Date().getFullYear() && mnow == new Date().getMonth()) {
content.setCalendar(ynow, mnow, new Date().getDate());
} else {
content.setCalendar(ynow, mnow, 0);
}
}
this.setCalendar = function(_year, _mnow, _dnow) {
node.empty();
mnowTxt = _mnow + 1;
dataList.txt = _year + "年" + mnowTxt + "月";
var btnNode = $('<div class="calendar_node"><div class="prev_month">' + "<" + '</div><div class="calendar_txt"><div class="calendar_txt_move">' + dataList.txt + '</div></div><div class="next_month">' + ">" + '</div><div class="clear_float"></div></div>');
node.append(btnNode.get(0));
function isLeap(_year) {
return(_year % 100 == 0 ? res = (_year % 400 == 0 ? 1 : 0) : res = (_year % 4 == 0 ? 1 : 0));
} //是否为闰年
var n1str = new Date(_year, _mnow, 1); //当月第一天Date资讯
var firstday = n1str.getDay(); //当月第一天星期几
var m_days = new Array(31, 28 + isLeap(_year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //各月份的总天数
var tr_str = Math.ceil((m_days[_mnow] + firstday) / 7); //表格所需要行数
var calendarWrap, calendarOne, calendarTwo, calendarThree, calendarFour, calendarKong, calendarBox;
calendarOne = $("<div class='tr_box'><div class='calendar_week'>日</div><div class='calendar_week'>一</div><div class='calendar_week'>二</div><div class='calendar_week'>三</div><div class='calendar_week'>四</div><div class='calendar_week'>五</div><div class='calendar_week'>六</div></div>");
calendarBox = $("<div class='all_wrap'></div>");
calendarWrap = $("<div class='num_wrap num_wrap_move'></div>");
node.append(calendarBox.get(0));
calendarBox.append(calendarOne.get(0));
calendarBox.append(calendarWrap.get(0));
for(i = 0; i < tr_str; i++) { //表格的行
for(k = 0; k < 7; k++) { //表格每行的单元格
idx = i * 7 + k; //单元格自然序列号
date_str = idx - firstday + 1; //计算日期
(date_str <= 0 || date_str > m_days[_mnow]) ? date_str = " ": date_str = idx - firstday + 1; //过滤无效日期（小于等于零的、大于月总天数的）
//打印日期：今天底色为红
if(date_str == _dnow) {
calendarTwo = $("<div class='calendar_fl calenda_today'><div class='color_bg calender_select_node'></div><div class='calender_txt'>" + date_str + "</div></div>");
calendarWrap.append(calendarTwo.get(0));
} else if(date_str == " ") {
calendarKong = $("<div class='kong'>" + date_str + "</div>");
calendarWrap.append(calendarKong.get(0));
} else {
calendarThree = $("<div class='calendar_fl'><div class='color_bg'></div><div class='calender_txt'>" + date_str + "</div></div>");
calendarWrap.append(calendarThree.get(0));
}
}
}
calendarFour = $("</div>");
node.append(calendarFour.get(0));
node.find(".calenda_today").css({
background: config.headColor
});
//点击上个月
node.find(".prev_month").bind("click", function() {
monthNode.hide();
yearNode.hide();
if(mnow == 0) {
ynow--;
mnow = 12;
}
mnow--;
content.selectIsYM();
clickMark = 0;
buttonNode.show();
})
//点击下个月
node.find(".next_month").bind("click", function() {
monthNode.hide();
yearNode.hide();
if(mnow == 11) {
ynow++;
mnow = -1;
}
mnow++;
content.selectIsYM();
clickMark = 0;
buttonNode.show();
})
//点击中部年份
node.find(".calendar_txt").bind("click", function() {
clickMark++;
if(clickMark == 1) { //第一次
wrapNode.find(".calendar_txt_move").text(ynow + "年");
calendarNode.hideScale();
monthNode.show();
buttonNode.hide();
} else if(clickMark == 2) { //第二次
wrapNode.find(".calendar_txt_move").text(ynow + "年");
buttonNode.hide();
monthNode.hide();
yearNode.show();
} else {
return false;
}
})
//点击日期
node.find(".calendar_fl").bind("click", function() {
node.find(".calendar_fl").css({
background: "#ffffff",
color: "#222222"
});
node.find(".calenda_today").css({
color: config.headColor
});
$(this).css({
background: config.headColor,
color: "#ffffff"
});
dataList.year = ynow;
mnowTxt = mnow + 1;
dnow = $(this).text();
nowData = new Date(ynow, mnow, dnow);
week = "周" + "日一二三四五六".split("")[nowData.getDay()];
dataList.info = mnowTxt + "月" + dnow + "日" + "," + week;
headShowNode.setData(dataList);
buttonNode.setCallback(function() {
console.log("点击日期");
});
})
//鼠标滑过日期
node.find(".calendar_fl").bind("mouseover", function() {
$(this).find(".color_bg").css({
background: config.headColor,
opacity: "0.6",
width: "28px",
height: "28px",
lineHeight: "28px",
top: "0",
left: "0",
margin: "0"
})
$(this).find(".calender_txt").addClass("mouseover");
})
//鼠标滑出日期
node.find(".calendar_fl").bind("mouseout", function() {
$(this).find(".color_bg").css({
background: "transparent",
opacity: "1",
width: "14px",
height: "14px",
lineHeight: "14px",
top: "50%",
left: "50%",
margin: "-7px 0 0 -7px"
}).removeClass("mouseover");
$(this).find(".calender_txt").removeClass("mouseover");
})
//左右箭头隐藏
if(startYear >= _year && mnow == startMonth) {
_year = startYear;
content.node.find(".prev_month").addClass("visibility_class");
content.node.find(".prev_month").unbind("click");
for(var i=0;i<startDay-1;i++){
node.find(".calendar_fl").eq(i).find(".color_bg").addClass("visibility_class");
node.find(".calendar_fl").eq(i).addClass("gray_class").unbind().find(".calender_txt").unbind();
}
} else if(endYear <= _year && mnow == endMonth) {
_year = endYear;
content.node.find(".next_month").addClass("visibility_class");
for(var i=m_days[_mnow];i>=endDay;i--){
node.find(".calendar_fl").eq(i).find(".color_bg").addClass("visibility_class");
node.find(".calendar_fl").eq(i).addClass("gray_class").unbind().find(".calender_txt").unbind();
}
} else {
content.node.find(".prev_month").removeClass("visibility_class");
content.node.find(".next_month").removeClass("visibility_class");
};
}
}
随时随地看视频
