[JavaScript] It is a simple and easy-to-use calendar control. Pure JavaScript supports the chain syntax and the core code is only five lines.

We have made another wheel. repeating the wheel requires advantages or no value. Easy to use and convenient. Only 5 rowsCodeYou can generate a token.

The input date is already supported by the native controls opera and chrome. The logic of the calendar control is complicated, and it is not easy to do perfection. It is also more practical in coding, so the learning significance is greater than the practical significance. This control is also a wish for many years. Recently, I have been writing and writing to stop it, and I will share it with you after I stick to it.

 

 

Portal

 

Features

1. This calendar plug-in is easy to use and requires at least one parameter for function implementation.

2. Personalized configuration provides powerful custom events and multiple personalized parameters.

3. Using prototype inheritance makes extension and derivation very convenient.

4. cross-browser to ensure availability.

5. Use a table as a carrier. You can use the table without a style.

6. cache. The month data has been generated. Makes data persistent and reduces computing.

7. No style support, and the function is still available.

Application display

A.

B.

C.

 

Technical Summary

1. The main difficulty is not the dateAlgorithmBut the problems caused by the Select controls and tables. Both select and table have their own Dom APIs for operations and access. In particular, the algorithm used to generate a calendar table does not take some time, and it is on the IE browser. The innerhtml attribute and table tbody tfoot TR are both read-only, so there is some interference to the technical selection. The insertrow method is used in the middle, but it is not feasible to use different resolution methods in the browser. After that, the entire table is used as the segment. Although the efficiency is not necessarily higher than that of generating DOM nodes to store variables, the result is the best.

2. The main problem with select is the difference between the sequence number and the length. To access selectedindex, be careful when setting the select value.

3. The sequence number of the date object. The year and day start from 1, and the month starts from 0. These differences and the processing of human habits bring about a certain cost.

We can see the importance of technical reserves and technology selection in the early stage.

In fact, the date core algorithm only has five lines of code. It is sufficient to generate an available date control with 20 lines of code,The controls related to the date Control bring a lot of code.

 

Core code

 

1. How many days are there in a month and how many days are there in the first month? If we know the number of the last day of January 1, June, do we know the number of days on January 1, June.

NewDate ('Int32, 0'). Getdate (); simplest and shortest // Chrome does not support date creation in the string new date ('1970, 2012, 2012 ') format, but supports new date ('20170', '6 ', '0'); this should be noted, while Safari is very strange.
 

General

 
(NewDate (+ (NewDate (2012, 7,1)-86400000). getdate ();
 

The first day of the next month minus one day, that is, the last day of the month.

 

2. If you know how many days of the month are not enough, you need to know where the first day of the month is to be placed. If you know that the first day of the month is the day of the week, you can know where the first day is.

 
New Date (2012,). getday ();
 

3. Generate a calendar for one month. The code is very simple and there are only five lines.

For (VAR I = 0; I <row; I ++) {HTML. push ('</tr>'); For (var j = 0; j <7; j ++) {HTML. push (cell -- <= offset & days> 0 )? ('<TD' + (that. Date> new date (Y, M, days + 1 )? 'Class = "oldday" ': '') + (y = That. Year & M = That. month & days = That. Day? 'Class = "currentday" ': '') + 'title ="' + Y + that. style + (m + 1) + that. style + days + '">' + (days --) + '</TD>'): '<TD> </TD>');} HTML. push ('<tr> ');
}
 

You may have to wonder why you first wrote the </tr> end tag. When you start to generate a calendar, it adopts an inverted loop and uses the Li tag. It cannot be used later when no style is found, therefore, we use table instead, but this method is retained, and the date is generated from the back to the back. Then, the reverse join of the reverse of the array is called.

 

4. Is there any difference between the data of one instance in August and that of another instance in August, or does it need to be calculated every time the data of August is reused? The answer is obviously not. If the data of the same month is used for multiple times, the efficiency can be greatly improved and the number of computations can be reduced.

This involves data persistence. How can we make data persistent or temporarily? The answer is to save the data on the attributes of the class for use.

 

Var key = '_ date _:' + Y + ':' + m; indicotar. cache [Key] | (indicotar. cache [Key] = That. getdatestring (Y, m ));
 

Generate a key by year and month. If there is no data, call the method to generate the data and store the value of the corresponding key. In the future, you only need to extract and merge strings.

 

API

Constructor: Cal (you can modify it without dependency );
Instantiation: New CAL (document. Body );
Return Value: instance object;

Parameters

Node	* Htmlnode	If nodetype is 1, the control is appended to this node.
Object	O	Optional parameters of the configuration control
Number	O. Y	The year. The default year. The value range is 1970-the current year + 10)
Number	O. m	The month. The default month. The value range is (1-12)
String	O. hastitle	Whether the date control bar exists. The default value is 'true'
String	O. hasfoot	Indicates whether a footer is used to display the year and month. The default value is 'false'
String	O. Style	Date separator. Default Value '-'
Number	O. startyear	Start Year, 2006 by default
Number	O. endtyear	End year. The default value is 10 for the current year.
Function	O. ongetdate	Triggered when you click the date cell. This points to the instance. The first parameter is the date array.
Function	O. onrender	Triggered when the control inserts a value DOM tree. This points to the instance. The first parameter is the DOM node corresponding to the control.
Function	O. ongetdatestring	Triggered when the date string corresponding to the month is obtained. This points to the instance. The first parameter is a string.
Function	O. oncalframe	Triggered when the node framework of the control is composed. This points to the instance. The first parameter is the corresponding Dom node.
Function	FN	Class callback function, triggered after the control is generated

 

Instance method

method name	parameters	return value
createday	Y: Number/string (2012), M: Number/string (0-11)	instance (1 stores the date string to the cache of Cal, Which is data persistence; 2 calls render)
render	node :( this. elems), key: string ('_ date _: 2012: 0'), Y: Number (2012), M: Number (0-11)	instance (Rendering Control to DOM tree)
getdatestring	Y: Number (2012), M: Number (0-11)	htmlstring
tostring		string '2017-12-12 '(obtain the string corresponding to the selected date)
valueof		array [hz12, 12] (obtain the array corresponding to the selected date)
hide		instance (hidden Control)
show		instance (Display Control)
setcss	Object ({'font-size': '12px ', 'width': '300px'})	instance (add a style for the Control)