<HTML>
<HEAD>
<TITLE>Date Selector</TITLE>
<SCRIPT type="text/javascript">
/**
* Return date
* @param d the delimiter
* @param p the pattern of your date
* @author Xinge(Modify)
*/
= function(x, p) {
if(x == null) x = "-";
if(p == null) p = "ymd";
var a = (x);
var y = parseInt(a[("y")]);
//remember to change this next century ;)
if(().length <= 2) y += 2000;
if(isNaN(y)) y = new Date().getFullYear();
var m = parseInt(a[("m")]) - 1;
var d = parseInt(a[("d")]);
if(isNaN(d)) d = 1;
return new Date(y, m, d);
}
/**
* Format date
* @param d the delimiter
* @param p the pattern of your date
* @author Xinge(Modify)
*/
= function(style) {
var o = {
"M+" : () + 1, //month
"d+" : (), //day
"h+" : (), //hour
"m+" : (), //minute
"s+" : (), //second
"w+": "Tian 1, 2, 3, 5, 6".charAt(()), //week
"q+" : ((() + 3) / 3), //quarter
"S" : () //millisecond
}
if(/(y+)/.test(style)) {
style = (RegExp.$1,
(() + "").substr(4 - RegExp.$));
}
for(var k in o){
if(new RegExp("("+ k +")").test(style)){
style = (RegExp.$1,
RegExp.$ == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
}
}
return style;
};
/**
* Calendar category
* @param beginYear 1990
* @param endYear
* @param lang ŀ(Chinese)|1(English) Freely expandable
* @param dateFormatStyle "yyyy-MM-dd";
* @version 2007-03-16
* @author Xinge(Modify)
* @update
*/
function Calendar(lang,beginYear,endYear,dateFormatStyle) {
= 1990;
= 2010;
= 0; //0(Chinese)| 1(English)
= "yyyy-MM-dd";
if (beginYear != null && endYear != null){
= beginYear;
= endYear;
}
if (lang != null){
= lang
}
if (dateFormatStyle != null){
= dateFormatStyle
}
= null;
= ("calendarPanel");
= null;
= new Date();
= ();
= ();
= {
"cur_word" : "#FFFFFF", //Date text color
"cur_bg" : "#00FF00", //The back color of the cell on the date of the day
"sun_word" : "#FF0000", // Weekly text color
"sat_word" : "#0000FF", //Sat text color
"td_word_light" : "#000000", //Cell text color
"td_word_dark" : "#CCCCCC", //The cell text is dark
"td_bg_out" : "#FFFFFF", //Cell back color
"td_bg_over" : "#FFCC00", //Cell back color
"tr_word" : "#FFFFFF", //Calendar Initial Text Color
"tr_bg" : "#FF6600", //Calendar head back color
"input_border" : "#CCCCCC", //Border color of the input control
"input_bg" : "#EFEFEF" //The back color of the input control
}
();
();
();
();
();
}
/**
* Calendar class attributes (language package, freely expanded)
*/
= {
"year" : [[""], [""]],
"months" :[["January","February","March","April","May","June","July","August","September","October","November","December"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
],
"weeks" :[["day","one","two","three","four","five","six",
["SUN","MON","TUR","WED","THU","FRI","SAT"]
],
"clear" : [["Clear"], ["CLS"]],
"today" : [["Today"], ["TODAY"]],
"close" : [["Close"], ["CLOSE"]]
}
= function() {
calendar = this;
var mvAry = [];
mvAry[] = ' <form name="calendarForm" style="margin: 0px;">';
mvAry[] = ' <table width="100%" border="0" cellpadding="0" cellspacing="0">';
mvAry[] = ' <tr>';
mvAry[] = ' <th align="left" width="1%"><input style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:16px;height:20px;" name="prevMonth" type="button" value="<" /></th>';
mvAry[] = ' <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" style="font-size:12px;width:50%;"></select><select name="calendarMonth" style="font-size:12px;width:50%;"></select></th>';
mvAry[] = ' <th align="right" width="1%"><input style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:16px;height:20px;" name="nextMonth" type="button" value=">" /></th>';
mvAry[] = ' </tr>';
mvAry[] = ' </table>';
mvAry[] = ' <table width="100%" style="border:0px solid #CCCCCC;background-color:#DDD" border="0" cellpadding="3" cellspacing="1">';
mvAry[] = ' <tr>';
for(var i = 0; i < 7; i++) {
mvAry[] = ' <th style="font-weight:normal;background-color:' + ["tr_bg"] + ';color:' + ["tr_word"] + ';">' + ["weeks"][][i] + '</th>';
}
mvAry[] = ' </tr>';
for(var i = 0; i < 6;i++){
mvAry[] = ' <tr align="center">';
for(var j = 0; j < 7; j++) {
if (j == 0){
mvAry[] = ' <td style="cursor:default;color:' + ["sun_word"] + ';"></td>';
} else if(j == 6) {
mvAry[] = ' <td style="cursor:default;color:' + ["sat_word"] + ';"></td>';
} else {
mvAry[] = ' <td style="cursor:default;"></td>';
}
}
mvAry[] = ' </tr>';
}
mvAry[] = ' <tr style="background-color:' + ["input_bg"] + ';">';
mvAry[] = ' <th colspan="2"><input name="calendarClear" type="button" value="' + ["clear"][] + '" style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[] = ' <th colspan="3"><input name="calendarToday" type="button" value="' + ["today"][] + '" style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[] = ' <th colspan="2"><input name="calendarClose" type="button" value="' + ["close"][] + '" style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[] = ' </tr>';
mvAry[] = ' </table>';
mvAry[] = ' </form>';
= ("");
= ["calendarForm"];
= function () {(this);}
= function () {(this);}
= function () { = "";();}
= function () {();}
= function () {(this);}
= function () {(this);}
= function () {
var today = new Date();
= today;
= ();
= ();
();
();
= ();
();
}
}
//Year drop-down box binds data
= function() {
var cy = ;
= 0;
for (var i = ; i <= ; i++){
[] = new Option(i + ["year"][], i);
}
}
//Bind data for month drop-down box
= function() {
var cm = ;
= 0;
for (var i = 0; i < 12; i++){
[] = new Option(["months"][][i], i);
}
}
//Towards one month
= function(e){
if ( == && == 0){return;}
--;
if ( == -1) {
--;
= 11;
}
= new Date(, , 1);
();
();
}
//A month back
= function(e){
if ( == && == 11){return;}
++;
if ( == 12) {
++;
= 0;
}
= new Date(, , 1);
();
();
}
//Change the SELECT selected state
= function() {
var cy = ;
var cm = ;
for (var i= 0; i < ; i++){
if ([i].value == ()){
cy[i].selected = true;
break;
}
}
for (var i= 0; i < ; i++){
if ([i].value == ()){
cm[i].selected = true;
break;
}
}
}
//Update year and month
= function (e){
= [].value;
= [].value;
= new Date(, , 1);
();
();
}
//Bind data to month view
= function () {
var calendar = this;
var dateArray = ((), ());
var tds = ("calendarTable").getElementsByTagName("td");
for(var i = 0; i < ; i++) {
//tds[i]. = ["td_word_light"];
tds[i]. = ["td_bg_out"];
tds[i].onclick = function () {return;}
tds[i].onmouseover = function () {return;}
tds[i].onmouseout = function () {return;}
if (i > - 1) break;
tds[i].innerHTML = dateArray[i];
if (dateArray[i] != " "){
tds[i].onclick = function () {
if ( != null){
= new Date((),
(),
).format();
}
();
}
tds[i].onmouseover = function () {
= ["td_bg_over"];
}
tds[i].onmouseout = function () {
= ["td_bg_out"];
}
if (new Date().format() ==
new Date((),
(),
dateArray[i]).format()) {
//tds[i]. = ["cur_word"];
tds[i]. = ["cur_bg"];
tds[i].onmouseover = function () {
= ["td_bg_over"];
}
tds[i].onmouseout = function () {
= ["cur_bg"];
}
}//end if
}
}
}
//Get monthly view data based on year and month (array form)
= function (y, m) {
var mvArray = [];
var dayOfFirstDay = new Date(y, m, 1).getDay();
var daysOfMonth = new Date(y, m + 1, 0).getDate();
for (var i = 0; i < 42; i++) {
mvArray[i] = " ";
}
for (var i = 0; i < daysOfMonth; i++){
mvArray[i + dayOfFirstDay] = i + 1;
}
return mvArray;
}
//Extension (id) Multi-browser compatibility
= function(id){
if (typeof(id) != "string" || id == "") return null;
if () return (id);
if () return (id);
try {return eval(id);} catch(e){ return null;}
}
//Expand (tagName)
= function(object, tagName){
if () return (tagName);
if () return (tagName);
}
//Get the absolute position of the HTML control
= function (e){
var x = ;
var y = ;
while(e = ){
x += ;
y += ;
}
return {"x": x, "y": y};
}
//Show calendar
= function (dateControl, popControl) {
if (dateControl == null){
throw new Error("arguments[0] is necessary")
}
= dateControl;
if ( > 0){
= new Date(());
= ();
= ();
();
();
}
if (popControl == null){
popControl = dateControl;
}
var xy = (popControl);
= + "px";
= ( + ) + "px";
= "visible";
}
//Hide calendar
= function() {
= "hidden";
}
var html = '<div style="\
position:absolute;visibility:hidden;z-index:9999;background-color:#fff;border:2px solid #ccc;width:225px;font-size:12px;\
"><iframe style="position:absolute;width:100%;height:199px;z-index:-1;border:none"></iframe>\
<div ></div>\
</div>';
(html);
</SCRIPT>
</HEAD>
<BODY>
<!--
//English:
new Calendar(1).show(this)
-->
<INPUT class=textbox onclick="new Calendar(0).show(this)"
readOnly size="23" value="2007-03-16" name=postTime>
</BODY>
</HTML>
<HEAD>
<TITLE>Date Selector</TITLE>
<SCRIPT type="text/javascript">
/**
* Return date
* @param d the delimiter
* @param p the pattern of your date
* @author Xinge(Modify)
*/
= function(x, p) {
if(x == null) x = "-";
if(p == null) p = "ymd";
var a = (x);
var y = parseInt(a[("y")]);
//remember to change this next century ;)
if(().length <= 2) y += 2000;
if(isNaN(y)) y = new Date().getFullYear();
var m = parseInt(a[("m")]) - 1;
var d = parseInt(a[("d")]);
if(isNaN(d)) d = 1;
return new Date(y, m, d);
}
/**
* Format date
* @param d the delimiter
* @param p the pattern of your date
* @author Xinge(Modify)
*/
= function(style) {
var o = {
"M+" : () + 1, //month
"d+" : (), //day
"h+" : (), //hour
"m+" : (), //minute
"s+" : (), //second
"w+": "Tian 1, 2, 3, 5, 6".charAt(()), //week
"q+" : ((() + 3) / 3), //quarter
"S" : () //millisecond
}
if(/(y+)/.test(style)) {
style = (RegExp.$1,
(() + "").substr(4 - RegExp.$));
}
for(var k in o){
if(new RegExp("("+ k +")").test(style)){
style = (RegExp.$1,
RegExp.$ == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
}
}
return style;
};
/**
* Calendar category
* @param beginYear 1990
* @param endYear
* @param lang ŀ(Chinese)|1(English) Freely expandable
* @param dateFormatStyle "yyyy-MM-dd";
* @version 2007-03-16
* @author Xinge(Modify)
* @update
*/
function Calendar(lang,beginYear,endYear,dateFormatStyle) {
= 1990;
= 2010;
= 0; //0(Chinese)| 1(English)
= "yyyy-MM-dd";
if (beginYear != null && endYear != null){
= beginYear;
= endYear;
}
if (lang != null){
= lang
}
if (dateFormatStyle != null){
= dateFormatStyle
}
= null;
= ("calendarPanel");
= null;
= new Date();
= ();
= ();
= {
"cur_word" : "#FFFFFF", //Date text color
"cur_bg" : "#00FF00", //The back color of the cell on the date of the day
"sun_word" : "#FF0000", // Weekly text color
"sat_word" : "#0000FF", //Sat text color
"td_word_light" : "#000000", //Cell text color
"td_word_dark" : "#CCCCCC", //The cell text is dark
"td_bg_out" : "#FFFFFF", //Cell back color
"td_bg_over" : "#FFCC00", //Cell back color
"tr_word" : "#FFFFFF", //Calendar Initial Text Color
"tr_bg" : "#FF6600", //Calendar head back color
"input_border" : "#CCCCCC", //Border color of the input control
"input_bg" : "#EFEFEF" //The back color of the input control
}
();
();
();
();
();
}
/**
* Calendar class attributes (language package, freely expanded)
*/
= {
"year" : [[""], [""]],
"months" :[["January","February","March","April","May","June","July","August","September","October","November","December"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
],
"weeks" :[["day","one","two","three","four","five","six",
["SUN","MON","TUR","WED","THU","FRI","SAT"]
],
"clear" : [["Clear"], ["CLS"]],
"today" : [["Today"], ["TODAY"]],
"close" : [["Close"], ["CLOSE"]]
}
= function() {
calendar = this;
var mvAry = [];
mvAry[] = ' <form name="calendarForm" style="margin: 0px;">';
mvAry[] = ' <table width="100%" border="0" cellpadding="0" cellspacing="0">';
mvAry[] = ' <tr>';
mvAry[] = ' <th align="left" width="1%"><input style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:16px;height:20px;" name="prevMonth" type="button" value="<" /></th>';
mvAry[] = ' <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" style="font-size:12px;width:50%;"></select><select name="calendarMonth" style="font-size:12px;width:50%;"></select></th>';
mvAry[] = ' <th align="right" width="1%"><input style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:16px;height:20px;" name="nextMonth" type="button" value=">" /></th>';
mvAry[] = ' </tr>';
mvAry[] = ' </table>';
mvAry[] = ' <table width="100%" style="border:0px solid #CCCCCC;background-color:#DDD" border="0" cellpadding="3" cellspacing="1">';
mvAry[] = ' <tr>';
for(var i = 0; i < 7; i++) {
mvAry[] = ' <th style="font-weight:normal;background-color:' + ["tr_bg"] + ';color:' + ["tr_word"] + ';">' + ["weeks"][][i] + '</th>';
}
mvAry[] = ' </tr>';
for(var i = 0; i < 6;i++){
mvAry[] = ' <tr align="center">';
for(var j = 0; j < 7; j++) {
if (j == 0){
mvAry[] = ' <td style="cursor:default;color:' + ["sun_word"] + ';"></td>';
} else if(j == 6) {
mvAry[] = ' <td style="cursor:default;color:' + ["sat_word"] + ';"></td>';
} else {
mvAry[] = ' <td style="cursor:default;"></td>';
}
}
mvAry[] = ' </tr>';
}
mvAry[] = ' <tr style="background-color:' + ["input_bg"] + ';">';
mvAry[] = ' <th colspan="2"><input name="calendarClear" type="button" value="' + ["clear"][] + '" style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[] = ' <th colspan="3"><input name="calendarToday" type="button" value="' + ["today"][] + '" style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[] = ' <th colspan="2"><input name="calendarClose" type="button" value="' + ["close"][] + '" style="border: 1px solid ' + ["input_border"] + ';background-color:' + ["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[] = ' </tr>';
mvAry[] = ' </table>';
mvAry[] = ' </form>';
= ("");
= ["calendarForm"];
= function () {(this);}
= function () {(this);}
= function () { = "";();}
= function () {();}
= function () {(this);}
= function () {(this);}
= function () {
var today = new Date();
= today;
= ();
= ();
();
();
= ();
();
}
}
//Year drop-down box binds data
= function() {
var cy = ;
= 0;
for (var i = ; i <= ; i++){
[] = new Option(i + ["year"][], i);
}
}
//Bind data for month drop-down box
= function() {
var cm = ;
= 0;
for (var i = 0; i < 12; i++){
[] = new Option(["months"][][i], i);
}
}
//Towards one month
= function(e){
if ( == && == 0){return;}
--;
if ( == -1) {
--;
= 11;
}
= new Date(, , 1);
();
();
}
//A month back
= function(e){
if ( == && == 11){return;}
++;
if ( == 12) {
++;
= 0;
}
= new Date(, , 1);
();
();
}
//Change the SELECT selected state
= function() {
var cy = ;
var cm = ;
for (var i= 0; i < ; i++){
if ([i].value == ()){
cy[i].selected = true;
break;
}
}
for (var i= 0; i < ; i++){
if ([i].value == ()){
cm[i].selected = true;
break;
}
}
}
//Update year and month
= function (e){
= [].value;
= [].value;
= new Date(, , 1);
();
();
}
//Bind data to month view
= function () {
var calendar = this;
var dateArray = ((), ());
var tds = ("calendarTable").getElementsByTagName("td");
for(var i = 0; i < ; i++) {
//tds[i]. = ["td_word_light"];
tds[i]. = ["td_bg_out"];
tds[i].onclick = function () {return;}
tds[i].onmouseover = function () {return;}
tds[i].onmouseout = function () {return;}
if (i > - 1) break;
tds[i].innerHTML = dateArray[i];
if (dateArray[i] != " "){
tds[i].onclick = function () {
if ( != null){
= new Date((),
(),
).format();
}
();
}
tds[i].onmouseover = function () {
= ["td_bg_over"];
}
tds[i].onmouseout = function () {
= ["td_bg_out"];
}
if (new Date().format() ==
new Date((),
(),
dateArray[i]).format()) {
//tds[i]. = ["cur_word"];
tds[i]. = ["cur_bg"];
tds[i].onmouseover = function () {
= ["td_bg_over"];
}
tds[i].onmouseout = function () {
= ["cur_bg"];
}
}//end if
}
}
}
//Get monthly view data based on year and month (array form)
= function (y, m) {
var mvArray = [];
var dayOfFirstDay = new Date(y, m, 1).getDay();
var daysOfMonth = new Date(y, m + 1, 0).getDate();
for (var i = 0; i < 42; i++) {
mvArray[i] = " ";
}
for (var i = 0; i < daysOfMonth; i++){
mvArray[i + dayOfFirstDay] = i + 1;
}
return mvArray;
}
//Extension (id) Multi-browser compatibility
= function(id){
if (typeof(id) != "string" || id == "") return null;
if () return (id);
if () return (id);
try {return eval(id);} catch(e){ return null;}
}
//Expand (tagName)
= function(object, tagName){
if () return (tagName);
if () return (tagName);
}
//Get the absolute position of the HTML control
= function (e){
var x = ;
var y = ;
while(e = ){
x += ;
y += ;
}
return {"x": x, "y": y};
}
//Show calendar
= function (dateControl, popControl) {
if (dateControl == null){
throw new Error("arguments[0] is necessary")
}
= dateControl;
if ( > 0){
= new Date(());
= ();
= ();
();
();
}
if (popControl == null){
popControl = dateControl;
}
var xy = (popControl);
= + "px";
= ( + ) + "px";
= "visible";
}
//Hide calendar
= function() {
= "hidden";
}
var html = '<div style="\
position:absolute;visibility:hidden;z-index:9999;background-color:#fff;border:2px solid #ccc;width:225px;font-size:12px;\
"><iframe style="position:absolute;width:100%;height:199px;z-index:-1;border:none"></iframe>\
<div ></div>\
</div>';
(html);
</SCRIPT>
</HEAD>
<BODY>
<!--
//English:
new Calendar(1).show(this)
-->
<INPUT class=textbox onclick="new Calendar(0).show(this)"
readOnly size="23" value="2007-03-16" name=postTime>
</BODY>
</HTML>