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

In view of some problems with several date selection programs found on the Internet, I started to rewrite a program. Most of them were based on previous code, adding a time selection function and hiding the labels select and object that would obscure the controls.
At first I wanted to use window.createPopup() to pop up the calendar selection, so that I can span any tab.

However, halfway through, I found that using the createPopup window to implement it is not feasible in theory:
First, because not clicking anywhere in the form will close the window, and when using the drop-down box to select the year, it is very difficult to It is possible to click outside the form. Of course, this can be avoided by writing the select yourself, but it is more troublesome;
Second, the width and height of the form can only be set when it pops up, and obviously, when selecting different years month, the height of the control will change.

In view of the above reasons, we decided to use ordinary processing methods.
JS date and time selection control upgraded version (self-written)_javascript skills
Calendar.js:

Copy code The code is as follows:

/**
*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('

');
document.write('

');
document.write(''onclick="spanYearCEvent();"> 年');
document.write('');
document.write(''onclick="spanMonthCEvent();"> 月');
document.write('');
//document.write('

');
//document.write('

');
document.write('');
document.write('');
document.write('');
document.write('');
document.write('

');
//输出一条横线
document.write('

');
document.write('

');
document.write('');
document.write(' ');
document.write('');
document.write('');
document.write('

');
//输出一条横线
document.write('

');
document.write('');
document.write(' ');
for(var i =0;i < weekName.length;i ++){
//输出星期
document.write('');
}
document.write(' ');
document.write('

' + weekName[i] + '

');
//输出天的选择
document.write('');
var n = 0;
for (var i=0;i<5;i++) {
document.write (' ');
for (var j=0;j<7;j++){
document.write('');
n ++;
}
document.write (' ');
}
document.write (' ');
document.write('');
document.write('');
document.write('');
document.write (' ');
document.write('

'onClick="tiannetDay=this.innerText;tiannetSetValue(true);" ' +' style="' + s_tiannet_day + '">
+' style="' + s_tiannet_day + '">	+' style="' + s_tiannet_day + '">	清空'+ ' 关闭' + ' 确定 ' + '

');
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();
}
}

Calendar.html:

Copy codeThe code is as follows:

(1)只选择日期

(2)选择日期和小时

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