Team:DTU-Denmark/datetimepicker css.js

From 2014.igem.org

//Javasript name: My Date Time Picker //Date created: 16-Nov-2003 23:19 //Creator: TengYong Ng //Website: http://www.rainforestnet.com //Copyright (c) 2003 TengYong Ng //FileName: DateTimePicker_css.js //Version: 2.2.4 // Note: Permission given to use and modify this script in ANY kind of applications if // header lines are left unchanged. //Permission is granted to redistribute and modify this javascript under a FreeBSD License. //New Css style version added by Yvan Lavoie (Québec, Canada) 29-Jan-2009 //Formatted for JSLint compatibility by Labsmedia.com (30-Dec-2010)


//Global variables

var winCal; var dtToday; var Cal; var MonthName; var WeekDayName1; var WeekDayName2; var exDateTime;//Existing Date and Time var selDate;//selected date. version 1.7 var calSpanID = "calBorder"; // span ID var domStyle = null; // span DOM object with style var cnLeft = "0";//left coordinate of calendar span var cnTop = "0";//top coordinate of calendar span var xpos = 0; // mouse x position var ypos = 0; // mouse y position var calHeight = 0; // calendar height var CalWidth = 208;// calendar width var CellWidth = 30;// width of day cell. var TimeMode = 24;// TimeMode value. 12 or 24 var StartYear = 1940; //First Year in drop down year selection var EndYear = 5; // The last year of pickable date. if current year is 2011, the last year that still picker will be 2016 (2011+5) var CalPosOffsetX = -1; //X position offset relative to calendar icon, can be negative value var CalPosOffsetY = 0; //Y position offset relative to calendar icon, can be negative value

//Configurable parameters start var SpanBorderColor = "#000000";//span border color var SpanBgColor = "#FFFFFF"; //span background color var MonthYearColor = "#cc0033"; //Font Color of Month and Year in Calendar header. var WeekHeadColor = "#18861B"; //var WeekHeadColor="#18861B";//Background Color in Week header. var SundayColor = "#C0F64F"; //var SundayColor="#C0F64F";//Background color of Sunday. var SaturdayColor = "#C0F64F"; //Background color of Saturday. var WeekDayColor = "#FFEDA6"; //Background color of weekdays. var FontColor = "blue"; //color of font in Calendar day cell. var TodayColor = "#ffbd35"; //var TodayColor="#FFFF33";//Background color of today. var SelDateColor = "#8DD53C"; //var SelDateColor = "#8DD53C";//Backgrond color of selected date in textbox. var YrSelColor = "#cc0033"; //color of font of Year selector. var MthSelColor = "#cc0033"; //color of font of Month selector if "MonthSelector" is "arrow". var HoverColor = "#E0FF38"; //color when mouse move over. var DisableColor = "#999966"; //color of disabled cell. var CalBgColor = "#ffffff"; //Background color of Calendar window.

var WeekChar = 2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed. var DateSeparator = "-";//Date Separator, you can change it to "-" if you want. var ShowLongMonth = true;//Show long month name in Calendar header. example: "January". var ShowMonthYear = true;//Show Month and Year in Calendar header. var ThemeBg = "";//Background image of Calendar window. var PrecedeZero = true;//Preceding zero [true|false] var MondayFirstDay = true;//true:Use Monday as first day; false:Sunday as first day. [true|false] //added in version 1.7 var UseImageFiles = true;//Use image files with "arrows" and "close" button var imageFilesPath = "images2/"; //Configurable parameters end

//use the Month and Weekday in your preferred language. var MonthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var WeekDayName1 = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var WeekDayName2 = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];


//end Configurable parameters

//end Global variable


// Calendar prototype function Calendar(pDate, pCtrl) { //Properties this.Date = pDate.getDate();//selected date this.Month = pDate.getMonth();//selected month number this.Year = pDate.getFullYear();//selected year in 4 digits this.Hours = pDate.getHours();

if (pDate.getMinutes() < 10) { this.Minutes = "0" + pDate.getMinutes(); } else { this.Minutes = pDate.getMinutes(); }

if (pDate.getSeconds() < 10) { this.Seconds = "0" + pDate.getSeconds(); } else { this.Seconds = pDate.getSeconds(); } this.MyWindow = winCal; this.Ctrl = pCtrl; this.Format = "ddMMyyyy"; this.Separator = DateSeparator; this.ShowTime = false; this.Scroller = "DROPDOWN"; if (pDate.getHours() < 12) { this.AMorPM = "AM"; } else { this.AMorPM = "PM"; } this.ShowSeconds = false; this.EnableDateMode = "" }

Calendar.prototype.GetMonthIndex = function (shortMonthName) { for (var i = 0; i < 12; i += 1) { if (MonthName[i].substring(0, 3).toUpperCase() === shortMonthName.toUpperCase()) { return i; } } };

