本文给大家分享的是使用纯 javascript 实现的日历控件的代码,笔者也是第一次写控件,摸索着前行,
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了。可能最值得说的一点就是让 input 控件内部右边显示一个按钮,我是直接给 input 加了个背景,然后把 input 的边框去掉实现的。
这个是最初版的,再往后打算做出纯 javascript 版的,再往后打算用 JQuery 做一套。
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 日历控件
- </title>
- <style>
- #date_text { background-image: url(images/input.png); background-repeat:no-repeat;
- width: 198px; height: 27px; border:none; padding-left:5px; cursor:pointer;
- } #cal_body { width: 198px; height: auto; overflow:hidden; border: solid
- 1px #CCCCCC; display: none; position:absolute; z-index:10; } .line { width:100%;
- height:26px; float:left; background-color:#0FF; font-size:14px; } .cube
- { float:left; width:26px; height:26px; line-height:26px; text-align:center;
- margin-left:2px; margin-bottom:2px; } .btn { float:left; background-color:#CCC;
- margin-left:10px; width:20px; height:20px; text-align:center; line-height:20px;
- border-radius:3px; border:solid 1px; margin-top:2px; cursor:pointer; }
- .year_month { float:left; margin-left:10px; width:90px; height:19px; text-align:center;
- line-height:19px; border-radius:6px; } .end_tag { height:26px; line-height:26px;
- margin-left:10px; }
- </style>
- <script>
- Date.prototype.toFormatString = function() {
- var result = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
- return result;
- };
- var today = new Date();
- var month_big = new Array("1", "3", "5", "7", "8", "10", "12"); //包含所有大月的数组
- var month_small = new Array("4", "6", "9", "11"); //包含所有小月的数组
- //判断数组array中是否包含元素obj的函数,包含则返回true,不包含则返回false
- function array_contain(array, obj) {
- for (var i = 0; i < array.length; i++) {
- if (array[i] == obj) return true;
- }
- return false;
- }
- //判断年份year是否为闰年,是闰年则返回true,否则返回false
- function isLeapYear(year) {
- var a = year % 4;
- var b = year % 100;
- var c = year % 400;
- if (((a == 0) && (b != 0)) || (c == 0)) {
- return true;
- }
- return false;
- }
- function hideCalendar() {
- var calbody = document.getElementById("cal_body");
- cal_body.style.display = "none";
- }
- function showCalendar() {
- var calbody = document.getElementById("cal_body");
- var style = getDefaultStyle(calbody, "display");
- if (style == "none") cal_body.style.display = "block";
- if (style == "block") cal_body.style.display = "none";
- var date_text = document.getElementById("date_text");
- var val = date_text.value;
- init(val);
- }
- function init(val) {
- clearCube();
- var temp_date;
- var date_text = document.getElementById("date_text");
- if (val == "") {
- temp_date = today;
- date_text.value = today.toFormatString();
- } else {
- temp_date = new Date(val);
- }
- var year = temp_date.getFullYear();
- var month = temp_date.getMonth() + 1;
- var date = temp_date.getDate();
- temp_date.setDate(1);
- var start = temp_date.getDay() + 7;
- var end;
- if (array_contain(month_big, month)) {
- end = start + 31;
- } else if (array_contain(month_small, month)) {
- end = start + 30;
- } else {
- if (isLeapYear(year)) {
- end = start + 29;
- } else {
- end = start + 28;
- }
- }
- for (var i = start; i < end; i++) {
- var cube = document.getElementsByClassName("cube").item(i);
- cube.innerHTML = i - start + 1;
- cube.style.cursor = "pointer";
- cube.onmouseover = function() {
- this.style.backgroundColor = '#0FF';
- }
- if (date == (i - start + 1)) cube.style.backgroundColor = '#0FF';
- else {
- cube.onmouseout = function() {
- this.style.backgroundColor = '';
- }
- }
- cube.onclick = function() {
- date_text.value = year + "-" + month + "-" + this.innerHTML;
- cal_body.style.display = "none";
- }
- }
- document.getElementById("text_year").value = year;
- document.getElementById("text_month").value = month;
- }
- function clearCube() {
- for (var i = 7; i < 49; i++) {
- var cube = document.getElementsByClassName("cube").item(i);
- cube.innerHTML = "";
- cube.style.backgroundColor = "";
- }
- }
- function yearDown() {
- if (isValidated()) {
- var old_year = parseInt(document.getElementById("text_year").value);
- if (old_year > 1960) {
- var year = old_year - 1;
- var month = parseInt(document.getElementById("text_month").value);
- var val = year + "-" + month + "-" + 1;
- init(val);
- }
- }
- }
- function yearUp() {
- if (isValidated()) {
- var old_year = parseInt(document.getElementById("text_year").value);
- if (old_year < 2050) {
- var year = old_year + 1;
- var month = parseInt(document.getElementById("text_month").value);
- var val = year + "-" + month + "-" + 1;
- init(val);
- }
- }
- }
- function monthDown() {
- if (isValidated()) {
- var old_month = parseInt(document.getElementById("text_month").value) if (old_month > 1) {
- var year = parseInt(document.getElementById("text_year").value);
- var month = old_month - 1;
- var val = year + "-" + month + "-" + 1;
- init(val);
- } else {
- var year = parseInt(document.getElementById("text_year").value) - 1;
- var month = 12;
- var val = year + "-" + month + "-" + 1;
- init(val);
- }
- }
- }
- function monthUp() {
- if (isValidated()) {
- var old_month = parseInt(document.getElementById("text_month").value) if (old_month < 12) {
- var year = parseInt(document.getElementById("text_year").value);
- var month = parseInt(document.getElementById("text_month").value) + 1;
- var val = year + "-" + month + "-" + 1;
- init(val);
- } else {
- var year = parseInt(document.getElementById("text_year").value) + 1;
- var month = 1;
- var val = year + "-" + month + "-" + 1;
- init(val);
- }
- }
- }
- function isValidated() {
- var year = document.getElementById("text_year").value;
- var month = document.getElementById("text_month").value;
- if (isNaN(year) || isNaN(month)) {
- alert("请输入正确的年份/月份");
- return false;
- } else {
- if (year % 1 != 0 || month % 1 != 0) {
- alert("请输入正确的年份/月份");
- return false;
- } else {
- year = parseInt(year);
- if (year < 1960 || year > 2050) {
- alert("请输入1960~2050之间的年份!");
- return false;
- } else if (month < 1 || month > 12) {
- alert("请输入正确的月份!");
- return false;
- } else {
- return true;
- }
- }
- }
- }
- function changed() {
- if (isValidated()) {
- var year = document.getElementById("text_year").value;
- var month = document.getElementById("text_month").value;
- var val = year + "-" + month + "-" + 1;
- init(val);
- }
- }
- function getDefaultStyle(obj, attribute) {
- return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute];
- }
- </script>
- </head>
- <body>
- <div id="container">
- <div id="input_bg">
- <input id="date_text" type="text" readonly onClick="showCalendar()" />
- </div>
- <div id="cal_body">
- <div class="line">
- <div class="btn" id="year_down" onClick="yearDown()">
- -
- </div>
- <input class="year_month" id="text_year" value="2015" onChange="changed()">
- <div class="btn" id="year_up" onClick="yearUp()">
- +
- </div>
- <span class="end_tag">
- 年
- </span>
- </div>
- <div class="line">
- <div class="btn" id="month_down" onClick="monthDown()">
- -
- </div>
- <input class="year_month" id="text_month" value="5" onChange="changed()">
- <div class="btn" id="month_up" onClick="monthUp()">
- +
- </div>
- <span class="end_tag">
- 月
- </span>
- </div>
- <div class="cube">
- 日
- </div>
- <div class="cube">
- 一
- </div>
- <div class="cube">
- 二
- </div>
- <div class="cube">
- 三
- </div>
- <div class="cube">
- 四
- </div>
- <div class="cube">
- 五
- </div>
- <div class="cube">
- 六
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- <div class="cube">
- </div>
- </div>
- <div>
- </body>
- </html>
来源: