Calender Component

最新推荐文章于 2024-08-25 09:57:22 发布

AI云海

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量124

点赞数

文章标签： table function javascript calendar class object

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/arlen_ye/article/details/6881836

版权

This is the text that describe how to use calender component.

1. JSP Code:

<script type="text/javascript" src="<%=request.getContextPath()%>/public/scripts/CalendarControl.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/public/css/CalendarControl.css" />

<input name="dateServiceFrom"
id="dateServiceFrom" type="text" style="width:38%;" onFocus="showCalendarControl('dateServiceFrom')" />

2. CalendarControl.js

function positionInfo(object) {

  var p_elm = object;

  this.getElementLeft = getElementLeft;
  function getElementLeft() {
   var x = 0;
   var elm;
   if(typeof(p_elm) == "object"){
   elm = p_elm;
   } else {
   elm = document.getElementById(p_elm);
   }
   while (elm != null) {
   x+= elm.offsetLeft;
   elm = elm.offsetParent;
   }
   return parseInt(x);
  }

  this.getElementWidth = getElementWidth;
  function getElementWidth(){
   var elm;
   if(typeof(p_elm) == "object"){
   elm = p_elm;
   } else {
   elm = document.getElementById(p_elm);
   }
   return parseInt(elm.offsetWidth);
  }

  this.getElementRight = getElementRight;
  function getElementRight(){
   return getElementLeft(p_elm) + getElementWidth(p_elm);
  }

  this.getElementTop = getElementTop;
  function getElementTop() {
   var y = 0;
   var elm;
   if(typeof(p_elm) == "object"){
   elm = p_elm;
   } else {
   elm = document.getElementById(p_elm);
   }
   while (elm != null) {
   y+= elm.offsetTop;
   elm = elm.offsetParent;
   }
   return parseInt(y);
  }

  this.getElementHeight = getElementHeight;
  function getElementHeight(){
   var elm;
   if(typeof(p_elm) == "object"){
   elm = p_elm;
   } else {
   elm = document.getElementById(p_elm);
   }
   return parseInt(elm.offsetHeight);
  }

  this.getElementBottom = getElementBottom;
  function getElementBottom(){
   return getElementTop(p_elm) + getElementHeight(p_elm);
  }
}

function CalendarControl() {

  var calendarId = 'CalendarControl';
  var currentYear = 0;
  var currentMonth = 0;
  var currentDay = 0;

  var selectedYear = 0;
  var selectedMonth = 0;
  var selectedDay = 0;

  var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  var dateField = null;

  function getProperty(p_property){
   var p_elm = calendarId;
   var elm = null;

   if(typeof(p_elm) == "object"){
   elm = p_elm;
   } else {
   elm = document.getElementById(p_elm);
   }
   if (elm != null){
   if(elm.style){
   elm = elm.style;
   if(elm[p_property]){
   return elm[p_property];
   } else {
   return null;
   }
   } else {
   return null;
   }
   }
  }

  function setElementProperty(p_property, p_value, p_elmId){
   var p_elm = p_elmId;
   var elm = null;

   if(typeof(p_elm) == "object"){
   elm = p_elm;
   } else {
   elm = document.getElementById(p_elm);
   }
   if((elm != null) && (elm.style != null)){
   elm = elm.style;
   elm[ p_property ] = p_value;
   }
  }

  function setProperty(p_property, p_value) {
   setElementProperty(p_property, p_value, calendarId);
  }

  function getDaysInMonth(year, month) {
   return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
  }

  function getDayOfWeek(year, month, day) {
   var date = new Date(year,month-1,day)
   return date.getDay();
  }

  this.clearDate = clearDate;
  function clearDate() {
   dateField.value = '';
   hide();
  }

  this.setDate = setDate;
  function setDate(year, month, day) {
   if (dateField) {
   if (month < 10) {month = "0" + month;}
   if (day < 10) {day = "0" + day;}

   //var dateString = month+"-"+day+"-"+year;
var dateString = month+"/"+day+"/"+year;
   dateField.value = dateString;
   hide();
   }
   return;
  }

  this.changeMonth = changeMonth;
  function changeMonth(change) {
   currentMonth += change;
   currentDay = 0;
   if(currentMonth > 12) {
   currentMonth = 1;
   currentYear++;
   } else if(currentMonth < 1) {
   currentMonth = 12;
   currentYear--;
   }

   calendar = document.getElementById(calendarId);
   calendar.innerHTML = calendarDrawTable();
  }

  this.changeYear = changeYear;
  function changeYear(change) {
   currentYear += change;
   currentDay = 0;
   calendar = document.getElementById(calendarId);
   calendar.innerHTML = calendarDrawTable();
  }

  function getCurrentYear() {
   var year = new Date().getYear();
   if(year < 1900) year += 1900;
   return year;
  }

  function getCurrentMonth() {
   return new Date().getMonth() + 1;
  }

  function getCurrentDay() {
   return new Date().getDate();
  }

  function calendarDrawTable() {

   var dayOfMonth = 1;
   var validDay = 0;
   var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
   var daysInMonth = getDaysInMonth(currentYear, currentMonth);
   var css_class = null; //CSS class for each day

   var table = "<table cellspacing='0' cellpadding='0' border='0'>";
   table = table + "<tr class='header'>";
   table = table + " <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'><</a> <a href='javascript:changeCalendarControlYear(-1);'>«</a></td>";
   table = table + " <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
   table = table + " <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>»</a> <a href='javascript:changeCalendarControlMonth(1);'>></a></td>";
   table = table + "</tr>";
   table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";

   for(var week=0; week < 6; week++) {
   table = table + "<tr>";
   for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
   if(week == 0 && startDayOfWeek == dayOfWeek) {
   validDay = 1;
   } else if (validDay == 1 && dayOfMonth > daysInMonth) {
   validDay = 0;
   }

   if(validDay) {
   if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
   css_class = 'current';
   } else if (dayOfWeek == 0 || dayOfWeek == 6) {
   css_class = 'weekend';
   } else {
   css_class = 'weekday';
   }

   table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
   dayOfMonth++;
   } else {
   table = table + "<td class='empty'> </td>";
   }
   }
   table = table + "</tr>";
   }

   table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
   table = table + "</table>";

   return table;
  }

  this.show = show;
  function show(field) {
   can_hide = 0;

   // If the calendar is visible and associated with
   // this field do not do anything.
   if (dateField == field) {
   return;
   } else {
   dateField = field;
   }

   if(dateField) {
   try {
   var dateString = new String(dateField.value);
   var dateParts = dateString.split("-");

   selectedMonth = parseInt(dateParts[0],10);
   selectedDay = parseInt(dateParts[1],10);
   selectedYear = parseInt(dateParts[2],10);
   } catch(e) {}
   }

   if (!(selectedYear && selectedMonth && selectedDay)) {
   selectedMonth = getCurrentMonth();
   selectedDay = getCurrentDay();
   selectedYear = getCurrentYear();
   }

   currentMonth = selectedMonth;
   currentDay = selectedDay;
   currentYear = selectedYear;

   if(document.getElementById){

   calendar = document.getElementById(calendarId);
   calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);

   setProperty('display', 'block');

   var fieldPos = new positionInfo(dateField);
   var calendarPos = new positionInfo(calendarId);
   var x = fieldPos.getElementLeft();
   var y = fieldPos.getElementBottom();

   setProperty('left', x + "px");
   setProperty('top', y + "px");

   if (document.all) {
   setElementProperty('display', 'block', 'CalendarControlIFrame');
   setElementProperty('left', x + "px", 'CalendarControlIFrame');
   setElementProperty('top', y + "px", 'CalendarControlIFrame');
   setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
   setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
   }
   }
  }

  this.hide = hide;
  function hide() {
   if(dateField) {
   setProperty('display', 'none');
   setElementProperty('display', 'none', 'CalendarControlIFrame');
   dateField = null;
   }
  }

  this.visible = visible;
  function visible() {
   return dateField
  }

  this.can_hide = can_hide;
  var can_hide = 0;
}

