JavaScript DatePicker

Datepicker is useful and required control in web application. This datepicker saves postbacks.

Create datepicker without postback in javascript
////create css file of below

.calendar { font-family: Verdana; font-size: 8pt; position: relative; width: 125; height:
125; background-color: #F8F7F1; border-style: outset;
border-width: 2 }
.CalendarFrame { position: absolute; left: 75; top: 100 }
.calday { background-color: #F8F7F1; cursor: hand; border-style: inset; border-width: 1 }
.clicker { text-align: Center; background-color: #bfdcff; color: #000000; font-weight:
bold; cursor: hand; border-style: outset; border-width: 1 }
.TBox { font-size: 8pt; font-family: Verdana }
table { font-size: 8pt; font-family: Verdana }

.DayHeader {font-size: 8pt; font-family: Verdana;border-style: outset;border-width: 1;background-color: #F8F7F1; }
.day td{width:5px;color:FFFFFF;background-color: #0077ff; }

////create .js file of below

var OneDay = 86400000
var OneMonth = (OneDay * 30)
var CurrentDate = new Date()
varCurrentMonth = ""
varMonth = new Array(12)
varMonth[1] = "January"
varMonth[2] = "February"
varMonth[3] = "March"
varMonth[4] = "April"
varMonth[5] = "May"
varMonth[6] = "June"
varMonth[7] = "July"
varMonth[8] = "August"
varMonth[9] = "September"
varMonth[10] = "October"
varMonth[11] = "November"
varMonth[12] = "December"

function DoCalendar(TheDate)
{
var RefDate = new Date(TheDate)
varDays = RefDate.getTime() - (OneDay * (RefDate.getDate()-1))
RefDate.setTime(varDays)
varDays = RefDate.getTime() - (OneDay * (RefDate.getDay()))
RefDate.setTime(varDays)
var MnthDate = new Date(TheDate)
varDays = RefDate.getTime() + (OneDay * 15)
MnthDate.setTime(varDays)
varCurrentMonth = varMonth[MnthDate.getMonth()+1] + " " + MnthDate.getYear()
CurrentDate = TheDate
ShowCalendar(RefDate);
}

function Prev()
{
var pDate = new Date(CurrentDate);
varpDays = pDate.getTime() - OneMonth;
pDate.setTime(varpDays);
DoCalendar(pDate);
}

function Next()
{
var nDate = new Date(CurrentDate);
varnDays = nDate.getTime() + OneMonth;
nDate.setTime(varnDays);
DoCalendar(nDate);
}

function NextYear()
{
var nDate = new Date(CurrentDate);
varnDays = nDate.getTime() + (OneMonth*12);

nDate.setTime(varnDays);
DoCalendar(nDate);
}

function PrevYear()
{
var nDate = new Date(CurrentDate);
varnDays = nDate.getTime() - (OneMonth*12);

nDate.setTime(varnDays);
DoCalendar(nDate);
}

function ShowCalendar(theDate){
//alert(theDate);
calendar.innerHTML = "";
var DateLoop = new Date(theDate);
var varCal ="";
varCal += " < ";
varCal += " << Year >>
"+ varCurrentMonth +" ";
varCal += " >
";
varCal += " Sun Mon Tue Wed Thu Fri Sat
";
for ( var r = 1; r <= 6; r++ ) {
varCal += " "

for ( var c = 1; c <= 7; c++ ) {
if(c==1)
{
varCal += " }
else
{
varCal += " }
varCal += DateLoop.getMonth()+1 + "/" + DateLoop.getDate() + "/" + DateLoop.getYear()
varCal += "') class='calday'>" + DateLoop.getDate() + " ";

varDays = DateLoop.getTime() + OneDay;
DateLoop.setTime(varDays);

}
varCal += "
"
}
varCal += " "
calendar.innerHTML = varCal
}

function ShowDate(theDate)
{
calendar.innerHTML = ""
document.forms[0].txtDate.value = theDate
}


////paste below content in htm file in body tag

 

By Pritam Baldota   Popularity  (2758 Views)