Calendar.prototype.IncYear = function () {

   if (Cal.Year <= dtToday.getFullYear()+EndYear)

Cal.Year += 1; };

Calendar.prototype.DecYear = function () {

   if (Cal.Year > StartYear)

Cal.Year -= 1; };

Calendar.prototype.IncMonth = function() {

   if (Cal.Year <= dtToday.getFullYear() + EndYear) {
       Cal.Month += 1;
       if (Cal.Month >= 12) {
           Cal.Month = 0;
           Cal.IncYear();
       }
   }

};

Calendar.prototype.DecMonth = function() {

   if (Cal.Year >= StartYear) {
       Cal.Month -= 1;
       if (Cal.Month < 0) {
           Cal.Month = 11;
           Cal.DecYear();
       }
   }

};

Calendar.prototype.SwitchMth = function (intMth) { Cal.Month = parseInt(intMth, 10); };

Calendar.prototype.SwitchYear = function (intYear) { Cal.Year = parseInt(intYear, 10); };

Calendar.prototype.SetHour = function(intHour) {

   var MaxHour,

MinHour, HourExp = new RegExp("^\\d\\d"), SingleDigit = new RegExp("^\\d{1}$");

   if (TimeMode === 24) {
       MaxHour = 23;
       MinHour = 0;
   }
   else if (TimeMode === 12) {
       MaxHour = 12;
       MinHour = 1;
   }
   else {
       alert("TimeMode can only be 12 or 24");
   }
   if ((HourExp.test(intHour) || SingleDigit.test(intHour)) && (parseInt(intHour, 10) > MaxHour)) {
       intHour = MinHour;
   }
   else if ((HourExp.test(intHour) || SingleDigit.test(intHour)) && (parseInt(intHour, 10) < MinHour)) {
       intHour = MaxHour;
   }
   intHour = parseInt(intHour, 10);
   if (SingleDigit.test(intHour)) {
       intHour = "0" + intHour;
   }
   if (HourExp.test(intHour) && (parseInt(intHour, 10) <= MaxHour) && (parseInt(intHour, 10) >= MinHour)) {
       if ((TimeMode === 12) && (Cal.AMorPM === "PM")) {
           if (parseInt(intHour, 10) === 12) {
               Cal.Hours = 12;
           }
           else {
               Cal.Hours = parseInt(intHour, 10) + 12;
           }
       }
       else if ((TimeMode === 12) && (Cal.AMorPM === "AM")) {
           if (intHour === 12) {
               intHour -= 12;
           }
           Cal.Hours = parseInt(intHour, 10);
       }
       else if (TimeMode === 24) {
           Cal.Hours = parseInt(intHour, 10);
       }
   }

};

Calendar.prototype.SetMinute = function (intMin) { var MaxMin = 59, MinMin = 0,

SingleDigit = new RegExp("\\d"), SingleDigit2 = new RegExp("^\\d{1}$"), MinExp = new RegExp("^\\d{2}$"),

strMin = 0;

if ((MinExp.test(intMin) || SingleDigit.test(intMin)) && (parseInt(intMin, 10) > MaxMin)) { intMin = MinMin; }

else if ((MinExp.test(intMin) || SingleDigit.test(intMin)) && (parseInt(intMin, 10) < MinMin)) { intMin = MaxMin; }

strMin = intMin + ""; if (SingleDigit2.test(intMin)) { strMin = "0" + strMin; }

if ((MinExp.test(intMin) || SingleDigit.test(intMin)) && (parseInt(intMin, 10) <= 59) && (parseInt(intMin, 10) >= 0)) { Cal.Minutes = strMin; } };

Calendar.prototype.SetSecond = function (intSec) { var MaxSec = 59, MinSec = 0,

SingleDigit = new RegExp("\\d"), SingleDigit2 = new RegExp("^\\d{1}$"), SecExp = new RegExp("^\\d{2}$"),

strSec = 0;

if ((SecExp.test(intSec) || SingleDigit.test(intSec)) && (parseInt(intSec, 10) > MaxSec)) { intSec = MinSec; }

else if ((SecExp.test(intSec) || SingleDigit.test(intSec)) && (parseInt(intSec, 10) < MinSec)) { intSec = MaxSec; }

strSec = intSec + ""; if (SingleDigit2.test(intSec)) { strSec = "0" + strSec; }

if ((SecExp.test(intSec) || SingleDigit.test(intSec)) && (parseInt(intSec, 10) <= 59) && (parseInt(intSec, 10) >= 0)) { Cal.Seconds = strSec; }

};

