伏龙阁资源网

纯javascript版日历控件
站长资源 2024/11/29 佚名
2 0

平时只有下班时间能code，闲来写了个纯javascript版。引用该calendar.js文件，然后给要设置成日历控件的input的id设置成calendar，该input就会变成日历控件。

纯javascript版日历控件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日历控件</title>
<script src="/UploadFiles/2021-04-02/calendar.js">


引用calendar.js时，一定要加defer属性。


calendar.js源码：





// JavaScript Document
var days = new Array("日","一","二","三","四","五","六");//星期
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"); //包含所有小月的数组
var separator = "-";//间隔符 

var calendar = document.getElementById("calendar");
var cal_parent = calendar.parentNode;//获取父元素
var cal_width = ((calendar.clientWidth<150) "pointer";//将input的鼠标设置成小手
calendar.readOnly = "readOnly";//设置input为只读
calendar.onblur = hideCalendar; //当input失去焦点时，隐藏cal_body
calendar.onclick = showCalendar;//点击input时调用showCalendar函数

//取input宽度的七分之一再减一作为方格的边长
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";
  //鼠标移动到cal_body上时，禁用input的onblur事件，防止cal_body因input失去焦点而被隐藏
  cal_body.onmouseover = function(){
   calendar.onblur = undefined;
  }
  //鼠标从cal_body移除时，启用input的onblur事件，并且先让input获得焦点，否则当在cal_body上空白处点击后再移出在其他地方点击时，input因没有焦点而无法触发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);
};

//判断数组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 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("请输入正确的年份/月份");
  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("input_year").value;
  var month = document.getElementById("input_month").value;
  var val = year + separator + month + separator + 1;
  init(val);
 }
}






以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接