純javascript版日歷控件
更新時(shí)間：2016年11月24日 09:00:11 作者：dige1993
這篇文章主要介紹了純javascript版日歷控件，引用calendar.js文件，再把input的id設(shè)置成calendar,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
平時(shí)只有下班時(shí)間能code，閑來(lái)寫(xiě)了個(gè)純javascript版。引用該calendar.js文件，然后給要設(shè)置成日歷控件的input的id設(shè)置成calendar，該input就會(huì)變成日歷控件。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>日歷控件</title> <script src="js/calendar.js" defer></script> </head> <body> <input id="calendar" type="text" /> </body> </html>
引用calendar.js時(shí)，一定要加defer屬性。
calendar.js源碼：
// JavaScript Document
var days = new Array("日","一","二","三","四","五","六");//星期
var today = new Date();//當(dāng)天日期，備用
var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的數(shù)組
var month_small = new Array("4","6","9","11"); //包含所有小月的數(shù)組
var separator = "-";//間隔符
var calendar = document.getElementById("calendar");
var cal_parent = calendar.parentNode;//獲取父元素
var cal_width = ((calendar.clientWidth<150) ? 150 : calendar.clientWidth);//獲取input的寬度，如果input寬度小于150，調(diào)整為150，150為日歷塊最小寬度
var cal_height = calendar.clientHeight;//獲取input的高度，整數(shù)
var cal_X = calendar.offsetLeft;//獲取input左邊 距父元素的距離，整數(shù)
var cal_Y = calendar.offsetTop;//獲取input頂部 距父元素的距離，整數(shù)
calendar.style.cursor = "pointer";//將input的鼠標(biāo)設(shè)置成小手
calendar.readOnly = "readOnly";//設(shè)置input為只讀
calendar.onblur = hideCalendar; //當(dāng)input失去焦點(diǎn)時(shí)，隱藏cal_body
calendar.onclick = showCalendar;//點(diǎn)擊input時(shí)調(diào)用showCalendar函數(shù)
//取input寬度的七分之一再減一作為方格的邊長(zhǎng)
var pane_height = cal_width/7 - 1;
function hideCalendar(){
var cal_body = document.getElementById("cal_body");
if(cal_body != undefined){
cal_body.parentNode.removeChild(cal_body);
}
}
//顯示日歷主體
function showCalendar(){
var cal_body = document.getElementById("cal_body");
if(cal_body != undefined){
cal_body.parentNode.removeChild(cal_body);
}
else{
var cal_body = document.createElement("DIV");
cal_body.id = "cal_body";
cal_body.style.width = cal_width + "px";
cal_body.style.height = "auto";
cal_body.style.overflow = "hidden";
cal_body.style.position = "absolute";
cal_body.style.zIndex = "9";
cal_body.style.left = cal_X + "px";
cal_body.style.top = (cal_Y + cal_height + 5) + "px";
cal_body.style.border = "solid 1px #CCCCCC";
//鼠標(biāo)移動(dòng)到cal_body上時(shí)，禁用input的onblur事件，防止cal_body因input失去焦點(diǎn)而被隱藏
cal_body.onmouseover = function(){
calendar.onblur = undefined;
}
//鼠標(biāo)從cal_body移除時(shí)，啟用input的onblur事件，并且先讓input獲得焦點(diǎn)，否則當(dāng)在cal_body上空白處點(diǎn)擊后再移出在其他地方點(diǎn)擊時(shí)，input因沒(méi)有焦點(diǎn)而無(wú)法觸發(fā)onblur事件
cal_body.onmouseout = function(){
calendar.focus();
calendar.onblur = hideCalendar;
}
cal_parent.appendChild(cal_body);
var line1 = document.createElement("DIV");
line1.style.width = cal_width + "px";
line1.style.height = pane_height + "px";
line1.style.backgroundColor = "#0FF";
var btn1 = document.createElement("DIV");
btn1.style.width = (cal_width/3 - 3) + "px";
btn1.style.height = pane_height + "px";
btn1.style.lineHeight = pane_height + "px";
btn1.style.textAlign = "center";
btn1.innerHTML = "<";
btn1.style.cursor = "pointer";
btn1.style.cssFloat = "left";
btn1.onclick = function(){
if(isValidated()){
var old_year = parseInt(document.getElementById("input_year").value);
if(old_year > 1960){
var year = old_year - 1;
var month = parseInt(document.getElementById("input_month").value);
var val = year + separator + month + separator + 1;
init(val);
}
}
};
line1.appendChild(btn1);
var input_year = document.createElement("INPUT");
input_year.id = "input_year";
input_year.style.width = (cal_width/3) + "px";
input_year.style.height = "70%";
input_year.style.cssFloat = "left";
input_year.style.textAlign = "center";
input_year.onchange = function(){
changed();
};
line1.appendChild(input_year);
var btn2 = document.createElement("DIV");
btn2.style.width = (cal_width/3 - 3) + "px";
btn2.style.height = pane_height + "px";
btn2.style.lineHeight = pane_height + "px";
btn2.style.textAlign = "center";
btn2.innerHTML = ">";
btn2.style.cursor = "pointer";
btn2.style.cssFloat = "left";
btn2.onclick = function(){
if(isValidated()){
var old_year = parseInt(document.getElementById("input_year").value);
if(old_year < 2050){
var year = old_year + 1;
var month = parseInt(document.getElementById("input_month").value);
var val = year + separator + month + separator + 1;
init(val);
}
}
};
line1.appendChild(btn2);
var line2 = document.createElement("DIV");
line2.style.width = cal_width + "px";
line2.style.height = pane_height + "px";
line2.style.backgroundColor = "#0FF";
var btn3 = document.createElement("DIV");
btn3.style.width = (cal_width/3 - 3) + "px";
btn3.style.height = pane_height + "px";
btn3.style.lineHeight = pane_height + "px";
btn3.style.textAlign = "center";
btn3.innerHTML = "<";
btn3.style.cursor = "pointer";
btn3.style.cssFloat = "left";
btn3.onclick = function(){
if(isValidated()){
var old_month = parseInt(document.getElementById("input_month").value)
if(old_month > 1){
var year = parseInt(document.getElementById("input_year").value);
var month = old_month - 1;
var val = year + separator + month + separator + 1;
init(val);
}
else {
var year = parseInt(document.getElementById("input_year").value) - 1;
var month = 12;
var val = year + separator + month + separator + 1;
init(val);
}
}
};
line2.appendChild(btn3);
var input_month = document.createElement("INPUT");
input_month.id = "input_month";
input_month.style.width = (cal_width/3) + "px";
input_month.style.height = "70%";
input_month.style.cssFloat = "left";
input_month.style.textAlign = "center";
input_month.onchange = function(){
changed();
};
line2.appendChild(input_month);
var btn4 = document.createElement("DIV");
btn4.style.width = (cal_width/3 - 3) + "px";
btn4.style.height = pane_height + "px";
btn4.style.lineHeight = pane_height + "px";
btn4.style.textAlign = "center";
btn4.innerHTML = ">";
btn4.style.cursor = "pointer";
btn4.style.cssFloat = "left";
btn4.onclick = function(){
if(isValidated()){
var old_month = parseInt(document.getElementById("input_month").value)
if(old_month < 12){
var year = parseInt(document.getElementById("input_year").value);
var month = parseInt(document.getElementById("input_month").value) + 1;
var val = year + separator + month + separator + 1;
init(val);
}
else {
var year = parseInt(document.getElementById("input_year").value) + 1;
var month = 1;
var val = year + separator + month + separator + 1;
init(val);
}
}
};
line2.appendChild(btn4);
cal_body.appendChild(line1);
cal_body.appendChild(line2);
for(var i=0; i < 7; i++){
var pane = document.createElement("DIV");
pane.className = "pane";
pane.style.width = pane_height + "px";
pane.style.height = pane_height + "px";
pane.style.lineHeight = pane_height + "px";
pane.style.textAlign = "center";
pane.style.cssFloat = "left";
pane.innerHTML = days[i];
cal_body.appendChild(pane);
}
init(calendar.value);
}
}
function init(val){
clearPane();
var cal_body = document.getElementById("cal_body");
var temp_date;
var year;
var month;
var date;
if(val == ""){
temp_date = today;
calendar.value = today.toFormatString(separator);
}
else{
year = val.year();
month = val.month(separator);
date = val.date(separator);
temp_date = new Date(year,month,date);
}
year = temp_date.getFullYear();
month = temp_date.getMonth() + 1;
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 = 7; i < start; i++){
var pane = document.createElement("DIV");
pane.className = "pane";
pane.style.width = pane_height + "px";
pane.style.height = pane_height + "px";
pane.style.lineHeight = pane_height + "px";
pane.style.textAlign = "center";
pane.style.cssFloat = "left";
cal_body.appendChild(pane);
}
for(var i = start; i < end; i++){
var pane = document.createElement("DIV");
pane.className = "pane";
pane.style.width = pane_height + "px";
pane.style.height = pane_height + "px";
pane.style.lineHeight = pane_height + "px";
pane.style.textAlign = "center";
pane.style.cssFloat = "left";
pane.innerHTML = i - start + 1;
pane.style.cursor = "pointer";
pane.onmouseover = function(){
this.style.backgroundColor = '#0FF';
}
if(date == (i - start + 1))
pane.style.backgroundColor = '#0FF';
else{
pane.onmouseout = function(){
this.style.backgroundColor = '';
}
}
pane.onclick = function(){
calendar.value = year + separator + month + separator + this.innerHTML;
cal_body.parentNode.removeChild(cal_body);
}
cal_body.appendChild(pane);
document.getElementById("input_year").value = year;
document.getElementById("input_month").value = month;
}
}
//格式化輸出
Date.prototype.toFormatString = function(separator){
var result = this.getFullYear() + separator + (this.getMonth() + 1) + separator + this.getDate();
return result;
};
//從格式化字符串中獲取年份
String.prototype.year = function(){
var str = this.substring(0,4);
return str;
};
//從格式化字符串中獲取月份
String.prototype.month = function(separator){
var start = this.indexOf(separator) + 1;
var end = this.lastIndexOf(separator);
return parseInt(this.substring(start, end)) - 1;
};
//從格式化字符串中獲取日期
String.prototype.date = function(separator){
var start = this.lastIndexOf(separator) + 1;
return this.substring(start);
};
//判斷數(shù)組array中是否包含元素obj的函數(shù)，包含則返回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 clearPane(){
var limit = document.getElementsByClassName("pane").length;
for(var i=7; i < limit; i++){
var pane = document.getElementsByClassName("pane").item(7);
pane.parentNode.removeChild(pane);
}
}
//判斷輸入是否合法
function isValidated(){
var year = document.getElementById("input_year").value;
var month = document.getElementById("input_month").value;
if(isNaN(year) || isNaN(month)){
alert("請(qǐng)輸入正確的年份/月份");
return false;
}
else{
if(year%1 != 0 || month%1 != 0){
alert("請(qǐng)輸入正確的年份/月份");
return false;
}
else{
year = parseInt(year);
if(year < 1960 || year > 2050){
alert("請(qǐng)輸入1960~2050之間的年份！");
return false;
}
else if(month < 1 || month >12){
alert("請(qǐng)輸入正確的月份！");
return false;
}
else{
return true;
}
}
}
}
//年份月份發(fā)生變化時(shí)處理函數(shù)
function changed(){
if(isValidated()){
var year = document.getElementById("input_year").value;
var month = document.getElementById("input_month").value;
var val = year + separator + month + separator + 1;
init(val);
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript設(shè)計(jì)模式之代理模式簡(jiǎn)單實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之代理模式,簡(jiǎn)單描述了代理模式的概念、功能、組成并結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript代理模式的定義與使用相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了javascript改變this指向的方法匯總的相關(guān)資料,需要的朋友可以參考下2022-09-09
javascript構(gòu)造函數(shù)以及原型對(duì)象的理解
本文主要介紹了javascript構(gòu)造函數(shù)以及原型對(duì)象的理解。分享了有關(guān)它們的實(shí)例代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JS嵌套函數(shù)調(diào)用上下文的問(wèn)題解決
這篇文章主要探討了JS嵌套函數(shù)調(diào)用上下文的問(wèn)題,需要的朋友可以參考下2014-03-03
原生JavaScript實(shí)現(xiàn)刮刮樂(lè)
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)刮刮樂(lè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
詳解webpack的proxyTable無(wú)效的解決方案
這篇文章主要介紹了詳解webpack的proxyTable無(wú)效的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
javascript打印html內(nèi)容功能的方法示例
這篇文章主要介紹了javascript打印html內(nèi)容的小示例，大家參考使用2013-11-11
在JavaScript中通過(guò)URL傳遞漢字的方法...2007-04-04
iframe子頁(yè)面與父頁(yè)面在同域或不同域下的js通信
根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接，通信方式也不同,下面有個(gè)不錯(cuò)的示例，需要的朋友可以參考下2014-05-05
JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)測(cè)速的方法詳解
在我們的日常生活中離不開(kāi)網(wǎng)絡(luò)，而網(wǎng)絡(luò)的快慢直接決定了用戶的產(chǎn)品使用體驗(yàn)。本文就來(lái)帶大家了解如何用JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)測(cè)速，需要的可以參考一下2023-01-01