Design the html date control (date display, time display, and format customization are supported)

Date control. You can set any date or time format. (Png images have different colors, and the actual effect is better ):

Bytes ----------------------------------------------------------------------------------------------------------

Bytes ----------------------------------------------------------------------------------------------------------

The html code is as follows (time-to-minute is supported, and time-to-second is not supported. Be sure to import the js file before use ):

Javascript is as follows (we recommend that you create a new js file ):

// ***** Variable definition ****** // var YearSt = 1950; // optional start year var YearEnd = 2050; // optional end year var dateFomat; var inputObj; var datesp1_= "-"; // Date separator var DateTimeSplit = ""; // The Date and Time delimiter var TimeSplit = ":"; // The time separator var isShowTime = "display: none "; // whether to display the time/* Control Interface */function HS_calender () {var style = ""; style + =""; Var h =" 0 ", m =" 0 "; // time var thisDate; if (typeof (arguments [0]) =" string ") {var DateValueTemp = inputObj. value. replace (DateSplit ,""). replace (DateSplit ,""). replace (DateSplit ,""). replace (DateTimeSplit ,""). replace (TimeSplit, ""); var year = DateValueTemp. substr (0, 4); var month = parseInt (DateValueTemp. substr (4, 2)-1 + ""; var date = DateValueTemp. substr (6, 2); // alert (year + "" + month + "" + date); if (DateValueTemp. substr (8, 2 ). toString (). length> 0) {h = DateValueTemp. substr (8, 2);} if (DateValueTemp. substr (10, 2 ). toString (). length> 0) {m = DateValueTemp. substr (10, 2);} thisDate = new Date (year, month, date); thisDate. setHours (parseInt (h), parseInt (m);} else if (typeof (arguments [0]) = "object") {thisDate = arguments [0];} var lastMonthEndDate = HS_DateAdd ("d", "-1", thisDate. getFullYear () + "-" + thisDate. getMonth () + "-01 "). getDate (); var lastMonthDate = WeekDay (thisDate. getFullYear () + "-" + thisDate. getMonth () + "-01"); var thisMonthLastDate = HS_DateAdd ("d", "-1", thisDate. getFullYear () + "-" + (parseInt (thisDate. getMonth () + 1 ). toString () + "-01"); var thisMonthEndDate = thisMonthLastDate. getDate (); var thisMonthEndDay = thisMonthLastDate. getDay (); var thisDateString = thisDate. getFullYear () + "-" + thisDate. getMonth () + "-" + thisDate. getDate (); var CalenderTitle = "\"; CalenderTitle + = "" + thisDate. getFullYear () + "year" CalenderTitle + =""; For (var I = YearSt; I <= YearEnd; I ++) {if (I = thisDate. getFullYear () {CalenderTitle + =""+ I +"";} Else {CalenderTitle + =""+ I +"";}} CalenderTitle + =""; CalenderTitle + =" "+ (parseInt (thisDate. getMonth () + 1) +" month "; CalenderTitle + =""; For (var I = 1; I <= 12; I ++) {if (I = (thisDate. getMonth () + 1) {CalenderTitle + =""+ I +"";} Else {CalenderTitle + =""+ I +"";}} CalenderTitle + =""; CalenderTitle + =" "+ (parseInt (thisDate. getHours () +"; CalenderTitle + =""; For (var I = 0; I <= 12; I ++) {if (I = (thisDate. getHours () {if (I <10) {CalenderTitle + ="0 "+ I +"";} Else {CalenderTitle + =""+ I +"";}} Else {if (I <10) {CalenderTitle + ="0 "+ I +"";} Else {CalenderTitle + =""+ I +"";}}} CalenderTitle + =""; CalenderTitle + =" "+ 0 +" points "; CalenderTitle + =""; For (var I = 0; I <= 59; I ++) {if (I <10) {CalenderTitle + ="0 "+ I +" points";} Else {CalenderTitle + =""+ I +"";}} CalenderTitle + =""; CalenderTitle + ="
"; CalenderTitle + =" ↑ "; CalenderTitle + =" ↓ "; CalenderTitle + =" "; CalenderTitle + =" "; var lis = ""; for (I = 0; I
 
  
"+ Lis; lastMonthEndDate --;} for (I = 1; I <= thisMonthEndDate; I ++) {// Current Month's Dateif (thisDateString = thisDate. getFullYear () + "-" + thisDate. getMonth () + "-" + I) {var momth_length = (parseInt (thisDate. getMonth () + 1 ). toString (); if (momth_length.length = "1" & I <10) {lis + ="
  
"+ I +"
";} Else if (momth_length.length =" 1 "& I> 9) {lis + ="
  
"+ I +"
";} Else if (momth_length.length =" 2 "& I <10) {lis + ="
  
"+ I +"
";} Else if (momth_length.length =" 2 "& I> 9) {lis + ="
  
"+ I +"
";}} Else {var momth_length = (parseInt (thisDate. getMonth () + 1 ). toString (); if (momth_length.length = "1" & I <10) {lis + ="
  