var calendarControl = new CalendarControl();

function showCalendarControl(textField) {
  // textField.onblur = hideCalendarControl;

  //when textField control is passed as ID the below code is necessary
  //if the texfield is passed as this operator then the below line can be commented
  textField = document.getElementById(textField);
  calendarControl.show(textField);
}

function clearCalendarControl() {
  calendarControl.clearDate();
}

function hideCalendarControl() {
  if (calendarControl.visible()) {
   calendarControl.hide();
  }
}

function setCalendarControlDate(year, month, day) {
  calendarControl.setDate(year, month, day);
}

function changeCalendarControlYear(change) {
  calendarControl.changeYear(change);
}

function changeCalendarControlMonth(change) {
  calendarControl.changeMonth(change);
}

document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
document.write("<div id='CalendarControl'></div>");

3. CalendarControl.css

#CalendarControlIFrame {
  display: none;
  left: 0px;
  position: absolute;
  top: 0px;
  height: 250px;
  width: 250px;
  z-index: 99;
}

#CalendarControl {
  position:absolute;
  background-color:#FFF;
  margin:0;
  padding:0;
  display:none;
  z-index: 100;
}

#CalendarControl table {
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 8pt;
  border-left: 1px solid #6C97B9;
  border-right: 1px solid #6C97B9;
}

#CalendarControl th {
  font-weight: normal;
}

#CalendarControl th a {
  font-weight: normal;
  text-decoration: none;
  color: #FFF;
  padding: 1px;
}

#CalendarControl th a:hover {
color:#333;
}

#CalendarControl td {
  text-align: center;
}

#CalendarControl .header {
  background-color: #6C97B9;
}

#CalendarControl .weekday {
  background-color: #F6F4F4;
  color: #000;
}

#CalendarControl .weekend {
  background-color: #DBE7F0;
  color: #000;
}

#CalendarControl .current {
  border: 1px solid #333;
  background-color: #7EB764;
  color: #FFF;
}

#CalendarControl .weekday,
#CalendarControl .weekend,
#CalendarControl .current {
  display: block;
  text-decoration: none;
  border: 1px solid #FFF;
  width: 2em;
}

#CalendarControl .weekday:hover,
#CalendarControl .weekend:hover,
#CalendarControl .current:hover {
  color: #FFF;
  background-color: #6C97B9;
  border: 1px solid #333;
}

#CalendarControl .previous {
  text-align: left;
}

#CalendarControl .next {
  text-align: right;
}

#CalendarControl .previous,
#CalendarControl .next {
  padding: 1px 3px 1px 3px;
  font-size: 1.4em;
}

#CalendarControl .previous a,
#CalendarControl .next a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
}

#CalendarControl .previous a:hover,
#CalendarControl .next a:hover {
color:#333;
}

#CalendarControl .title {
  text-align: center;
  font-weight: bold;
  color: #FFF;
}

#CalendarControl .empty {
  background-color: #DEDDDD;
  border: 1px solid #FFF;
}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Calender Component

This is the text that describe how to use calender component.1. JSP Code:/public/scripts/CalendarControl.js">/public/css/Calenda
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。