Flexible setting of JS calendar controls: precise time, minute, and second. js calendar controls

Flexible setting of JS calendar controls: precise time, minute, and second. js calendar controls
In May July this year, I wrote an article about the "JS calendar control". At that time, only the calendar control of year, month, and day was supported. The optimization is as follows: 1. the year, month, and day controls of yyyy-mm-dd are supported on the original basis. 2. Added controls that support yyyy-mm-dd HH: MM, yyyy-mm-dd. 3. Added controls that support yyyy-mm-dd HH: MM: SS, yyyy-mm-dd HH: MM: SS, yyyy-mm-MM-dd. 4. Add the "OK" button and the "Today" and "close" button. When I switch to another year, I click "today" to return the current year month. The configuration items are as follows:

TargetCls	The class used to render the calendar is empty by default.
Beginyear	The Start Year of the calendar is 1949 by default.
Endyear	The End Year of the calendar is 2049 by default.
Date	New Date () default Date can also be customized in the input box
Type	Date Format. Currently, three formats are supported: 1. "yyyy-mm-dd ", 2. "yyyy-mm-dd HH: MM: SS" year, month, day, hour, minute, second. 3. "yyyy-mm-dd HH: MM", month, and day
Separator	The default delimiter of the date is-
Wday	0. Set the first day of the week. The default value is from the first day.
Language	Object: { Year: "year ", Month: "month ", MonthList: ["1", "2", "3", "4", "5", "6", "7", "8", "9 ", "10", "11", "12"], WeekList: ["day", "one", "two", "three", "four", "five", "Six"]}

For example, the demo year, month, and day are as follows:

The demo is as follows:

The demo is as follows:

The HTML code is as follows:

123456

<p>  Start Time:   <input name="mydate" type="text" class="input_cxcalendar"  style="width:200px;">  End Time:  <input name="mydate2" type="text" class="input_cxcalendar" style="width:200px;" ></p>

Of course, the following JS files should be introduced in the header:

<Script src = "jquery-1.9.1.js"> </script>

<Script src = "calendar. js"> </script>

Depends on the jquery framework. The following is the calendar control JS

The initialization method is as follows:

12345678910

<script>$('.input_cxcalendar').each(function(){   var a = new Calendar({       targetCls: $(this),       type: 'yyyy-mm-dd' Or 'yyyy-mm-dd HH: MM: ss' or 'yyyy-mm-dd HH: mm ';   },function(val){       console.log(val);  // The currently selected value of the callback function   });});</script>

Code Analysis:

1. Call the init () method to generate the calendar control code During page initialization, as shown below:

2. After initialization, call the function _ renderCalendarPanel () for rendering the calendar panel, as shown below :\

3. Make some judgments in the _ renderCalendarPanel () function as follows:

4. in step 3, define the number of days of each month self. month_day; specify the number of days of the weekend (Saturday, Sunday), as shown below:

The Code is as follows:

 

Set wday = 2 as follows

The meaning of the _ dayNumOfMonth function is as follows:

5. Next let's take a look at the number of days rendered by year/month _ renderBody () function, as shown below:

As shown below

Next:

.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.