"+ I +"
";} Else if (momth_length.length =" 1 "& I> 9) {lis + ="
  
"+ I +"
";} Else if (momth_length.length =" 2 "& I <10) {lis + ="
  
"+ I +"
";} Else if (momth_length.length =" 2 "& I> 9) {lis + ="
  
"+ I +"
";}} Var j = 1; for (I = thisMonthEndDay; I <6; I ++) {// Next Month's Datelis + ="
  
"+ J +"
"; J ++;} if (arguments. length> 1) {// arguments [0]-Time, arguments [1]-element tag arguments [1]. parentNode. parentNode. getElementsByTagName ("ul") [1]. innerHTML = lis; arguments [1]. parentNode. innerHTML = CalenderTitle;} else {var CalenderBox = style + "" + //"
  
"+" "+" "+ CalenderTitle +" "+" +"
  
 

  
   
"+"
   
  
Day
"+"
   
  
I
"+"
   
  
II
"+"
   
  
3.
"+"
   
  
Thu
"+"
   
  
V.
"+"
   
  
Sat.
"+"
  
 
"+"
  
 

  
   
"+ Lis +"
  
 
"+" Close "+" clear "+" today "+" "+" "; return CalenderBox ;}} function HS_DateAdd (interval, number, date) {number = parseInt (number); if (typeof (date) = "object") {var date = date} if (typeof (date) = "string ") {var date = new Date (date. split ("-") [0], date. split ("-") [1], date. split ("-") [2])} switch (interval) {case "y": return new Date (date. getFullYear () + number, date. getMonth (), date. getDate (); break; case "m": return New Date (date. getFullYear (), date. getMonth () + number, checkDate (date. getFullYear (), date. getMonth () + number, date. getDate (); break; case "d": return new Date (date. getFullYear (), date. getMonth (), date. getDate () + number); break;} function checkDate (year, month, date) {var enddate = ["31", "28", "31 ", "30", "31", "30", "31", "31", "30", "31", "30", "31"]; var returnDate = ""; if (year % 4 = 0) {enddate [1] = "29"} if (date> enddate [m Onth]) {returnDate = enddate [month]} else {returnDate = date} return returnDate;} function WeekDay (date) {var theDate; if (typeof (date) = "object") {theDate = date} if (typeof (date) = "string") {theDate = new Date (date. split ("-") [0], date. split ("-") [1], date. split ("-") [2]);} return theDate. getDay () ;}function setDateFomat (dateFmt) {if (dateFmt = null) {isShowTime = "display: none" ;}datesplit = "-"; // DateTime, the separator of the date Split = ""; // The TimeSplit = ":" delimiter of the date and time; // if (dateFmt. toString (). charAt (4) = 'M' | dateFmt. toString (). charAt (4) = 'M') {datespenders = "";} if (dateFmt. toString (). charAt (4 )! = 'M' & dateFmt. toString (). charAt (4 )! = 'M') {DateSplit = dateFmt. toString (). charAt (4);} if (dateFmt. replace (DateSplit ,""). replace (DateSplit ,""). replace (DateSplit ,""). substr (8 ). length <3) {isShowTime = "display: none"; // do not display time} if (dateFmt. replace (DateSplit ,""). replace (DateSplit ,""). replace (DateSplit ,""). substr (8 ). length> 4) {var time = dateFmt. replace (DateSplit ,""). replace (DateSplit ,""). replace (DateSplit ,""). substr (8); DateTimeS Plit = time. charAt (time. toString (). toLowerCase (). indexOf ('H')-1); TimeSplit = time. charAt (time. toString (). toLowerCase (). lastIndexOf ('H') + 1); isShowTime = "" ;}} function setDate (Obj, dateFmt ){//*****! Main function! * ***** // If (dateFmt = null) {isShowTime = "display: none";} if (dateFmt! = Null) {setDateFomat (dateFmt);} inputObj = Obj; var DateValue = new Date (); var calenderObj = document. createElement ("span"); if (inputObj. value. length> 1) {calenderObj. innerHTML = HS_calender (inputObj. value);} else {calenderObj. innerHTML = HS_calender (DateValue);} calenderObj. style. position = "absolute" Export calenderobj.tar getObj = inputObj; inputObj. parentNode. insertBefore (calenderObj, inputObj); // inputObj. next Sibling} function closeCalender (d) {var boxObj = d. parentNode. parentNode. parentNode; boxObj. parentNode. removeChild (boxObj);} function clearCalender (d) {inputObj. value = ""; var boxObj = d. parentNode. parentNode. parentNode; boxObj. parentNode. removeChild (boxObj);} function getToday () {// returns the current Date var todayObj = new Date (); var todayString = "" + todayObj. getFullYear (); if (parseInt (todayObj. getMonth () + 1 ). toString (). le Ngth = "1") {todayString + = DateSplit + "0" + (parseInt (todayObj. getMonth () + 1);} if (parseInt (todayObj. getMonth () + 1 ). toString (). length = "2") {todayString + = DateSplit + (parseInt (todayObj. getMonth () + 1);} if (todayObj. getDate (). toString (). length = "1") {todayString + = DateSplit + "0" + todayObj. getDate ();} if (todayObj. getDate (). toString (). length = "2") {todayString + = DateSplit + todayObj. getDate ();} return today String;} function selectThisDay (d) {var _ h = d. parentNode. parentNode. parentNode. parentNode. getElementsByTagName ('div ') [0]. getElementsByTagName ('span ') [4]. getElementsByTagName ('A') [0]. innerHTML; var _ m = d. parentNode. parentNode. parentNode. parentNode. getElementsByTagName ('div ') [0]. getElementsByTagName ('span ') [6]. getElementsByTagName ('A') [0]. innerHTML; var _ time = ""; if (isShowTime! = "Display: none") {if (_ h. toString (). length <2) {_ h = "0" + _ h;} if (_ m. toString (). length <2) {_ m = "0" + _ m;} _ time + = DateTimeSplit + _ h + TimeSplit + _ m;} var boxObj = d.parentnode.parentnode.parentnode.parentnode.parentnode#boxobj.tar getObj. value = d. title + _ time; boxObj. parentNode. removeChild (boxObj);} function showSelectYear (obj) {var spanDateTag = obj. parentNode. parentNode. parentNode. getElementsByTagName ('span '); spanDateTag [0]. style. display = "none"; spanDateTag [1]. style. display = ""; spanDateTag [2]. style. display = ""; spanDateTag [3]. style. display = "none"; if (isShowTime = "display: none") {spanDateTag [4]. style. display = "none"; spanDateTag [5]. style. display = "none"; spanDateTag [6]. style. display = "none"; spanDateTag [7]. style. display = "none";} else {spanDateTag [4]. style. display = ""; spanDateTag [5]. style. display = "none"; spanDateTag [6]. style. display = ""; spanDateTag [7]. style. display = "none" ;}} function showSelectMonth (obj) {var spanDateTag = obj. parentNode. parentNode. parentNode. getElementsByTagName ('span '); spanDateTag [0]. style. display = ""; spanDateTag [1]. style. display = "none"; spanDateTag [2]. style. display = "none"; spanDateTag [3]. style. display = ""; if (isShowTime = "display: none") {spanDateTag [4]. style. display = "none"; spanDateTag [5]. style. display = "none"; spanDateTag [6]. style. display = "none"; spanDateTag [7]. style. display = "none";} else {spanDateTag [4]. style. display = ""; spanDateTag [5]. style. display = "none"; spanDateTag [6]. style. display = ""; spanDateTag [7]. style. display = "none" ;}} function showSelectHour (obj) {var spanDateTag = obj. parentNode. parentNode. parentNode. getElementsByTagName ('span '); spanDateTag [0]. style. display = ""; spanDateTag [1]. style. display = "none"; spanDateTag [2]. style. display = ""; spanDateTag [3]. style. display = "none"; if (isShowTime = "display: none") {spanDateTag [4]. style. display = "none"; spanDateTag [5]. style. display = "none"; spanDateTag [6]. style. display = "none"; spanDateTag [7]. style. display = "none";} else {spanDateTag [4]. style. display = "none"; spanDateTag [5]. style. display = ""; spanDateTag [6]. style. display = ""; spanDateTag [7]. style. display = "none" ;}} function showSelectMinute (obj) {var spanDateTag = obj. parentNode. parentNode. parentNode. getElementsByTagName ('span '); spanDateTag [0]. style. display = ""; spanDateTag [1]. style. display = "none"; spanDateTag [2]. style. display = ""; spanDateTag [3]. style. display = "none"; if (isShowTime = "display: none") {spanDateTag [4]. style. display = "none"; spanDateTag [5]. style. display = "none"; spanDateTag [6]. style. display = "none"; spanDateTag [7]. style. display = "none";} else {spanDateTag [4]. style. display = ""; spanDateTag [5]. style. display = "none"; spanDateTag [6]. style. display = "none"; spanDateTag [7]. style. display = "" ;}} function selectHour (obj) {var spanDateTag = obj. parentNode. parentNode. parentNode. getElementsByTagName ('span '); spanDateTag [4]. getElementsByTagName ("a") [0]. innerHTML = obj. value; spanDateTag [4]. style. display = ""; spanDateTag [5]. style. display = "none";} function selectMinute (obj) {var spanDateTag = obj. parentNode. parentNode. parentNode. getElementsByTagName ('span '); spanDateTag [6]. getElementsByTagName ("a") [0]. innerHTML = obj. value; spanDateTag [6]. style. display = ""; spanDateTag [7]. style. display = "none ";}
 

Design Experience: The Style Design of the Control references the same space and uses different css calling methods to completely rewrite the code. After a series of fierce battles, the process has been a little difficult. As a result, the front-end design level has also improved, and the harvest is still quite big! Define the version of this space as bata1.0 and share it with you.

Reprint please explain the source: http://blog.csdn.net/seedingly/article/details/19031827

Please reply to your message if you have any suggestions!