Calendar.prototype.SetAmPm = function (pvalue) { this.AMorPM = pvalue; if (pvalue === "PM") { this.Hours = parseInt(this.Hours, 10) + 12; if (this.Hours === 24) { this.Hours = 12; } }

else if (pvalue === "AM") { this.Hours -= 12; } };

Calendar.prototype.getShowHour = function() {

   var finalHour;
   if (TimeMode === 12) {
       if (parseInt(this.Hours, 10) === 0) {
           this.AMorPM = "AM";
           finalHour = parseInt(this.Hours, 10) + 12;
       }
       else if (parseInt(this.Hours, 10) === 12) {
           this.AMorPM = "PM";
           finalHour = 12;
       }
       else if (this.Hours > 12) {
           this.AMorPM = "PM";
           if ((this.Hours - 12) < 10) {
               finalHour = "0" + ((parseInt(this.Hours, 10)) - 12);
           }
           else {
               finalHour = parseInt(this.Hours, 10) - 12;
           }
       }
       else {
           this.AMorPM = "AM";
           if (this.Hours < 10) {
               finalHour = "0" + parseInt(this.Hours, 10);
           }
           else {
               finalHour = this.Hours;
           }
       }
   }
   else if (TimeMode === 24) {
       if (this.Hours < 10) {
           finalHour = "0" + parseInt(this.Hours, 10);
       }
       else {
           finalHour = this.Hours;
       }
   }
   return finalHour;

};

Calendar.prototype.getShowAMorPM = function () { return this.AMorPM; };

Calendar.prototype.GetMonthName = function (IsLong) { var Month = MonthName[this.Month]; if (IsLong) { return Month; } else { return Month.substr(0, 3); } };

Calendar.prototype.GetMonDays = function() { //Get number of days in a month

   var DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
   if (Cal.IsLeapYear()) {
       DaysInMonth[1] = 29;
   }
   return DaysInMonth[this.Month];

};

Calendar.prototype.IsLeapYear = function () { if ((this.Year % 4) === 0) { if ((this.Year % 100 === 0) && (this.Year % 400) !== 0) { return false; } else { return true; } } else { return false; } };

