A simple horizontal JavaScript date Control

The specific requirements are as follows:
1. The date table is filled horizontally.
2. The date list of each month is displayed in a horizontal row, instead of displaying a square like many date controls on the Internet.
3. Only the year, month, and day are required. Select "year" or "month" to automatically update the corresponding date (this is available in each date control ).
4. By default, the current year and month are displayed, the current date is highlighted, and the current week (the week of the current year) and day of the week are displayed.
5. Select a date to highlight the current date, and automatically update the weekly and weekly display.
6. interfaces are provided to set the display style of a specific date.
6. Others are some interface display problems.

Thinking is a date control, it is relatively simple to do, but it is especially horizontal, the first time I heard of this demand!
I wrote calendar for the first time, but this time the trouble lies in the implementation of weekly computation and the last interface for setting a specific date, however, after some analysis, it is well solved.
Summary:
1. Use closures to hide internal functions and variables to prevent variable contamination. At last, only one external interface is provided: setdatestyle
2. calculating the number of days in the second month of each year is not based on the method of determining the leap year, but on the existence of the second day of the second month. If the second day does not exist, it is 28 days.
3. Calculate the week. Calculate the day of the current year based on the day of the current year, and then calculate the day of the week based on the day of the month.
4. setdatestyle supports the input of a single date style and the setting of multiple date styles. The style update mainly uses array merge character seek, and uses the string indexof method to match and execute style settings.
5. CSS, JS, and HTML are separated to facilitate maintenance. Modular functions facilitate reuse. CopyCode The Code is as follows: var logdatecontrol = (function (){
VaR curselel; // the currently selected date
VaR styledata = [], datastyle = {};
// Obtain the element of the specified ID
VaR $ = function (ID) {return document. getelementbyid (ID )}
// Calculate the week of the specified date (the default is the current date). The calculation method is rigorous and accurate.
VaR calweek = function (DT ){
VaR calday = dT | new date (); // current time to be calculated
VaR firstday = new date (calday. getfullyear (),); // the first day of the year
// Calculate the current day of the current year. indicates that the current day begins.
VaR daysall = math. Floor (calday-firstday)/1000/60/60/24) + 1;
// Day of the week on the first day of the year
VaR firstdayweekday = firstday. getday ();
// Add the result to Monday of the first week for later Calculation
VaR diffday = firstdayweekday = 0? 6: firstDayWeekday-1;
Daysall = daysall + diffday;
Return math. Ceil (daysall/7); // return the calculation result
}
// Calculate the number of days in a month, the number of four digits in the year, and the number of one to two digits in the month (it should be in the JS date format, for example, 0 in January 1, January). If the data is invalid, the return value is-1.
VaR getdayslen = function (year, month ){
If (! (/^ \ D {4 }$/. Test (year) &/^ \ D {} $/. Test (month) {return-1}
VaR monthdays = [, 31,]
// May February 29
If (month = 1 & new date (year, 1,29). getmonth () = 1) {monthdays [1] = 29}
Return monthdays [month]
}
// Display the date list and input year and month (input by daily month. For example, input 2 on March 13, February) and display location
VaR displaydaylist = function (year, month, POS ){
VaR dayslist = [];
VaR cells1 = $ (POS). Rows [0]. cells;
VaR cells2 = $ (POS). Rows [1]. cells;
VaR daysarr = ['day', 'yi', '2', '3', '4', '5', '6'];
// Convert month-1 to JS month
For (VAR I = 1, L = getdayslen (year, -- month) + 1; I <L; I ++ ){
VaR WD = new date (year, month, I). getday ();
Cells1 [I-1]. classname = "";
If (WD = 0 | WD = 6) {cells1 [I-1]. classname = "Weekend";} // Add a special style for the weekend
// _ Oldcls: Save the default style of the current date
Cells1 [I-1]. innertext = daysarr [WD];
Cells2 [I-1]. classname = "unselectday ";
Cells2 [I-1]. setattribute ("_ oldcls", "unselectday ");
Cells2 [I-1]. innertext = I> 9? I: "0" + I;
// Match custom styles
VaR dtstr = year + "|" + (month + 1) + "|" + I;
If ("," + styledata. Join (',') + ","). indexof ("," + dtstr + ",")>-1 ){
Cells2 [I-1]. classname = "unselectday" + datastyle [dtstr];
Cells2 [I-1]. setattribute ("_ oldcls", "unselectday" + datastyle [dtstr]);
}
}
// If it is the current month, select the day
If (new date (). getmonth () = month ){
Curselel = cells2 [new date (). getdate ()-1];
Curselel. classname = "selectday ";
}
For (var j = I-1; j <31; j ++ ){
Cells1 [J]. classname = cells2 [J]. classname = "";
Cells1 [J]. innerhtml = cells2 [J]. innerhtml = "";
}
$ (POS). onclick = function () {changeinfo ()}
}
// Adjust the weekly and weekly values based on the selected values. You can directly input the DOM element that saves the date content, or determine the function based on the click position.
VaR changeinfo = function (e ){
E = E | event;
VaR elaste.tar GET | E. srcelement | E; // The Last E: it may be an input object.
VaR day = El. innertext;
If (! /^ \ D {1, 2} $/. Test (day) return; // do nothing if it is not a date
// Restore the style of the selected date
If (curselel) {curselel. classname = curselel. getattribute ("_ oldcls ")}
Curselel = El; // Save the elements currently processed
// Update the style of the selected date
El. classname = "selectday ";
VaR dt = new date ($ ("year"). value, $ ("month"). Value-1, Day );
// Update information
$ ("Day"). value = day; // Date
$ ("Weekday "). value = ['day', 'yi', '2', '3', '4', '5', '6'] [DT. getday ()]; // day of the week
$ ("Week"). value = calweek (DT); // week
}
// Initialization
Window. attachevent ("onLoad", function (){
VaR curdate = new date (), curyear = curdate. getfullyear ();
// Display the last 10 years
For (VAR I =-10; I <10; I ++) {$ ("year"). Add (New Option (curyear + I, curyear + I ))}
$ ("Year"). selectedindex = 10; // the current year is selected by default.
$ ("Month"). selectedindex = curdate. getmonth (); // the current month
$ ("Day"). value = curdate. getdate (); // the current date
$ ("Weekday "). value = ['day', 'yi', '2', '3', '4', '5', '6'] [curdate. getday ()]; // the current day of the week
$ ("Week"). value = calweek (); // current week
// Update the date list by changing the date or year
$ ("Year "). onchange = $ ("month "). onchange = function () {displaydaylist ($ ("year "). value, $ ("month "). value, "dayslist ")};
// Display the date list of the current month and highlight the date of the current day
Displaydaylist (curdate. getfullyear (), curdate. getmonth () + 1, "dayslist ");
});

// Interface for setting external styles.
// Format: ([2007,10, 12], "color: # f00") ([[2007,10, 20], [2007,11, 25], "color: # 00f ")
// Do not include 0 if the month is less than 10
VaR setdatestyle = function (datearr, style ){
If (typeof datearr! = "Object") return;
If (datearr instanceof array ){
If (datearr [0] instanceof array ){
For (VAR I = 0; I <datearr. length; I ++) setdatestyle (datearr [I], style );
}
VaR datastr = datearr. Join ('| ');
Styledata. Push (datastr );
Datastyle [datastr] = style;
Return;
}
}
// External interface
Return {setdatestyle: setdatestyle}
})();
// Set the test Style
Logdatecontrol. setdatestyle ([[2007,12, 15], [2007,11, 12], "test ");

Xmlns = "http://www.w3.org/1999/xhtml">

TheWeek	Week
year 1 2 3 4 5 6 7 8 9 10 11 12 month	date