JS date and time selection control upgraded version (self-written)_javascript skills

/**
*This calendar selection control is perfected by tiannet based on previous experience. Most of the code comes from meizz's calendar control.
*tiannet has added time selection function, select, object label hiding function, and other small functions.
*Usage:
* (1) Select date only
* (2) Select Date and hour
* (3)Select date, hour and minute
*Method for setting parameters
* (1) Set the date separator setDateSplit(strSplit); the default is "-"
* ( 2) Set the separator between date and time setDateTimeSplit(strSplit); the default is " "
* (3) Set the time separator setTimeSplit(strSplit); the default is ":"
* (4) Set ( The separators in 1), (2), and (3) setSplit(strDateSplit, strDateTimeSplit, strTimeSplit);
* (5) Set the start and end years setYearPeriod(intDateBeg, intDateEnd)
* Description:
* The default returned date and time format is as follows: 2005-02-02 08:08
*/
//------------------ Style definition--- --------------------------//
//Same style for function buttons
var s_tiannet_turn_base = "height:16px;font-size: 9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//Buttons for turning year, month, etc.
var s_tiannet_turn = "width:28px;" s_tiannet_turn_base;
//Close, clear, etc. button styles
var s_tiannet_turn2 = "width:22px;" s_tiannet_turn_base;
//Year selection drop-down box
var s_tiannet_select = "width:64px;display:none ;";
//Month, hour, minute selection drop-down box
var s_tiannet_select2 = "width:46px;display:none;";
//Style of the date selection control body
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;";
//Display the style of td of day
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;";
//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";
//------------------ Variable definition----------------------------- -//
var tiannetYearSt = 1950; //Selectable start year
var tiannetYearEnd = 2010; //Selectable end year
var tiannetDateNow = new Date();
var tiannetYear = tiannetDateNow.getFullYear(); //The initial value of the variable that defines the year
var tiannetMonth = tiannetDateNow.getMonth() 1; //The initial value of the variable that defines the month
var tiannetDay = tiannetDateNow.getDate();
var tiannetHour = 8;//tiannetDateNow.getHours();
var tiannetMinute = 0;//tiannetDateNow.getMinutes();
var tiannetArrDay=new Array(42); //Define the array for writing dates
var tiannetDateSplit = "-"; //The separator for date
var tiannetDateTimeSplit = " "; //The separator between date and time
var tiannetTimeSplit = ":"; //The separator for time Symbol
var tiannetOutObject; //Object receiving date and time
var arrTiannetHide = new Array();//Label that is forced to be hidden
var m_bolShowHour = false;//Whether to display the hour
var m_bolShowMinute = false;//Whether to display minutes
var m_aMonHead = new Array(12); //Define the maximum number of days in each month in the solar 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;
// ---------------------------- Users can Called function-----------------------------//
//User-called function - only select dates
function setDay(obj){
tiannetOutObject = obj;
//If there is a value in the tag, initialize the date to the current value
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue);
}
tiannetPopCalendar();
}
//User calling 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(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var hour = strValue.substring(11,13);
if( hour < 10 ) tiannetHour = hour.substring(1,2);
}
tiannetPopCalendar();
}
//用户主调函数－选择日期和小时及分钟
function setDayHM(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
//如果标签中有值，则将日期和小时及分钟初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var time = strValue.substring(11,16);
var arr = time.split(tiannetTimeSplit);
tiannetHour = arr[0];
tiannetMinute = arr[1];
if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
}
tiannetPopCalendar();
}
//设置开始日期和结束日期
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//设置日期分隔符。默认为"-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
//设置日期与时间之间的分隔符。默认为" "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit = strDateTimeSplit;
}
//设置时间分隔符。默认为":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit = strTimeSplit;
}
//设置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//设置默认的日期。格式为：YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear = strDate.substring(0,4);
tiannetMonth = strDate.substring(5,7);
tiannetDay = strDate.substring(8,10);
}
//设置默认的时间。格式为：HH24:MI
function setDefaultTime(strTime){
tiannetHour = strTime.substring(0,2);
tiannetMinute = strTime.substring(3,5);
}
// ---------------------- end 用户可调用的函数 -----------------------------//
//------------------ begin 页面显示部分 ---------------------------//
var weekName = new Array("日","一","二","三","四","五","六");
document.write('');
//------------------ end Page display part------------------ --------//
//------------------ Display the date and time span tag response event--------- ------------------//
//Click the year span label response
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 label response
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 hour span tag response
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 minute span label response
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 show tags based on tag id
function hideElementsById(arrId,bolHide){
var strDisplay = "";
if (bolHide) strDisplay = "none";
for(var i = 0;i < arrId.length;i ){
var obj = document.getElementById(arrId[i]);
obj. style.display = strDisplay;
}
}
//------------------ end The span tag that displays the date and time responds to the event---- -----------------------//
//Determine whether a certain year is a leap year
function isPinYear(year){
var bolRet = false;
if (0==year%4&&((year 0!=0)||(year@0==0))) {
bolRet = true;
}
return bolRet;
}
//Get the number of days in a month, 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.Mainly to prevent the current day from being greater than the maximum day of the month when turning over the year or month
function setRealDayCount() {
if( tiannetDay > getMonthCount(tiannetYear,tiannetMonth) ) {
//If the current If the day is greater than the maximum day of the month, then the maximum day of the month is taken.
tiannetDay = getMonthCount(tiannetYear,tiannetMonth);
}
}
//Add zero before the single digit
function addZero( value){
if(value < 10 ){
value = "0" value;
}
return value;
}
//Remove spaces
function tiannetTrim (str) {
return str.replace(/(^s*)|(s*$)/g,"");
}
//Create an option for select
function createOption (objSelect,value,text){
var option = document.createElement("OPTION");
option.value = value;
option.text = text;
objSelect.options.add( option);
}
//Turn forward Year
function tiannetPrevYear() {
if(tiannetYear > 999 && tiannetYear <10000){tiannetYear--;}
else{ alert("The year is out of the 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(document.all.selTianYear,tiannetYear,tiannetYear "year");
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead();
}
//Turn backward 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(document.all.selTianYear,tiannetYear,tiannetYear "year");
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead();
}
//Select today
function tiannetToday() {
tiannetYear = tiannetDateNow.getFullYear();
tiannetMonth = tiannetDateNow.getMonth() 1;
tiannetDay = tiannetDateNow.getDate();
tiannetSetValue(true);
//tiannetSetDay(tiannetYear,tiannetMonth);
//selectObject();
}
//Turn forward the month
function tiannetPrevMonth() {
if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead();
}
//Flip the month forward
function tiannetNextMonth() {
if(tiannetMonth==12){tiannetYear ;tiannetMonth=1}else{tiannetMonth }
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead();
}
//Write the year, month, hour, and minute into the span tag Waiting for data
function tiannetWriteHead(){
document.all.tiannetYearHead.innerText = tiannetYear "year";
document.all.tiannetMonthHead.innerText = tiannetMonth "month";
if( m_bolShowHour ) document .all.tiannetHourHead.innerText = " " tiannetHour "hour";
if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute "minute";
tiannetSetValue(false);//Assign a value to the text box, but Do not hide this control
}
//Set the displayed day
function tiannetSetDay(yy,mm) {
setRealDayCount();//Set the real day of the month
tiannetWriteHead();
var strDateFont1 = "", strDateFont2 = "" //Handle date display style
for (var i = 0; i < 37; i ){tiannetArrDay[i]=""}; //Will display the box Clear all contents
var day1 = 1;
var firstday = new Date(yy,mm-1,1).getDay(); //The day of the week on the first day of a certain month
for (var i = firstday; day1 < getMonthCount(yy,mm) 1; i ){
tiannetArrDay[i]=day1;day1 ;
}
//If used to display the first of the last row of day If the value of each cell is empty, the entire row will be hidden.
//if(tiannetArrDay[35] == ""){
// document.all.trTiannetDay5.style.display = "none";
//} else {
// document .all.trTiannetDay5.style.display = "";
//}
for (var i = 0; i < 37; i ){
var da = eval("document.all.tdTiannetDay " 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 red font
if(i % 7 == 0 || (i 1) % 7 == 0){
strDateFont1 = ""
strDateFont2 = ""
} else {
strDateFont1 = "";
strDateFont2 = ""
}
da.innerHTML = strDateFont1 tiannetArrDay[i] strDateFont2;
//If it is the currently selected day, Then change the color
if(tiannetArrDay[i] == tiannetDay ) {
da.style.backgroundColor = "#CCCCCC";
} else {
da.style.backgroundColor = "#EFEFEF" ;
}
da.style.cursor="hand"
} else {
da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default "
}
}//end for
tiannetSetValue(false);//Assign a value to the text box, but do not hide this control
}//end function tiannetSetDay
//According to option Value selection option
function checkSelect(objSelect,selectValue) {
var count = parseInt(objSelect.length);
if( selectValue < 10 && selectValue.toString().length == 2) {
selectValue = selectValue.substring(1,2);
}
for(var i = 0;i < count;i ){
if(objSelect.options[i].value == selectValue){
objSelect.selectedIndex = i;
break;
}
}//for
}
//Select the year, month, hour, minute, etc. drop-down boxes
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(document.all.selTianYear,i,i "Year");
}
tiannetYearSt = tiannetYear;
}
//If the year exceeds the maximum allowed year, Then create the corresponding option
if( tiannetYear > tiannetYearEnd ) {
for( var i = tiannetYearEnd 1;i <= tiannetYear;i ){
createOption(document.all.selTianYear,i,i "Year");
}
tiannetYearEnd = tiannetYear;
}
checkSelect(document.all.selTianYear,tiannetYear);
checkSelect(document.all.selTianMonth,tiannetMonth);
if( m_bolShowHour ) checkSelect(document.all.selTianHour,tiannetHour);
if( m_bolShowMinute ) checkSelect(document.all.selTianMinute,tiannetMinute);
}
//Assign a value to the control that accepts date and time
//Parameter bolHideControl - whether to hide the control
function tiannetSetValue(bolHideControl){
var value = "";
if( !tiannetDay || tiannetDay == "" ){
tiannetOutObject. value = value;
return;
}
var mm = tiannetMonth;
var day = tiannetDay;
if( mm < 10 && mm.toString().length == 1) mm = "0" mm;
if( day < 10 && day.toString().length == 1) day = "0" day;
value = tiannetYear tiannetDateSplit mm tiannetDateSplit day;
if ( m_bolShowHour ){
var hour = tiannetHour;
if( hour < 10 && hour.toString().length == 1 ) hour = "0" hour;
value = tiannetDateTimeSplit hour;
}
if( m_bolShowMinute ){
var minute = tiannetMinute;
if( minute < 10 && minute.toString().length == 1 ) minute = "0" minute;
value = tiannetTimeSplit minute;
}
tiannetOutObject.value = value;
//document.all.divTiannetDate.style.display = "none";
if( bolHideControl ) {
tiannetHideControl() ;
}
}
//Whether to display the time
function showTime(){
if( !m_bolShowHour && m_bolShowMinute){
alert("If you want to select minutes, it must be possible Choose the hour!");
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);
}
}
//Pop up the calendar selection control to allow the user to select
function tiannetPopCalendar(){
//Hide the drop-down box and 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 = document.all.divTiannetDate.style;
var iX , iY;
var h = document.all.divTiannetDate.offsetHeight;
var w = document.all.divTiannetDate.offsetWidth;
//Calculate left
if (window.event.x h > document.body.offsetWidth - 10 )
iX = window.event.x - h - 5 ;
else
iX = window.event.x 5;
if (iX <0)
iX=0;
//Calculate top
iY = window.event.y;
if (window.event.y w > document.body.offsetHeight - 10 )
iY = document .body.scrollTop document.body.offsetHeight - w - 5 ;
else
iY = document.body.scrollTop window.event.y 5;
if (iY <0)
iY= 0;
dads.left = iX;
dads.top = iY;
tiannetShowControl();
selectObject();
}
//Hide the calendar control (while displaying the Force hidden tags)
function tiannetHideControl(){
document.all.divTiannetDate.style.display = "none";
tiannetShowObject();
arrTiannetHide = new Array();//will Clear the hidden label object
}
//Show the calendar control (while hiding the obscured label)
function tiannetShowControl(){
document.all.divTiannetDate.style.display = "";
tiannetHideObject("SELECT");
tiannetHideObject("OBJECT");
}
//Hide tags based on tag names. If it will cover the selection of the control, object
function tiannetHideObject(strTagName) {
x = document.all.divTiannetDate.offsetLeft;
y = document.all.divTiannetDate.offsetTop;
h = document .all.divTiannetDate.offsetHeight;
w = document.all.divTiannetDate.offsetWidth;
for (var i = 0; i < document.all.tags(strTagName).length; i )
{
var obj = document.all.tags(strTagName)[i];
if (! obj || ! obj.offsetParent)
continue;
// Get the relative coordinates of the element to the BODY tag
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objHeight = obj.offsetHeight;
var objWidth = obj.offsetWidth;
var objParent = obj.offsetParent;
while (objParent.tagName.toUpperCase() != "BODY"){
objLeft = objParent.offsetLeft;
objTop = objParent.offsetTop;
objParent = objParent.offsetParent;
}
//alert("Control left end:" x "select left end" (objLeft objWidth) "Control bottom:" (y h) "select height:" objTop);
var bolHide = true;
if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "tiannet" ){
//If the label itself is hidden , then there is no need to hide it. If it is a drop-down box in a control, there is no need to hide it.
bolHide = false;
}
if( ( (objLeft objWidth) > ){
//arrTiannetHide.push(obj);//Record the hidden label object
arrTiannetHide[arrTiannetHide.length] = obj;
obj.style.visibility = "hidden";
}
}
}
//Show hidden tags
function tiannetShowObject(){
for(var i = 0;i < arrTiannetHide.length;i ){
//alert(arrTiannetHide[i]);
arrTiannetHide[i].style.visibility = "";
}
}
//Initialization date.
function tiannetInitDate(strDate){
var arr = strDate.split(tiannetDateSplit);
tiannetYear = arr[0];
tiannetMonth = arr[1];
tiannetDay = arr[2 ];
}
//Clear
function tiannetClear(){
tiannetOutObject.value = "";
tiannetHideControl();
}
//Close on any click The control
function document.onclick(){
with(window.event.srcElement){
if (tagName != "INPUT" && getAttribute("Author") != "tiannet")
tiannetHideControl();
}
}
//Press the ESC key to close the control
function document.onkeypress(){
if( event.keyCode == 27 ){
tiannetHideControl();
}
}

(1)只选择日期

(2)选择日期和小时

(3)选择日期和小时及分钟