Calendar.prototype.FormatDate = function (pDate) { var MonthDigit = this.Month + 1; if (PrecedeZero === true) { if ((pDate < 10) && String(pDate).length===1) //length checking added in version 2.2 { pDate = "0" + pDate; } if (MonthDigit < 10) { MonthDigit = "0" + MonthDigit; } }

switch (this.Format.toUpperCase()) { case "DDMMYYYY": return (pDate + DateSeparator + MonthDigit + DateSeparator + this.Year); case "DDMMMYYYY": return (pDate + DateSeparator + this.GetMonthName(false) + DateSeparator + this.Year); case "MMDDYYYY": return (MonthDigit + DateSeparator + pDate + DateSeparator + this.Year); case "MMMDDYYYY": return (this.GetMonthName(false) + DateSeparator + pDate + DateSeparator + this.Year); case "YYYYMMDD": return (this.Year + DateSeparator + MonthDigit + DateSeparator + pDate); case "YYMMDD": return (String(this.Year).substring(2, 4) + DateSeparator + MonthDigit + DateSeparator + pDate); case "YYMMMDD": return (String(this.Year).substring(2, 4) + DateSeparator + this.GetMonthName(false) + DateSeparator + pDate); case "YYYYMMMDD": return (this.Year + DateSeparator + this.GetMonthName(false) + DateSeparator + pDate); default: return (pDate + DateSeparator + (this.Month + 1) + DateSeparator + this.Year); } };

// end Calendar prototype

function GenCell(pValue, pHighLight, pColor, pClickable) { //Generate table cell with value var PValue, PCellStr, PClickable, vTimeStr;

if (!pValue) { PValue = ""; } else { PValue = pValue; }

if (pColor === undefined) pColor = CalBgColor;

if (pClickable !== undefined){ PClickable = pClickable; } else{ PClickable = true; }

if (Cal.ShowTime) { vTimeStr = ' ' + Cal.Hours + ':' + Cal.Minutes; if (Cal.ShowSeconds) { vTimeStr += ':' + Cal.Seconds; } if (TimeMode === 12) { vTimeStr += ' ' + Cal.AMorPM; } }

else { vTimeStr = ""; }

if (PValue !== "") { if (PClickable === true) { if (Cal.ShowTime === true) { PCellStr = "<td id='c" + PValue + "' class='calTD' style='text-align:center;cursor:pointer;background-color:"+pColor+"' onmousedown='selectDate(this," + PValue + ");'>" + PValue + "</td>"; } else { PCellStr = "<td class='calTD' style='text-align:center;cursor:pointer;background-color:" + pColor + "' onmouseover='changeBorder(this, 0);' onmouseout=\"changeBorder(this, 1, '" + pColor + "');\" onClick=\"javascript:callback('" + Cal.Ctrl + "','" + Cal.FormatDate(PValue) + "');\">" + PValue + "</td>"; } } else { PCellStr = "<td style='text-align:center;background-color:"+pColor+"' class='calTD'>"+PValue+"</td>"; } } else { PCellStr = "<td style='text-align:center;background-color:"+pColor+"' class='calTD'> </td>"; }

return PCellStr; }

function RenderCssCal(bNewCal) { if (typeof bNewCal === "undefined" || bNewCal !== true) { bNewCal = false; } var vCalHeader, vCalData, vCalTime = "", vCalClosing = "", winCalData = "", CalDate,

i, j,

SelectStr, vDayCount = 0, vFirstDay,

WeekDayName = [],//Added version 1.7 strCell,

showHour, ShowArrows = false, HourCellWidth = "35px", //cell width with seconds.

SelectAm, SelectPm,

funcCalback,

headID, e, cssStr, style, cssText, span;

calHeight = 0; // reset the window height on refresh

// Set the default cursor for the calendar

winCalData = "";

vCalHeader = "<tbody>"; //Table for Month & Year Selector vCalHeader += "";

//******************End Month and Year selector in arrow******************************

//Calendar header shows Month and Year if (ShowMonthYear && Cal.Scroller === "DROPDOWN") {

vCalHeader += "";

calHeight += 19; }

//Week day header

vCalHeader += "";


//Time picker if (Cal.ShowTime === true) { showHour = Cal.getShowHour();

if (Cal.ShowSeconds === false && TimeMode === 24) { ShowArrows = true; HourCellWidth = "10px"; }

vCalTime = "
";

//******************Month and Year selector in dropdown list************************

if (Cal.Scroller === "DROPDOWN") {

vCalHeader += ""; //Year selector vCalHeader += "\n"; calHeight += 30; } //******************End Month and Year selector in dropdown list********************* //******************Month and Year selector in arrow********************************* else if (Cal.Scroller === "ARROW") { if (UseImageFiles) { vCalHeader += "\n";//Year scroller (decrease 1 year) vCalHeader += "\n"; //Month scroller (decrease 1 month) vCalHeader += ""; //Month and Year vCalHeader += "\n"; //Month scroller (increase 1 month) vCalHeader += "\n"; //Year scroller (increase 1 year)

calHeight += 22; } else {

vCalHeader += "";//Year scroller (decrease 1 year) vCalHeader += "\n";//Month scroller (decrease 1 month) vCalHeader += "\n"; //Month and Year vCalHeader += "\n";//Month scroller (increase 1 month) vCalHeader += "\n";//Year scroller (increase 1 year)

calHeight += 22; } }

vCalHeader += "
<select name='MonthSelector' onChange='javascript:Cal.SwitchMth(this.selectedIndex);RenderCssCal();'>";

for (i = 0; i < 12; i += 1) { if (i === Cal.Month) { SelectStr = "Selected"; } else { SelectStr = ""; } vCalHeader += "<option " + SelectStr + " value=" + i + ">" + MonthName[i] + "</option>"; }

vCalHeader += "</select>
<select name='YearSelector' size='1' onChange='javascript:Cal.SwitchYear(this.value);RenderCssCal();'>";

for (i = StartYear; i <= (dtToday.getFullYear() + EndYear); i += 1) { if (i === Cal.Year) { SelectStr = 'selected="selected"'; } else { SelectStr = ; } vCalHeader += "<option " + SelectStr + " value=" + i + ">" + i + "</option>\n"; }

vCalHeader += "</select>
<img onmousedown='javascript:Cal.DecYear();RenderCssCal();' src='"+imageFilesPath+"cal_fastreverse.gif' width='13px' height='9' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'><img onmousedown='javascript:Cal.DecMonth();RenderCssCal();' src='" + imageFilesPath + "cal_reverse.gif' width='13px' height='9' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>"+ Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + "<img onmousedown='javascript:Cal.IncMonth();RenderCssCal();' src='" + imageFilesPath + "cal_forward.gif' width='13px' height='9' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'><img onmousedown='javascript:Cal.IncYear();RenderCssCal();' src='" + imageFilesPath + "cal_fastforward.gif' width='13px' height='9' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>-<" + Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + ">+
" + Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + "
";

if (MondayFirstDay === true) { WeekDayName = WeekDayName2; } else { WeekDayName = WeekDayName1; } for (i = 0; i < 7; i += 1) {

vCalHeader += "";

}

calHeight += 19;

