We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
COURSE of the MONTH
13 days, 18 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Date picker with javascript
Posted on 2012-12-26
i need a code for datepicker.
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3 Comments
You should add jquery.js and jquery.ui.js (http://jquery.com/)
Then use this code:
html:
js:
Then use this code:
html:
<input id="id" class="date-picker" type="text"</inpult>
js:
jQuery(document).ready(fun
$('.date-picker').datepick
});
$('.date-picker').datepick
});
jsut to specify smrocco's suggestions a full example:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<style type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" ></style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#datepicker').datepicker();
});
</script>
</head>
<body>
<h1>Datepicker</h1>
<label>Pick a date<input type="text" id="datepicker"/></label>
</body>
</html>
Got this great javascript calendar with time from Rain Forest Net:
Function call:
//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 = 30; // 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 = "#FFFFFF"; // span border color
var SpanBgColor = "#FFFFFF"; // span background color
var MonthYearColor = "#A90000"; // Font Color of Month and Year in Calendar header.
var WeekHeadColor = "#A9A9A9"; // var WeekHeadColor="#18861B";//Background Color in Week header.
var SundayColor = "#4682B4"; // var SundayColor="#C0F64F";//Background color of Sunday.
var SaturdayColor = "#4682B4"; // Background color of Saturday.
var WeekDayColor = "#B0C4DE"; // Background color of weekdays.
var FontColor = "blue"; // color of font in Calendar day cell.
var TodayColor = "#FFF67F"; // 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 = "#8DD53C"; // 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 = "<span style='cursor:auto;'>";
vCalHeader = "<table style='background-color:"+CalBgColor+";width:200px;padding:0;margin:5px auto 5px auto'><tbody>";
//Table for Month & Year Selector
vCalHeader += "<tr><td colspan='7'><table border='0' width='200px' cellpadding='0' cellspacing='0'><tr>";
//******************Month and Year selector in dropdown list************************
if (Cal.Scroller === "DROPDOWN")
{
vCalHeader += "<td align='center'><select style='width:auto;' 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></td>";
//Year selector
vCalHeader += "<td align='center'><select style='width:auto;' 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></td>\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 += "<td><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'></td>\n";//Year scroller (decrease 1 year)
vCalHeader += "<td><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'></td>\n"; //Month scroller (decrease 1 month)
vCalHeader += "<td width='70%' class='calR' style='color:"+YrSelColor+"'>"+ Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + "</td>"; //Month and Year
vCalHeader += "<td><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'></td>\n"; //Month scroller (increase 1 month)
vCalHeader += "<td><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'></td>\n"; //Year scroller (increase 1 year)
calHeight += 22;
}
else
{
vCalHeader += "<td><span id='dec_year' title='reverse year' onmousedown='javascript:Cal.DecYear();RenderCssCal();' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white; color:" + YrSelColor + "'>-</span></td>";//Year scroller (decrease 1 year)
vCalHeader += "<td><span id='dec_month' title='reverse month' onmousedown='javascript:Cal.DecMonth();RenderCssCal();' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'><</span></td>\n";//Month scroller (decrease 1 month)
vCalHeader += "<td width='70%' class='calR' style='color:" + YrSelColor + "'>" + Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + "</td>\n"; //Month and Year
vCalHeader += "<td><span id='inc_month' title='forward month' onmousedown='javascript:Cal.IncMonth();RenderCssCal();' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>></span></td>\n";//Month scroller (increase 1 month)
vCalHeader += "<td><span id='inc_year' title='forward year' onmousedown='javascript:Cal.IncYear();RenderCssCal();' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white; color:" + YrSelColor + "'>+</span></td>\n";//Year scroller (increase 1 year)
calHeight += 22;
}
}
vCalHeader += "</tr></table></td></tr>";
//******************End Month and Year selector in arrow******************************
//Calendar header shows Month and Year
if (ShowMonthYear && Cal.Scroller === "DROPDOWN")
{
vCalHeader += "<tr><td colspan='7' class='calR' style='color:" + MonthYearColor + "'>" + Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + "</td></tr>";
calHeight += 19;
}
//Week day header
vCalHeader += "<tr><td colspan=\"7\"><table style='border-spacing:1px;border-collapse:separate;'><tr>";
if (MondayFirstDay === true)
{
WeekDayName = WeekDayName2;
}
else
{
WeekDayName = WeekDayName1;
}
for (i = 0; i < 7; i += 1)
{
vCalHeader += "<td style='background-color:"+WeekHeadColor+";width:"+CellWidth+"px;color:#FFFFFF' class='calTD'>" + WeekDayName[i].substr(0, WeekChar) + "</td>";
}
calHeight += 19;
vCalHeader += "</tr>";
//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 = "<tr>";
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 + "<tr>";
}
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 + "</tr>";
calHeight += 19;
}
}
// finish the table proper
if (vDayCount % 7 !== 0)
{
while (vDayCount % 7 !== 0)
{
vCalData = vCalData + GenCell();
vDayCount = vDayCount + 1;
}
}
vCalData = vCalData + "</table></td></tr>";
//Time picker
if (Cal.ShowTime === true)
{
showHour = Cal.getShowHour();
if (Cal.ShowSeconds === false && TimeMode === 24)
{
ShowArrows = true;
HourCellWidth = "10px";
}
vCalTime = "<tr><td colspan='7' style=\"text-align:center;\"><table border='0' width='200px' cellpadding='0' cellspacing='0'><tbody><tr><td height='5px' width='" + HourCellWidth + "'> </td>";
if (ShowArrows && UseImageFiles) //this is where the up and down arrow control the hour.
{
vCalTime += "<td style='vertical-align:middle;'><table cellspacing='0' cellpadding='0' style='line-height:0pt;width:100%;'><tr><td style='text-align:center;'><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'></td></tr><tr><td style='text-align:center;'><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'></td></tr></table></td>\n";
}
vCalTime += "<td width='22px'><input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH:22px\" value=" + showHour + " onkeyup=\"javascript:Cal.SetHour(this.value)\">";
vCalTime += "</td><td style='font-weight:bold;text-align:center;'>:</td><td width='22px'>";
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 += "</td><td style='font-weight:bold;'>:</td><td width='22px'>";
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 += "</td><td>";
vCalTime += "<select style='width:auto;' 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 += "</td>\n<td style='vertical-align:middle;'><table cellspacing='0' cellpadding='0' style='line-height:0pt;width:100%'><tr><td style='text-align:center;'><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'></td></tr><tr><td style='text-align:center;'><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'></td></tr></table>";
}
vCalTime += "</td>\n<td align='right' valign='bottom' width='" + HourCellWidth + "px'></td></tr>";
vCalTime += "<tr><td colspan='8' style=\"text-align:center;\"><input style='width:60px;font-size:12px;background-color:SteelBlue;color:#FFFFFF;' onClick='javascript:closewin(\"" + Cal.Ctrl + "\");' type=\"button\" value=\"OK\"> <input style='width:60px;font-size:12px;background-color:SteelBlue;color:#FFFFFF;' onClick='javascript: winCal.style.visibility = \"hidden\"' type=\"button\" value=\"Cancel\"></td></tr>";
}
else //if not to show time.
{
vCalTime += "\n<tr>\n<td colspan='7' style=\"text-align:right;\">";
//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'></td>";
}
else {
vCalClosing += "<span id='close_cal' title='close'onmousedown='javascript:closewin(\"" + Cal.Ctrl + "\");stopSpin();' onmouseover='changeBorder(this, 0)'onmouseout='changeBorder(this, 1)' style='border:1px solid white; font-family: Arial;font-size: 10pt;'>x</span></td>";
}
vCalClosing += "</tr>";
}
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;
Function call:
javascript:NewCssCal('startDatePre','MMddyyyy','dropdown','true',12);
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it
here
.
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month13 days, 18 hours left to enroll
801 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.