<script language="JavaScript">
/**//**
*This calendar selection control is improved by tiannet based on previous experience. Most of the code comes from meizz's calendar control.
*tiannet has added time selection function, select, object tag hiding function, and other small functions.
*How to use:
* (1) Select only date <input type="text" name="date" readOnly onClick="setDay(this);">
* (2) Select date and hour <input type="text" name="dateh" readOnly onClick="setDayH(this);">
* (3) Select date, hour and minute <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
* Method of setting parameters
* (1) Set the date separator setDateSplit(strSplit); default is "-"
* (2) Set the separator between date and time setDateTimeSplit(strSplit); default is " "
* (3) Set the time separator setTimeSplit(strSplit); default is ":"
* (4) Set the delimiter setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
* (5) Set the start and end year setYearPeriod(intDateBeg,intDateEnd)
*illustrate:
* The default returned date and time format is as follows: 2005-02-02 08:08
*/
//-----------------------------------------------------------------------------------------------------------------------------
//The same style of function button
var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//Buttons for turning over the year, month, etc.
var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;
//Close, clear button styles, etc.
var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
//Select the drop-down box in year
var s_tiannet_select = "width:64px;display:none;";
//Select the drop-down box for month, hour and minute
var s_tiannet_select2 = "width:46px;display:none;";
//Date selection control body style
var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
//Show the style of the day's td
var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//Font style
var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
//The link style
var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
//Horizontal line
var s_tiannet_line = "border-bottom:1 solid #6699CC";
//-----------------------------------------------------------------------------------------------------------------------------
var tiannetYearSt = 1950;//Selectable start year
var tiannetYearEnd = 2010;//Optional end year
var tiannetDateNow = new Date();
var tiannetYear = (); //Define the initial value of the variable that year
var tiannetMonth = ()+1; //Define the initial value of the variable that defines the month
var tiannetDay = ();
var tiannetHour = 8;//();
var tiannetMinute = 0;//();
var tiannetArrDay=new Array(42); //Define an array of write dates
var tiannetDateSplit = "-"; //Date separator symbol
var tiannetDateTimeSplit = " "; //The separator between date and time
var tiannetTimeSplit = ":"; //The separating symbol of time
var tiannetOutObject; //A object that receives date and time
var arrTiannetHide = new Array();//The tags that are forced to be hidden
var m_bolShowHour = false;//Whether to display hours
var m_bolShowMinute = false;// Whether to display minutes
var m_aMonHead = new Array(12); //Define the maximum number of days per month in the Gregorian calendar
m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;
m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//User main call function - only select date
function setDay(obj){
tiannetOutObject = obj;
// If there is a value in the tag, initialize the date to the current value
var strValue = tiannetTrim();
if( strValue != "" ){
tiannetInitDate(strValue);
}
tiannetPopCalendar();
}
//User main call function - select date and hour
function setDayH(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
// If there is a value in the tag, initialize the date and hour to the current value
var strValue = tiannetTrim();
if( strValue != "" ){
tiannetInitDate((0,10));
var hour = (11,13);
if( hour < 10 ) tiannetHour = (1,2);
}
tiannetPopCalendar();
}
//User main call function - select date, hour and minute
function setDayHM(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
// If there is a value in the tag, initialize the date, hour and minute to the current value
var strValue = tiannetTrim();
if( strValue != "" ){
tiannetInitDate((0,10));
var time = (11,16);
var arr = (tiannetTimeSplit);
tiannetHour = arr[0];
tiannetMinute = arr[1];
if( tiannetHour < 10 ) tiannetHour = (1,2);
if( tiannetMinute < 10 ) tiannetMinute = (1,2);
}
tiannetPopCalendar();
}
//Set the start date and end date
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//Set the date separator. Default is "-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
//Set the separator between date and time. Default is " "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit = strDateTimeSplit;
}
//Set the time separator. Default is ":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit = strTimeSplit;
}
//Set the separator
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//Set the default date. Format: YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear = (0,4);
tiannetMonth = (5,7);
tiannetDay = (8,10);
}
//Set the default time. Format: HH24:MI
function setDefaultTime(strTime){
tiannetHour = (0,2);
tiannetMinute = (3,5);
}
// ------------------------------------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var weekName = new Array("day","one","two","three","four","five","six");
('<div style="'+s_tiannet_body+'" style="This calendar selection control is perfected by tiannet based on the experience of previous generations!">');
('<div align="center" Author="tiannet" style="padding-top:2px;">');
('<span Author="tiannet" style="'+s_tiannet_font+'" '+
'onclick="spanYearCEvent();"> year</span>');
('<select style="'+s_tiannet_select+'" Author="tiannet" '+
' onChange="tiannetYear=;tiannetSetDay(tiannetYear,tiannetMonth);=\'\';'+
'=\'none\';">');
for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
('<option value="' + i + '">' + i + 'year</option>');
}
('</select>');
('<span Author="tiannet" style="'+s_tiannet_font+'" '+
'onclick="spanMonthCEvent();"> month</span>');
('<select style="'+s_tiannet_select2+'" Author="tiannet" '+
'onChange="tiannetMonth=;tiannetSetDay(tiannetYear,tiannetMonth);=\'\';'+
'=\'none\';">');
for(var i=1;i <= 12;i ++){
('<option value="' + i + '">' + i + 'month</option>');
}
('</select>');
//('</div>');
//('<div align="center" Author="tiannet">');
('<span Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
'onclick="spanHourCEvent();"> When</span>');
('<select style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
' onChange="tiannetHour=;tiannetWriteHead();=\'\';' +
'=\'none\';">');
for(var i=0;i <= 23;i ++){
('<option value="' + i + '">' + i + 'When</option>');
}
('</select>');
('<span Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
'onclick="spanMinuteCEvent();"> Points</span>');
('<select style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
' onChange="tiannetMinute=;tiannetWriteHead();=\'\';'+
'=\'none\';">');
for(var i=0;i <= 59;i ++){
('<option value="' + i + '">' + i + 'point</option>');
}
('</select>');
('</div>');
//Output a horizontal line
('<div style="'+s_tiannet_line+'"></div>');
('<div align="center" style="border:0;" Author="tiannet">');
('<input type="button" style="'+s_tiannet_turn+'" value="year↑" title="last year" onClick="tiannetPrevYear();">');
('<input type="button" style="'+s_tiannet_turn+'" value="year↓" title="next year" onClick="tiannetNextYear();"> ');
('<input type="button" style="'+s_tiannet_turn+'" value="month↑" title="last month" onClick="tiannetPrevMonth();">');
('<input type="button" style="'+s_tiannet_turn+'" value="month↓" title="next month" onClick="tiannetNextMonth();">');
('</div>');
//Output a horizontal line
('<div style="'+s_tiannet_line+'"></div>');
('<table border=0 cellspacing=0 cellpadding=0 bgcolor=white onselectstart="return false">');
(' <tr style="background-color:#2650A6;font-size:10pt;color:white;height:22px;" Author="tiannet">');
for(var i =0;i < ;i ++){
//Output week
('<td width="21" align="center" Author="tiannet">' + weekName[i] + '</td>');
}
(' </tr>');
('</table>');
//Opening day selection
('<table border=0 cellspacing=1 cellpadding=0 bgcolor=white onselectstart="return false">');
var n = 0;
for (var i=0;i<5;i++) {
(' <tr align=center >');
for (var j=0;j<7;j++){
('<td align="center" '+
'onClick="tiannetDay=;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
n ++;
}
(' </tr>');
}
(' <tr align=center >');
('<td align="center" onClick="tiannetDay=;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
('<td align="center" onClick="tiannetDay=;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
('<td align="right" colspan="5"><a href="javascript:tiannetClear();" style="' + s_tiannet_link + '">Clear</a>'+
' <a href="javascript:tiannetHideControl();" style="' + s_tiannet_link + '">Close</a>' +
' <a href="javascript:tiannetSetValue(true);" style="' + s_tiannet_link + '">OK</a> ' +
'</td>');
(' </tr>');
('</table>');
('</div>');
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Click the year span tag to respond
function spanYearCEvent(){
hideElementsById(new Array("selTianYear","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//Click the month span tag to respond
function spanMonthCEvent(){
hideElementsById(new Array("selTianMonth","tiannetYearHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true);
}
//Click the hour span tag to respond
function spanHourCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true);
}
//Click the span tag response in minutes
function spanMinuteCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
}
//Hide or display tags according to tag id
function hideElementsById(arrId,bolHide){
var strDisplay = "";
if(bolHide) strDisplay = "none";
for(var i = 0;i < ;i ++){
var obj = (arrId[i]);
= strDisplay;
}
}
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Judge whether a year is a leap year
function isPinYear(year){
var bolRet = false;
if (0==year%4&&((year%100!=0)||(year%400==0))) {
bolRet = true;
}
return bolRet;
}
//Get the number of days in one month, the leap year is 29 days
function getMonthCount(year,month){
var c=m_aMonHead[month-1];
if((month==2)&&isPinYear(year)) c++;
return c;
}
//Reset the current day. It is mainly to prevent the current day from being greater than the maximum day of the month when the year is reversed or the month is reversed.
function setRealDayCount() {
if( tiannetDay > getMonthCount(tiannetYear,tiannetMonth) ) {
//If the current day is greater than the maximum day of the current month, then the maximum day of the current month will be taken
tiannetDay = getMonthCount(tiannetYear,tiannetMonth);
}
}
//Add zero before single digits
function addZero(value){
if(value < 10 ){
value = "0" + value;
}
return value;
}
//Take out space
function tiannetTrim(str) {
return (/(^\s*)|(\s*$)/g,"");
}
//Create an option for select
function createOption(objSelect,value,text){
var option = ("OPTION");
= value;
= text;
(option);
}
//Flip forward Year
function tiannetPrevYear() {
if(tiannetYear > 999 && tiannetYear <10000){tiannetYear--;}
else{alert("Year out of range (1000-9999)!");}
tiannetSetDay(tiannetYear,tiannetMonth);
//If the year is less than the minimum allowed year, create the corresponding option
if( tiannetYear < tiannetYearSt ) {
tiannetYearSt = tiannetYear;
createOption(,tiannetYear,tiannetYear + "year");
}
checkSelect(,tiannetYear);
tiannetWriteHead();
}
//Flip back Year
function tiannetNextYear() {
if(tiannetYear > 999 && tiannetYear <10000){tiannetYear++;}
else{alert("Year out of range (1000-9999)!");return;}
tiannetSetDay(tiannetYear,tiannetMonth);
//If the year exceeds the maximum allowed year, create the corresponding option
if( tiannetYear > tiannetYearEnd ) {
tiannetYearEnd = tiannetYear;
createOption(,tiannetYear,tiannetYear + "year");
}
checkSelect(,tiannetYear);
tiannetWriteHead();
}
//Choose today
function tiannetToday() {
tiannetYear = ();
tiannetMonth = ()+1;
tiannetDay = ();
tiannetSetValue(true);
//tiannetSetDay(tiannetYear,tiannetMonth);
//selectObject();
}
//Follow the month ahead
function tiannetPrevMonth() {
if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(,tiannetMonth);
tiannetWriteHead();
}
//Follow the month
function tiannetNextMonth() {
if(tiannetMonth==12){tiannetYear++;tiannetMonth=1}else{tiannetMonth++}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(,tiannetMonth);
tiannetWriteHead();
}
//Write year, month, time, minute and other data into the span tag
function tiannetWriteHead(){
= tiannetYear + "year";
= tiannetMonth + "month";
if( m_bolShowHour ) = " "+tiannetHour + "time";
if( m_bolShowMinute ) = tiannetMinute + "point";
tiannetSetValue(false);// Assign values to the text box, but do not hide this control
}
//Set the display day
function tiannetSetDay(yy,mm) {
setRealDayCount();//Set the real day of the month
tiannetWriteHead();
var strDateFont1 = "", strDateFont2 = "" //Training the style of date display
for (var i = 0; i < 37; i++){tiannetArrDay[i]=""}; //Clear all contents of the display box
var day1 = 1;
var firstday = new Date(yy,mm-1,1).getDay(); //What day of the week of the first day of a certain month
for (var i = firstday; day1 < getMonthCount(yy,mm)+1; i++){
tiannetArrDay[i]=day1;day1++;
}
// If the value of the first cell used to display the last row of the day is empty, hide the entire row.
//if(tiannetArrDay[35] == ""){
// . = "none";
//} else {
// . = "";
//}
for (var i = 0; i < 37; i++){
var da = eval(""+i) //Write the date and week arrangement of the new month
if (tiannetArrDay[i]!="") {
//Judge whether it is a weekend, if it is a weekend, change it to a red font
if(i % 7 == 0 || (i+1) % 7 == 0){
strDateFont1 = "<font color=#f0000>"
strDateFont2 = "</font>"
} else {
strDateFont1 = "";
strDateFont2 = ""
}
= strDateFont1 + tiannetArrDay[i] + strDateFont2;
//If it is the currently selected day, change the color
if(tiannetArrDay[i] == tiannetDay ) {
= "#CCCCCC";
} else {
= "#EFEFEF";
}
="hand"
} else {
="";="";="default"
}
}//end for
tiannetSetValue(false);// Assign values to the text box, but do not hide this control
}//end function tiannetSetDay
//Select option according to the value of option
function checkSelect(objSelect,selectValue) {
var count = parseInt();
if( selectValue < 10 && ().length == 2) {
selectValue = (1,2);
}
for(var i = 0;i < count;i ++){
if([i].value == selectValue){
= i;
break;
}
}//for
}
//Select the drop-down boxes such as year, month, hour, and minute, etc.
function selectObject(){
//If the year is less than the minimum allowed year, create the corresponding option
if( tiannetYear < tiannetYearSt ) {
for( var i = tiannetYear;i < tiannetYearSt;i ++ ){
createOption(,i,i + "year");
}
tiannetYearSt = tiannetYear;
}
//If the year exceeds the maximum allowed year, create the corresponding option
if( tiannetYear > tiannetYearEnd ) {
for( var i = tiannetYearEnd+1;i <= tiannetYear;i ++ ){
createOption(,i,i + "year");
}
tiannetYearEnd = tiannetYear;
}
checkSelect(,tiannetYear);
checkSelect(,tiannetMonth);
if( m_bolShowHour ) checkSelect(,tiannetHour);
if( m_bolShowMinute ) checkSelect(,tiannetMinute);
}
// Assign values to the control that accepts date and time
//Parameter bolHideControl - Whether to hide the control
function tiannetSetValue(bolHideControl){
var value = "";
if( !tiannetDay || tiannetDay == "" ){
= value;
return;
}
var mm = tiannetMonth;
var day = tiannetDay;
if( mm < 10 && ().length == 1) mm = "0" + mm;
if( day < 10 && ().length == 1) day = "0" + day;
value = tiannetYear + tiannetDateSplit + mm + tiannetDateSplit + day;
if( m_bolShowHour ){
var hour = tiannetHour;
if( hour < 10 && ().length == 1 ) hour = "0" + hour;
value += tiannetDateTimeSplit + hour;
}
if( m_bolShowMinute ){
var minute = tiannetMinute;
if( minute < 10 && ().length == 1 ) minute = "0" + minute;
value += tiannetTimeSplit + minute;
}
= value;
// = "none";
if( bolHideControl ) {
tiannetHideControl();
}
}
// Whether to display the time
function showTime(){
if( !m_bolShowHour && m_bolShowMinute){
alert("If you want to select minutes, you must be able to select hours!");
return;
}
hideElementsById(new Array("tiannetHourHead","selTianHour","tiannetMinuteHead","selTianMinute"),true);
if( m_bolShowHour ){
//Show hours
hideElementsById(new Array("tiannetHourHead"),false);
}
if( m_bolShowMinute ){
//Show minutes
hideElementsById(new Array("tiannetMinuteHead"),false);
}
}
//The calendar selection control pops up to let the user choose
function tiannetPopCalendar(){
//Hide the drop-down box to display the corresponding head
hideElementsById(new Array("selTianYear","selTianMonth","selTianHour","selTianMinute"),true);
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead","tiannetHourHead","tiannetMinuteHead"),false);
tiannetSetDay(tiannetYear,tiannetMonth);
tiannetWriteHead();
showTime();
var dads = ;
var iX, iY;
var h = ;
var w = ;
// Calculate left
if ( + h > - 10 )
iX = - h - 5 ;
else
iX = + 5;
if (iX <0)
iX=0;
//Calculate top
iY = ;
if ( + w > - 10 )
iY = + - w - 5 ;
else
iY = + + 5;
if (iY <0)
iY=0;
= iX;
= iY;
tiannetShowControl();
selectObject();
}
//Hide the calendar control (showing the forced hidden tags at the same time)
function tiannetHideControl(){
= "none";
tiannetShowObject();
arrTiannetHide = new Array();//Clear the hidden tag object
}
//Show calendar controls (hide the obstructed tags)
function tiannetShowControl(){
= "";
tiannetHideObject("SELECT");
tiannetHideObject("OBJECT");
}
//Hide the tag based on the tag name. If the select of the control is blocked, object
function tiannetHideObject(strTagName) {
x = ;
y = ;
h = ;
w = ;
for (var i = 0; i < (strTagName).length; i++)
{
var obj = (strTagName)[i];
if (! obj || ! )
continue;
// Get the relative coordinates of the element to the BODY mark
var objLeft = ;
var objTop = ;
var objHeight = ;
var objWidth = ;
var objParent = ;
while (() != "BODY"){
objLeft += ;
objTop += ;
objParent = ;
}
//alert("Left end of the control:" + x + "select left end" + (objLeft + objWidth) + "bottom of the control:" + (y+h) + "select height:" + objTop);
var bolHide = true;
if( == "none" || == "hidden" || ("Author") == "tiannet" ){
//If the tag itself is hidden, it does not need to be hidden anymore. If it is a drop-down box in the control, it does not need to be hidden.
bolHide = false;
}
if( ( (objLeft + objWidth) > x && (y + h + 20) > objTop && (objTop+objHeight) > y && objLeft < (x+w) ) && bolHide ){
//(obj);//Record hidden tag objects
arrTiannetHide[] = obj;
= "hidden";
}
}
}
//Show hidden tags
function tiannetShowObject(){
for(var i = 0;i < ;i ++){
//alert(arrTiannetHide[i]);
arrTiannetHide[i]. = "";
}
}
//Initialization date.
function tiannetInitDate(strDate){
var arr = (tiannetDateSplit);
tiannetYear = arr[0];
tiannetMonth = arr[1];
tiannetDay = arr[2];
}
//Clear
function tiannetClear(){
= "";
tiannetHideControl();
}
//Close the control when clicking any time
function (){
with(){
if (tagName != "INPUT" && getAttribute("Author") != "tiannet")
tiannetHideControl();
}
}
//Press ESC key to close the control
function (){
if( == 27 ){
tiannetHideControl();
}
}
</script>
(1) Select only date <input type="text" name="date" readOnly onClick="setDay(this);"><br/>
(2) Select date and hour <input type="text" name="dateh" readOnly onClick="setDayH(this);"><br/>
(3) Select date, hour and minute <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
<p>
Amount summary
</p>