vCalHeader += ""; //Calendar detail CalDate = new Date(Cal.Year, Cal.Month); CalDate.setDate(1); vFirstDay = CalDate.getDay(); //Added version 1.7 if (MondayFirstDay === true) { vFirstDay -= 1; if (vFirstDay === -1) { vFirstDay = 6; } } //Added version 1.7 vCalData = ""; calHeight += 19; for (i = 0; i < vFirstDay; i += 1) { vCalData = vCalData + GenCell(); vDayCount = vDayCount + 1; } //Added version 1.7 for (j = 1; j <= Cal.GetMonDays(); j += 1) { if ((vDayCount % 7 === 0) && (j > 1)) { vCalData = vCalData + ""; } vDayCount = vDayCount + 1; //added version 2.1.2 if (Cal.EnableDateMode === "future" && ((j < dtToday.getDate()) && (Cal.Month === dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Month < dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Year < dtToday.getFullYear()))) { strCell = GenCell(j, false, DisableColor, false); //Before today's date is not clickable } else if (Cal.EnableDateMode === "past" && ((j >= dtToday.getDate()) && (Cal.Month === dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Month > dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Year > dtToday.getFullYear()))) { strCell = GenCell(j, false, DisableColor, false); //After today's date is not clickable } //if End Year + Current Year = Cal.Year. Disable. else if (Cal.Year > (dtToday.getFullYear()+EndYear)) { strCell = GenCell(j, false, DisableColor, false); } else if ((j === dtToday.getDate()) && (Cal.Month === dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear())) { strCell = GenCell(j, true, TodayColor);//Highlight today's date } else { if ((j === selDate.getDate()) && (Cal.Month === selDate.getMonth()) && (Cal.Year === selDate.getFullYear())){ //modified version 1.7 strCell = GenCell(j, true, SelDateColor); } else { if (MondayFirstDay === true) { if (vDayCount % 7 === 0) { strCell = GenCell(j, false, SundayColor); } else if ((vDayCount + 1) % 7 === 0) { strCell = GenCell(j, false, SaturdayColor); } else { strCell = GenCell(j, null, WeekDayColor); } } else { if (vDayCount % 7 === 0) { strCell = GenCell(j, false, SaturdayColor); } else if ((vDayCount + 6) % 7 === 0) { strCell = GenCell(j, false, SundayColor); } else { strCell = GenCell(j, null, WeekDayColor); } } } } vCalData = vCalData + strCell; if ((vDayCount % 7 === 0) && (j < Cal.GetMonDays())) { vCalData = vCalData + ""; calHeight += 19; } } // finish the table proper if (vDayCount % 7 !== 0) { while (vDayCount % 7 !== 0) { vCalData = vCalData + GenCell(); vDayCount = vDayCount + 1; } } vCalData = vCalData + "
" + WeekDayName[i].substr(0, WeekChar) + "
<tbody>";

if (ShowArrows && UseImageFiles) //this is where the up and down arrow control the hour. {

vCalTime += "\n";

}

vCalTime += "\n\n"; vCalTime += "";

} else //if not to show time. {

