JS Multi-Select date

The project needs a date selection box which can select multiple dates, and find a single selection box source code (http://blog.5d.cn/user2/samuel/200503/61881.html) from the Internet, which can be changed to multiple selections. How to use: The Call method is simple: <input type= "text" name= "Datebegin" onclick= "calendarshow (This)" readonly> or call with a button also line < Input type= "text" name= "Datebegin" Readonly><button onclick= "Calendarshow (document.all.dateBegin)" > select Date </button> the result (value of datebegin) is a multiple date value that uses the ";" Interval, such as: 2010-10-23;2010-12-24. Of course, at the very beginning you also need to give this column the initial value. There is the original design of the elder brother is relatively black, the largest month is the current month, I modified in order to 2999-12-31. V1.1 Modify part: 1) Add two new call methods CalendarShow1 (this) ==> setting can only enter a date Calendarshown (this,n) ==> set the maximum number of dates you can enter, If you start assigning that field more, you cannot add calendarshow (this) ==> for compatibility, the default maximum value is 200, it is recommended not to use this 2) Fix leap year bug. 3) to the English version of the addition of two function, one for the date radio CalendarShow1, one for the date more than the selection of CALERDARSHOWM, the latter can also set a parameter, the maximum number of days allowed. ============================== definition attribute ==========var Calendardisplay = false; Whether to show var yearbegin = 2004; Start time var yearend = 2999; As of year var monthend = 12; As of month var dayend = 31; As of day var daystrdef = "<table class=\" calendar\ "width= ' 100% ' cellpadding= ' 0 ' border= ' 1' bordercolorlight= ' #C0C0C0 ' bordercolordark= ' #C0C0C0 ' ><tr> '; var daystr = Daystrdef;var Yearc = getnow (1); var MONTHC = Getnow (2), var dayc = Getnow (3), var dateformat = "Yyyy-mm-dd"; Custom format var dateobj; and external exchange control var statstr = ""; var datelist;    Date list var maxlen=200;//the maximum length of the date, if not specified, for 100function getnow (datetype) {var datetemp = new Date (); Switch (datetype) {Case 0:nowtemp = datetemp.getyear () + "-" + (Datetemp.getmonth () + 1) + "-" + datet            Emp.getdate ();        Break            Case 1:nowtemp = Datetemp.getyear ();        Break            Case 2:nowtemp = Datetemp.getmonth ();        Break            Case 3:nowtemp = Datetemp.getdate ();        Break            Case 4:nowtemp = Datetemp.getday ();    Break } return nowtemp;}    function Createcalendar () {daystr = Daystrdef;    var lastday = Getlastday (Yearc, parseint (MONTHC) + 1); var startday = Getweekday (Yearc, parseint (MONTHC) + 1, 1);   var d = 1; for (w = 0; w <= lastday + startDay-1; w++) {if (w! = 0 && W% 7 = = 0) {daystr + = "</t        R><tr> "; if (w >= startday) {daystr + = "<td onclick= ' changedatelist (" + D + ");d ayspace.innerhtml = Crea Tecalendar (); ' style= ' Cursor:hand ' onmouseover= ' this.classname=\ "mouseover\" ' onmouseout= ' this.className=\ '            Mouseout\ "' >";            if (Isindatelist (d)) {daystr + = "<b><font color=red>";            } daystr + = D;        d++;            } else {daystr + = "<td>";        Daystr + = " ";    }} daystr + = "</tr></table>"; return DAYSTR;}    Function Getweekday (year, month, day) {var d = new Date ();    D.setfullyear (year);    D.setmonth (month-1);    D.setdate (day);    s = D.getday (); return s;} Function Getlastday (year, month) {if (Month < 8) {if (month% 2! = 0) {RetuRN 31; if (month = = 2) {if (year% 400 = = 0 | | (Year%!=0 && year%4 ==0))            {return 29;        } return 28;        } else {return 30;    }} if (month% 2 = 0) {return 30; } return 31;}    function One2two (d) {var s = D;    if (d <) {s = "0" + D; } return s;}    function Transferdate (day) {dayc = day;    DateValue = Dateformat.replace ("yyyy", Yearc);    DateValue = Datevalue.replace ("MM", One2two (parseint (MONTHC) + 1));    DateValue = Datevalue.replace ("dd", One2two (DAYC)); return datevalue;}    function Selectcalendar (Datetype, datevalue) {var d = new Date (Yearc, MONTHC, DAYC);        if (Datetype = = "Year") {year = parseint (YEARC) + datevalue;            if (year >= yearend) {year = yearend;            if (monthc > Monthend) {d.setmonth (monthend);            }} if (Year < Yearbegin) {Year = Yearbegin;    } d.setfullyear (year);        } if (Datetype = = "Month") {month = parseint (monthc) + datevalue;            if (Yearc >= yearend && month > monthend) {month = Monthend;        calendarstate.innerhtml = "Max month";            } if (Yearc = = Yearbegin && Month < 0) {month = 0;        calendarstate.innerhtml = "Min month";        } d.setdate (1);    D.setmonth (month);    } Yearc = D.getyear ();     MONTHC = D.getmonth ();    Setcalendardef (); dayspace.innerhtml = Createcalendar ();}    function Initdatelist (dateobj) {var str = dateobj.value;    if (str.trim () = = "") {datelist = new Array ();    } else {datelist = Str.split (";"); } checklength ();}    function Changedatelist (day) {var str1 = transferdate (day);            for (i = 0; i < datelist.length; i++) {if (datelist[i] = = str1) {Datelist.splice (I, 1);            Savedatelist (); RetuRn        }} if (Checklength ()) {datelist[datelist.length] = str1;        Savedatelist ();    Return        } else if (MaxLen = = 1) {datelist[0] = str1;        Savedatelist ();    Return        }}function Checklength () {if (datelist.length >= maxlen) {calendarstate.innerhtml = "too long";    return false; } return true; function Savedatelist () {dateobj.value = Datelist.join (";");}    function Isindatelist (day) {var str1 = transferdate (day);        for (i = 0; i < datelist.length; i++) {if (datelist[i] = = str1) {return true; }} return false;}             function Calendarshow (calendarobj) {if (calendardisplay) {calendar.style.display = "none";        Daystr = Daystrdef;    Return        } else {dateobj = calendarobj;        Calendar.style.display = "block";           Initdatelist (Dateobj);    } createselect (Document.all.calendarYear, Yearbegin, Yearend, "year"); CreaTeselect (Document.all.calendarMonth, 1, "month");    Setcalendardef ();    OBJL = Document.body.scrollLeft + window.event.x-10;    OBJT = Calendarobj.getboundingclientrect (). Top + calendarobj.clientheight;    Calendar.style.left = objL-2;    Calendar.style.top = OBJT + 1;    Setcalendarvalue (); dayspace.innerhtml = Createcalendar ();}    function CalendarShow1 (calendarobj) {maxlen=1;  Calendarshow (Calendarobj);    }function Calendarshown (calendarobj, maxLength) {maxlen = MaxLength;   Calendarshow (Calendarobj);        }function Createselect (selectobj, Begin, End, SelectType) {for (i = begin; I <= end; i++) {value = i;        if (SelectType = = "Month") {var value = i-1;    } Selectobj.options[i-begin] = new Option (i, value); }}function Defselect (selectobj, defvalue) {for (i = 0; i < selectobj.length; i++) {if (Selectobj.options[i]            . Value = = defvalue) {selectobj.options[i].selected = true;  Return      }}}function Setcalendarvalue () {yearc = Document.all.calendarYear.value;    MONTHC = Document.all.calendarMonth.value; dayspace.innerhtml = Createcalendar ();} ================================================== Validate =====string.prototype.trim = function () {//String ' s Trim () return This.replace (/(^\s*) | ( \s*$)/g, "");}    function IsNull (strtemp) {//determines if NULL if (strtemp = = NULL | | Strtemp.trim () = = "") {return true; } return false;} //=============================================================//==============================================    = = Main () =====function setcalendardef () {defselect (document.all.calendarYear, YEARC); Defselect (Document.all.calendarMonth, monthc);}        function Calendarhidden () {if (Calendardisplay) {calendarshow ();    Calendardisplay = false;    } else if (Calendar.style.display = = "Block") {Calendardisplay = true; }}document.onclick = Calendarhidden;cstr = "<style>.calendar {border-collAPSE:COLLAPSE;TEXT-ALIGN:CENTER}TD {Font-size:9pt;fontfamily=arial,sans-serif;}. title01 {background-color:# 008080;color: #FFFFFF;} input {Font-size:9pt;fontfamily=arial,sans-serif;} Select {Font-size:9pt;font-family:arial,sans-serif;}. MouseOver {background-color: #e6e7e8;}. MouseOut {background-color: #ffffff;} </style> "; CStr + =" <div onclick= ' calendardisplay=false ' id= ' calendar ' author= ' smart ' style=\ ' Background-color= #ffffff; Display:none;position:absolute;z-index:0;filter: \ ' Progid:DXImageTransform.Microsoft.Shadow (direction=135,color = #787878, strength=5) \ ' \ ' > '; cStr + = "<table class=\" calendar\ "cellpadding= ' 0 ' border= ' 1 ' width= ' 160 ' bordercolorlight= ' #000000 ' bordercolordark= ' #000000 ' > '; cStr + = "<tr><td colspan= ' 7 ' bgcolor= ' #E1E1E1 ' > "; cStr + =" <span style= ' Cursor:hand ' onclick= ' Selectcalendar (\ "Year\", -1) ' onmouseout=\ ' Calendarstate.innerhtml=statstr\ "><<</span> <span style=\" cursor:hand\ "onclick=\" Selectcalendar (' month ', -1) \ "OnmouSeout=\ "Calendarstate.innerhtml=statstr\" ><</span> "cStr + ="  <select name=\ "Calendaryear\" Onchange=\ "Setcalendarvalue () \" ></select><select name=\ "calendarmonth\" onChange=\ "SetCalendarvalue ( ) \ "></select> "; CStr + = "<span style=\" cursor:hand\ "onclick=\" Selectcalendar (' month ', 1) \ " Onmouseout=\ "Calendarstate.innerhtml=statstr\" >></span> <span style=\ "cursor:hand\" onclick=\ " Selectcalendar (' year ', 1) \ "onmouseout=\" calendarstate.innerhtml=statstr\ ">>></span></td>"; CStr + = "</tr><tr class=\" title01\ "><td>Sun</td><td>Mon</td><td>Tue< /td><td>wed</td><td>thu</td><td>fri</td><td>sat</td></tr > "; cStr + =" <tr><td colspan=\ "7\" ><div id=\ "dayspace\" ></div></td></tr> "; CStr + = "<tr><td colspan=\" 7\ "bgcolor=\" #E1E1E1 \ "><table width=\" 100%\ "cellpadding= ' 0 ' ><tr&GT;&LT;TD width=\ "60%\" > "cStr + =" <div style=\ "font-family:arial;font-size:8pt\" id=\ "calendarstate\" Ondblclick=\ "calendarstate.innerhtml=" \ "onmouseout=\" calendarstate.innerhtml= "+ statstr +" \ ">" + statStr + " </div> "; CStr + =" </td><td><span style=\ "Font-family:arial;font-size:8pt;color:ff0000;cursor: Hand\ "Onclick=\" savedatelist (); Calendarhidden (); \ ">[save]</span><span style=\" font-family:Arial; Font-size:8pt;color:ff0000;cursor:hand\ "Onclick=\" Calendarhidden () \ ">[close]</span></td></tr ></table></td></tr></table></div> ";d ocument.write (CSTR);