首页 > 代码库 > 自己写了个日历插件
自己写了个日历插件
<!DOCTYPE html>
<html>
<head>
<title>日历</title>
<meta charset="utf-8">
<script src="http://www.mamicode.com/js/jquery.js"></script>
<style>
.wdate{position:relative;left:100px;}
.rili{border:1px solid #bbb;padding:10px;}
.rili{text-align:center;min-width:200px;width:100%;max-width:200px;position:absolute;}
.rili .left{float:left;margin-left:20px;display:block;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #000000;width: 0;height: 0;margin: 0 auto;}
.rili .right{float:right;margin-right:20px;display:block;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #000000;width: 0;height: 0;margin: 0 auto;}
.rili .header{height:22px;line-height:22px;width:90%;margin:0 auto;}
.rili .table{margin-top:5px;padding:5px;width:100%;border-collapse:collapse;}
.rili .table th{width:14%;}
.rili .table tr{margin:10px;}
.rili .nowd{background:#b1dcfb;border:1px solid #0089ec;}
.rili .prev{color:#dddddd;}
.rili #hour,.rili #minutes,.rili #seconds{display:none;border:1px solid #bbb;}
.rili #seconds{padding:1px 4px;}
.rili .nav{float: left;margin-top: 10px;margin-left: 7px;}
.rili .nav .choose{border:1px solid #bbb;display:inline-block;padding:1px 13px;}
.rili .aleft{float:left;margin-top:15px;text-decoration: none;}
.rili .aright{float:right;margin-top:15px;text-decoration: none;}
</style>
</head>
<body>
<div style="margin:auto;">
<input type="text" name="wdate" class="wdate" onClick="initialie(‘hours‘)">
</div>
<script>
var patt = new RegExp(/^[0-9]*[1-9][0-9]*$/);
function te() {
return $(".rili").on("click", ".right,.left", function () {
if ($(".months").is(":hidden") && $(this).hasClass(‘right‘)) {
$(".rili .year").html(parseInt($(".rili .year").html()) + 1);
} else if ($(".months").is(":hidden") && $(this).hasClass(‘left‘)) {
$(".rili .year").html(parseInt($(".rili .year").html()) - 1);
} else {
var nmonth = transformation($(".rili .month").html(), ‘2‘);
var year = parseInt($(".rili .year").html());
var month1 = 0;
if ($(this).hasClass(‘right‘)) {
if (nmonth == ‘12‘) {
nmonth = ‘0‘;
year += 1;
}
month1 = parseInt(nmonth + 1);
} else {
if (nmonth == ‘1‘) {
nmonth = ‘13‘;
year -= 1;
}
month1 = parseInt(nmonth - 1);
}
var month = transformation(month1, ‘1‘);
var days = getDays(month1, year);
if (month1 == 12 || month1 == 1) {
var days2 = getDays(month1, year);
} else {
var days2 = getDays(month1 - 1, year);
}
append(year, month1, days2);
}
}), $(".rili").on("dblclick", ".table td", function () {
if (types.type == ‘hour‘) {
$("input[name=‘wdate‘]").val($(this).attr("date") + " " + $(".rili .choose .hour").html() + ":" + $(".rili .choose .minutes").html() + ":" + $(".rili .choose .seconds").html());
} else {
$("input[name=‘wdate‘]").val($(this).attr("date"));
}
}), $(".rili").on("click", ".hour,.minutes,.seconds", function (e) {
e = e || window.event;
if (e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
$("#" + $(this).attr(‘class‘)).siblings("div").hide();
$("#" + $(this).attr(‘class‘)).css({"display": "block", "position": "absolute", "left": $(".rili .nav .choose").position().left, "bottom": $(".rili").outerHeight() - $(".rili .nav .hour").position().top, "background": "#fff"});
}), $(".rili").on("click", ".date", function () {
$(".rili .months,.rili .shi").hide();
var string = ‘<tr class="td">‘;
$.each(months, function (i, e) {
if (patt.test(i / 4)) {
string += ‘<tr class="td">‘;
}
string += "<td class=‘mon‘>" + e + "</td>";
})
$(".rili .table").empty();
$(".rili .table").append(string);
}), $(".rili").on("click", ".mon", function () {
$(".rili .months,.rili .shi").show();
var year = parseInt($(".rili .year").html());
var month = $(this).html();
var month = transformation(month.replace("月", ‘‘), 2);
var days2 = getDays(month, year);
append(year, month, days2);
}), $(".rili").on("click", "#hour table td,#minutes table td,#seconds table td", function (e) {
e = e || window.event;
if (e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
$(".rili .choose ." + $(this).parents("div").attr("id")).html($(this).html());
}), $("body").on("click", ".rili", function () {
$(".rili #hour,.rili #minutes,.rili #seconds").hide();
}), $(".rili").on("mouseover", ".td td", function () {
$(this).css("background", "#b1dcfb");
}), $(".rili").on("mouseout", ".td td", function () {
if (!$(this).hasClass("nowd")) {
$(this).css("background", "#fff");
}
}),$(".rili").on("click",".aleft",function(){
$(".rili .table td").trigger("dblclick");
types.status = false;
$(".rili").hide();
}),$(".rili").on("click",".aright",function(){
types.status = false;
$(".rili").hide();
})
}
var chnNumChar = {
一: 1,
二: 2,
三: 3,
四: 4,
五: 5,
六: 6,
七: 7,
八: 8,
九: 9,
十: 10,
十一: 11,
十二: 12
};
var months = [‘一月‘, ‘二月‘, ‘三月‘, ‘四月‘, ‘五月‘, ‘六月‘, ‘七月‘, ‘八月‘, ‘九月‘, ‘十月‘, ‘十一‘, ‘十二‘];
//initialie(‘hours‘);//初始化
function transformation(num, type) {
var month = ‘‘;
$.each(chnNumChar, function (i, e) {
if (type == ‘1‘) {
if (num == e) {
month = i;
}
} else {
if (num == i) {
month = e;
}
}
})
return month;
}
function getDays(month, year) {
var days;
if (month == 2) {
days = year % 4 == 0 ? 29 : 28;
} else if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
days = 31;
} else {
days = 30;
}
return days;
}
function date(days, week, day2, myDate) {
var date2 = new Date();
var nowDate = date2.getDate();
var day1year = myDate.getFullYear();
var day1month = myDate.getMonth() + 1;
var day1year2 = day1year;
var day1month2 = day1month;
if (day1month == 1) {
day1month2 = 13;
day1year2 = day1year - 1;
} else if (day1month == 12) {
day1month2 = 0;
day1year2 = day1year + 1;
}
var day3year = date2.getFullYear();
var day3month = date2.getMonth() + 1;
//console.log(myDate.getFullYear(),myDate.getMonth() + 1,date2.getFullYear(),date2.getMonth() + 1);
var num2 = 0;
var string = ‘<tr class="head"><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr><tr class="td">‘;
for (var i = 1; i <= week; i++) {
string += ‘<td class="prev" date = "‘ + day1year2 + ‘-‘ + (day1month2 - 1) + ‘-‘ + (day2 - week + i) + ‘">‘ + (day2 - week + i) + ‘</td>‘;
}
for (var i = 1; i <= days; i++) {
if (patt.test((week + i - 1) / 7)) {
string += ‘<tr class="td">‘;
num2 += 1;
}
if (i < 10) {
var i2 = ‘0‘ + i;
} else {
var i2 = i;
}
if (day1year == day3year && day1month == day3month && i == nowDate) {
string += ‘<td class="nowd" date = "‘ + day1year2 + ‘-‘ + day1month2 + ‘-‘ + i2 + ‘">‘ + i + ‘</td>‘;
} else {
string += ‘<td date = "‘ + day1year2 + ‘-‘ + day1month2 + ‘-‘ + i2 + ‘">‘ + i + ‘</td>‘;
}
}
var num3 = 42 - (week + days);
for (var i = 1; i <= num3; i++) {
if (patt.test(((week + days) - num2 * 7 + i - 1) / 7)) {
string += ‘<tr class="td">‘;
}
if (i < 10) {
var i2 = ‘0‘ + i;
}
string += ‘<td class="prev" date = "‘ + day1year2 + ‘-‘ + (day1month2 + 1) + ‘-‘ + i2 + ‘">‘ + i + ‘</td>‘;
}
$(".rili .table").empty();
$(".rili .table").append(string);
}
function initialie(hours) {
if(types.status){
return false;
}else{
types.status = true;
}
var string = ‘<div class="rili"><div class="header"><span class="left"></span><div class="date" style="display:inline-block;"><div class="months" style="display:inline-block;"><span class="month"></span><span>月</span></div> <span class="year"></span></div><span class="right"></span></div><table class="table"></table><div><a href="javascript:;" class="aleft">确定</a><a href="javascript:;" class="aright">取消</a></div></div>‘;
$(".wdate").after(string);
$(".rili").css({"position": "absolute", "left": $(".wdate").offset().left, "top": $(".wdate").outerHeight() + $(".wdate").offset().top, "z-index": "1000"});
var time = hour();
if (hours == ‘hours‘) {
types.aa(‘hour‘);
var string2 = ‘<div class="shi"><div id="hour"><table>\n<tr><td>1</td><td>2</td><td>3</td><td>4</td>\n\<td>5</td><td>6</td></tr>\n<tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>\n<tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>\n<tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td></tr>\n</table></div><div id="minutes"><table>\n<tr><td>0</td><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td>\n<tr><td>30</td><td>35</td><td>40</td><td>45</td><td>50</td><td>55</td>\n</tr></table></div><div id="seconds"><table><tr>\n<td>0</td><td>10</td><td>20</td><td>30</td><td>40</td><td>50</td></tr></table></div><nav class="nav">时间 <div class="choose"><span class="hour">‘ + time.hour + ‘</span> : <span class="minutes">‘ + time.minutes + ‘</span> : <span class="seconds">‘ + time.seconds + ‘</span></div></nav></div><br/>‘;
$(".rili .table").after(string2);
}
$("body").append(te());
var myDate = new Date();
myDate.setDate(1);
var y = myDate.getFullYear();
var m = myDate.getMonth() + 1;
var m2 = transformation(m, ‘1‘);
var m3 = myDate.getMonth();
var day = getDays(m, y);
var day2 = getDays(m3, y);
var week = myDate.getDay();
var myDate2 = new Date();
$(".rili .month").html(m2);
$(".rili .year").html(y);
date(day, week, day2, myDate2);
}
function append(year, month, days2) {
$(".rili .year").html(year, 1);
$(".rili .month").html(transformation(month, 1));
var days = getDays(month, year);
if (!days2) {
var days2 = getDays(month, year);
}
var myDate = new Date(year + ‘/‘ + month + ‘/‘ + ‘01‘);
var week = myDate.getDay();
date(days, week, days2, myDate);
}
function hour() {
var date = new Date();
var time = [];
time[‘hour‘] = date.getHours();
time[‘minutes‘] = date.getMinutes();
time[‘seconds‘] = date.getSeconds();
return time;
}
var types = {
type: ‘‘,
aa: function (type) {
return this.type = type;
}
};
</script>
</body>
</html>
都是一些初级的知识，感觉有点low...，样式也不好看。。。，很尴尬。
自己写了个日历插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。