vCalTime += "\n\n"; } else { vCalClosing += "x</td>"; } vCalClosing += ""; } vCalClosing += "</tbody></table></td></tr>"; calHeight += 31; vCalClosing += "</tbody></table>\n</span>"; //end time picker funcCalback = "function callback(id, datum) {"; funcCalback += " var CalId = document.getElementById(id);if (datum=== 'undefined') { var d = new Date(); datum = d.getDate() + '/' +(d.getMonth()+1) + '/' + d.getFullYear(); } window.calDatum=datum;CalId.value=datum;"; funcCalback += " if(Cal.ShowTime){"; funcCalback += " CalId.value+=' '+Cal.getShowHour()+':'+Cal.Minutes;"; funcCalback += " if (Cal.ShowSeconds) CalId.value+=':'+Cal.Seconds;"; funcCalback += " if (TimeMode === 12) CalId.value+=+Cal.getShowAMorPM();"; funcCalback += "}if(CalId.onchange!=undefined) CalId.onchange();CalId.focus();winCal.style.visibility='hidden';}"; // determines if there is enough space to open the cal above the position where it is called if (ypos > calHeight) { ypos = ypos - calHeight; } if (!winCal) { headID = document.getElementsByTagName("head")[0]; // add javascript function to the span cal e = document.createElement("script"); e.type = "text/javascript"; e.language = "javascript"; e.text = funcCalback; headID.appendChild(e); // add stylesheet to the span cal cssStr = ".calTD {font-family: verdana; font-size: 12px; text-align: center; border:0; }\n"; cssStr += ".calR {font-family: verdana; font-size: 12px; text-align: center; font-weight: bold;}"; style = document.createElement("style"); style.type = "text/css"; style.rel = "stylesheet"; if (style.styleSheet) { // IE style.styleSheet.cssText = cssStr; } else { // w3c cssText = document.createTextNode(cssStr); style.appendChild(cssText); } headID.appendChild(style); // create the outer frame that allows the cal. to be moved span = document.createElement("span"); span.id = calSpanID; span.style.position = "absolute"; span.style.left = (xpos + CalPosOffsetX) + 'px'; span.style.top = (ypos - CalPosOffsetY) + 'px'; span.style.width = CalWidth + 'px'; span.style.border = "solid 1pt " + SpanBorderColor; span.style.padding = "0"; span.style.cursor = "move"; span.style.backgroundColor = SpanBgColor; span.style.zIndex = 100; document.body.appendChild(span); winCal = document.getElementById(calSpanID); } else { winCal.style.visibility = "visible"; winCal.style.Height = calHeight; // set the position for a new calendar only if (bNewCal === true) { winCal.style.left = (xpos + CalPosOffsetX) + 'px'; winCal.style.top = (ypos - CalPosOffsetY) + 'px'; } } winCal.innerHTML = winCalData + vCalHeader + vCalData + vCalTime + vCalClosing; return true; } function NewCssCal(pCtrl, pFormat, pScroller, pShowTime, pTimeMode, pShowSeconds, pEnableDateMode) { // get current date and time dtToday = new Date(); Cal = new Calendar(dtToday); if (pShowTime !== undefined) { if (pShowTime) { Cal.ShowTime = true; } else { Cal.ShowTime = false; } if (pTimeMode) { pTimeMode = parseInt(pTimeMode, 10); } if (pTimeMode === 12 || pTimeMode === 24) { TimeMode = pTimeMode; } else { TimeMode = 24; } if (pShowSeconds !== undefined) { if (pShowSeconds) { Cal.ShowSeconds = true; } else { Cal.ShowSeconds = false; } } else { Cal.ShowSeconds = false; } } if (pCtrl !== undefined) { Cal.Ctrl = pCtrl; } if (pFormat!== undefined && pFormat !=="") { Cal.Format = pFormat.toUpperCase(); } else { Cal.Format = "MMDDYYYY"; } if (pScroller!== undefined && pScroller!=="") { if (pScroller.toUpperCase() === "ARROW") { Cal.Scroller = "ARROW"; } else { Cal.Scroller = "DROPDOWN"; } } if (pEnableDateMode !== undefined && (pEnableDateMode === "future" || pEnableDateMode === "past")) { Cal.EnableDateMode= pEnableDateMode; } exDateTime = document.getElementById(pCtrl).value; //Existing Date Time value in textbox. if (exDateTime) { //Parse existing Date String var Sp1 = exDateTime.indexOf(DateSeparator, 0),//Index of Date Separator 1 Sp2 = exDateTime.indexOf(DateSeparator, parseInt(Sp1, 10) + 1),//Index of Date Separator 2 tSp1,//Index of Time Separator 1 tSp2,//Index of Time Separator 2 strMonth, strDate, strYear, intMonth, YearPattern, strHour, strMinute, strSecond, winHeight, offset = parseInt(Cal.Format.toUpperCase().lastIndexOf("M"), 10) - parseInt(Cal.Format.toUpperCase().indexOf("M"), 10) - 1, strAMPM = ""; //parse month if (Cal.Format.toUpperCase() === "DDMMYYYY" || Cal.Format.toUpperCase() === "DDMMMYYYY") { if (DateSeparator === "") { strMonth = exDateTime.substring(2, 4 + offset); strDate = exDateTime.substring(0, 2); strYear = exDateTime.substring(4 + offset, 8 + offset); } else { if (exDateTime.indexOf("D*") !== -1) { //DTG strMonth = exDateTime.substring(8, 11); strDate = exDateTime.substring(0, 2); strYear = "20" + exDateTime.substring(11, 13); //Hack, nur für Jahreszahlen ab 2000 } else { strMonth = exDateTime.substring(Sp1 + 1, Sp2); strDate = exDateTime.substring(0, Sp1); strYear = exDateTime.substring(Sp2 + 1, Sp2 + 5); } } } else if (Cal.Format.toUpperCase() === "MMDDYYYY" || Cal.Format.toUpperCase() === "MMMDDYYYY"){ if (DateSeparator === ""){ strMonth = exDateTime.substring(0, 2 + offset); strDate = exDateTime.substring(2 + offset, 4 + offset); strYear = exDateTime.substring(4 + offset, 8 + offset); } else{ strMonth = exDateTime.substring(0, Sp1); strDate = exDateTime.substring(Sp1 + 1, Sp2); strYear = exDateTime.substring(Sp2 + 1, Sp2 + 5); } } else if (Cal.Format.toUpperCase() === "YYYYMMDD" || Cal.Format.toUpperCase() === "YYYYMMMDD") { if (DateSeparator === ""){ strMonth = exDateTime.substring(4, 6 + offset); strDate = exDateTime.substring(6 + offset, 8 + offset); strYear = exDateTime.substring(0, 4); } else{ strMonth = exDateTime.substring(Sp1 + 1, Sp2); strDate = exDateTime.substring(Sp2 + 1, Sp2 + 3); strYear = exDateTime.substring(0, Sp1); } } else if (Cal.Format.toUpperCase() === "YYMMDD" || Cal.Format.toUpperCase() === "YYMMMDD") { if (DateSeparator === "") { strMonth = exDateTime.substring(2, 4 + offset); strDate = exDateTime.substring(4 + offset, 6 + offset); strYear = exDateTime.substring(0, 2); } else { strMonth = exDateTime.substring(Sp1 + 1, Sp2); strDate = exDateTime.substring(Sp2 + 1, Sp2 + 3); strYear = exDateTime.substring(0, Sp1); } } if (isNaN(strMonth)){ intMonth = Cal.GetMonthIndex(strMonth); } else{ intMonth = parseInt(strMonth, 10) - 1; } if ((parseInt(intMonth, 10) >= 0) && (parseInt(intMonth, 10) < 12)) { Cal.Month = intMonth; } //end parse month //parse year YearPattern = /^\d{4}$/; if (YearPattern.test(strYear)) { if ((parseInt(strYear, 10)>=StartYear) && (parseInt(strYear, 10)<= (dtToday.getFullYear()+EndYear))) Cal.Year = parseInt(strYear, 10); } //end parse year //parse Date if ((parseInt(strDate, 10) <= Cal.GetMonDays()) && (parseInt(strDate, 10) >= 1)) { Cal.Date = strDate; } //end parse Date //parse time if (Cal.ShowTime === true) { //parse AM or PM if (TimeMode === 12) { strAMPM = exDateTime.substring(exDateTime.length - 2, exDateTime.length); Cal.AMorPM = strAMPM; } tSp1 = exDateTime.indexOf(":", 0); tSp2 = exDateTime.indexOf(":", (parseInt(tSp1, 10) + 1)); if (tSp1 > 0) { strHour = exDateTime.substring(tSp1, tSp1 - 2); Cal.SetHour(strHour); strMinute = exDateTime.substring(tSp1 + 1, tSp1 + 3); Cal.SetMinute(strMinute); strSecond = exDateTime.substring(tSp2 + 1, tSp2 + 3); Cal.SetSecond(strSecond); } else if (exDateTime.indexOf("D*") !== -1) { //DTG strHour = exDateTime.substring(2, 4); Cal.SetHour(strHour); strMinute = exDateTime.substring(4, 6); Cal.SetMinute(strMinute); } } } selDate = new Date(Cal.Year, Cal.Month, Cal.Date);//version 1.7 RenderCssCal(true); } function closewin(id) { if (Cal.ShowTime === true) { var MaxYear = dtToday.getFullYear() + EndYear; var beforeToday = (Cal.Date < dtToday.getDate()) && (Cal.Month === dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Month < dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Year < dtToday.getFullYear()); if ((Cal.Year <= MaxYear) && (Cal.Year >= StartYear) && (Cal.Month === selDate.getMonth()) && (Cal.Year === selDate.getFullYear())) { if (Cal.EnableDateMode === "future") { if (beforeToday === false) { callback(id, Cal.FormatDate(Cal.Date)); } } else callback(id, Cal.FormatDate(Cal.Date)); } } var CalId = document.getElementById(id); CalId.focus(); winCal.style.visibility = 'hidden'; } function changeBorder(element, col, oldBgColor) { if (col === 0) { element.style.background = HoverColor; element.style.borderColor = "black"; element.style.cursor = "pointer"; } else { if (oldBgColor) { element.style.background = oldBgColor; } else { element.style.background = "white"; } element.style.borderColor = "white"; element.style.cursor = "auto"; } } function selectDate(element, date) { Cal.Date = date; selDate = new Date(Cal.Year, Cal.Month, Cal.Date); element.style.background = SelDateColor; RenderCssCal(); } function pickIt(evt) { var objectID, dom, de, b; // accesses the element that generates the event and retrieves its ID if (document.addEventListener) { // w3c objectID = evt.target.id; if (objectID.indexOf(calSpanID) !== -1) { dom = document.getElementById(objectID); cnLeft = evt.pageX; cnTop = evt.pageY; if (dom.offsetLeft) { cnLeft = (cnLeft - dom.offsetLeft); cnTop = (cnTop - dom.offsetTop); } } // get mouse position on click xpos = (evt.pageX); ypos = (evt.pageY); } else { // IE objectID = event.srcElement.id; cnLeft = event.offsetX; cnTop = (event.offsetY); // get mouse position on click de = document.documentElement; b = document.body; xpos = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0); ypos = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0); } // verify if this is a valid element to pick if (objectID.indexOf(calSpanID) !== -1) { domStyle = document.getElementById(objectID).style; } if (domStyle) { domStyle.zIndex = 100; return false; } else { domStyle = null; return; } } function dragIt(evt) { if (domStyle) { if (document.addEventListener) { //for IE domStyle.left = (event.clientX - cnLeft + document.body.scrollLeft) + 'px'; domStyle.top = (event.clientY - cnTop + document.body.scrollTop) + 'px'; } else { //Firefox domStyle.left = (evt.clientX - cnLeft + document.body.scrollLeft) + 'px'; domStyle.top = (evt.clientY - cnTop + document.body.scrollTop) + 'px'; } } } // performs a single increment or decrement function nextStep(whatSpinner, direction) { if (whatSpinner === "Hour") { if (direction === "plus") { Cal.SetHour(Cal.Hours + 1); RenderCssCal(); } else if (direction === "minus") { Cal.SetHour(Cal.Hours - 1); RenderCssCal(); } } else if (whatSpinner === "Minute") { if (direction === "plus") { Cal.SetMinute(parseInt(Cal.Minutes, 10) + 1); RenderCssCal(); } else if (direction === "minus") { Cal.SetMinute(parseInt(Cal.Minutes, 10) - 1); RenderCssCal(); } } } // starts the time spinner function startSpin(whatSpinner, direction) { document.thisLoop = setInterval(function () { nextStep(whatSpinner, direction); }, 125); //125 ms } //stops the time spinner function stopSpin() { clearInterval(document.thisLoop); } function dropIt() { stopSpin(); if (domStyle) { domStyle = null; } } // Default events configuration document.onmousedown = pickIt; document.onmousemove = dragIt; document.onmouseup = dropIt;
 
<img onclick='nextStep(\"Hour\", \"plus\");' onmousedown='startSpin(\"Hour\", \"plus\");' onmouseup='stopSpin();' src='" + imageFilesPath + "cal_plus.gif' width='13px' height='9px' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>
<img onclick='nextStep(\"Hour\", \"minus\");' onmousedown='startSpin(\"Hour\", \"minus\");' onmouseup='stopSpin();' src='" + imageFilesPath + "cal_minus.gif' width='13px' height='9px' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>
<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH:22px\" value=" + showHour + " onkeyup=\"javascript:Cal.SetHour(this.value)\">"; vCalTime += ":";

vCalTime += "<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value=" + Cal.Minutes + " onkeyup=\"javascript:Cal.SetMinute(this.value)\">";

if (Cal.ShowSeconds) {

vCalTime += "
:";

vCalTime += "<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value=" + Cal.Seconds + " onkeyup=\"javascript:Cal.SetSecond(parseInt(this.value,10))\">"; }

if (TimeMode === 12) { SelectAm = (Cal.AMorPM === "AM") ? "Selected" : ""; SelectPm = (Cal.AMorPM === "PM") ? "Selected" : "";

vCalTime += "
";

vCalTime += "<select name=\"ampm\" onChange=\"javascript:Cal.SetAmPm(this.options[this.selectedIndex].value);\">\n"; vCalTime += "<option " + SelectAm + " value=\"AM\">AM</option>"; vCalTime += "<option " + SelectPm + " value=\"PM\">PM<option>"; vCalTime += "</select>"; }

if (ShowArrows && UseImageFiles) //this is where the up and down arrow to change the "Minute". {

vCalTime += "
<img onclick='nextStep(\"Minute\", \"plus\");' onmousedown='startSpin(\"Minute\", \"plus\");' onmouseup='stopSpin();' src='" + imageFilesPath + "cal_plus.gif' width='13px' height='9px' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>
<img onmousedown='startSpin(\"Minute\", \"minus\");' onmouseup='stopSpin();' onclick='nextStep(\"Minute\",\"minus\");' src='" + imageFilesPath + "cal_minus.gif' width='13px' height='9px' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>
";

}

vCalTime += "
<input style='width:60px;font-size:12px;' onClick='javascript:closewin(\"" + Cal.Ctrl + "\");' type=\"button\" value=\"OK\"> <input style='width:60px;font-size:12px;' onClick='javascript: winCal.style.visibility = \"hidden\"' type=\"button\" value=\"Cancel\">
";

//close button if (UseImageFiles) {

vCalClosing += "<img onmousedown='javascript:closewin(\"" + Cal.Ctrl + "\"); stopSpin();' src='"+imageFilesPath+"cal_close.gif' width='16px' height='14px' onmouseover='changeBorder(this,0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>