JAVA中的Calendar---------------js日历控件

秒速五厘米 2022-05-26 12:08 296阅读 0赞

**1.时区（TimeZone）和地区（Locale）**

**时区**：这个名称有点不准确，其实应该叫“时间体系和偏移量”。

时间体系有很多种，古时中国人喜欢用皇帝名+登基时间来表示时间，这也是一种时间体系。现在比较常用的时间体系是GMT和UTC。GMT也就是格林威治时间，也叫格林尼治时间，从1970-01-01 00:00:00开始计算。UTC是在GMT基础上设计的，两者误差很小，作为凡人可以忽略。如果是要求很高的军工行业，则请查阅其他资料吧。

偏移量主要是针对GMT和UTC体系把世界划分为24个区而设计的。常见的东八区“GMT+8”。

**地区**：所属地区。在中国一个星期的第一天是星期一，在西方第一天是星期日，这个小细节不注意可能会导致计算星期的时候出问题。

**\[java\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  // 全局显示定义最省事安全  
2.  Locale.setDefault(Locale.ENGLISH);//推荐用英语地区的算法  
3.  TimeZone.setDefault(TimeZone.getTimeZone("GMT+8"));  
4.            
5.  // 局部定义  
6.  Calendar cal = Calendar.getInstance(TimeZone.getTimeZone("GMT+8"), Locale.ENGLISH);

// 全局显示定义最省事安全
    Locale.setDefault(Locale.ENGLISH);//推荐用英语地区的算法
    TimeZone.setDefault(TimeZone.getTimeZone("GMT+8"));
    		
    // 局部定义
    Calendar cal = Calendar.getInstance(TimeZone.getTimeZone("GMT+8"), Locale.ENGLISH);

**2.初始值**

代码如下，值得指出的是由于我们的时区设置是GMT+8，所以打印格林威治时间得到的是1970-01-01 08:00:00。

**\[java\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  Calendar cal = Calendar.getInstance();//得到当前时间        
2.  cal.setTimeInMillis(0);//转换成格林威治时间

Calendar cal = Calendar.getInstance();//得到当前时间		
    cal.setTimeInMillis(0);//转换成格林威治时间

**3.获取值**

**\[java\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  cal.get(Calendar.YEAR);//年  
2.  cal.get(Calendar.MONTH) + 1;//月（脑残要+1）  
3.  cal.get(Calendar.DATE);//日  
4.  cal.get(Calendar.HOUR\_OF\_DAY);//时  
5.  cal.get(Calendar.MINUTE);//分  
6.  cal.get(Calendar.SECOND);//秒  
7.  cal.get(Calendar.DAY\_OF\_WEEK);//星期（<span style="font-family: Arial, Helvetica, sans-serif;">Locale.ENGLISH情况下，</span><span style="font-family: Arial, Helvetica, sans-serif;">周日是1，剩下自己推算）</span>

cal.get(Calendar.YEAR);//年
    cal.get(Calendar.MONTH) + 1;//月（脑残要+1）
    cal.get(Calendar.DATE);//日
    cal.get(Calendar.HOUR_OF_DAY);//时
    cal.get(Calendar.MINUTE);//分
    cal.get(Calendar.SECOND);//秒
    cal.get(Calendar.DAY_OF_WEEK);//星期（Locale.ENGLISH情况下，周日是1，剩下自己推算）

如果拿时间不是为了计算而是展示出来，肯定用SimpleDateFormart了，模式为yyyy-MM-dd HH:mm:ss

**4.设置值**

**\[java\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  cal.set(2013, 5, 4, 13, 44, 51);//年月日时分秒（月份0代表1月）  
2.  cal.set(Calendar.YEAR, 2014);//年  
3.  cal.set(Calendar.MONTH, 7);//月（月份0代表1月）  
4.  cal.set(Calendar.DATE, 11);//日  
5.  cal.set(Calendar.HOUR\_OF\_DAY, 15);//时  
6.  cal.set(Calendar.MINUTE, 33);//分  
7.  cal.set(Calendar.SECOND, 32);//秒  
8.  //周比较含糊免了

cal.set(2013, 5, 4, 13, 44, 51);//年月日时分秒（月份0代表1月）
    cal.set(Calendar.YEAR, 2014);//年
    cal.set(Calendar.MONTH, 7);//月（月份0代表1月）
    cal.set(Calendar.DATE, 11);//日
    cal.set(Calendar.HOUR_OF_DAY, 15);//时
    cal.set(Calendar.MINUTE, 33);//分
    cal.set(Calendar.SECOND, 32);//秒
    //周比较含糊免了

**5.运算值**

**\[java\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  cal.add(Calendar.YEAR, 1);//年  
2.  cal.add(Calendar.MONTH, 1);//月  
3.  cal.add(Calendar.DATE, 1);//日  
4.  cal.add(Calendar.HOUR\_OF\_DAY, -1);//时  
5.  cal.add(Calendar.MINUTE, 1);//分  
6.  cal.add(Calendar.SECOND, 1);//秒  
7.  cal.add(Calendar.DATE, 7);//周

\--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Calendar获取年月日，时分秒，等等的运用

**1.问题描述**

使用calendar来代替Date

**2.方式：**

Calendar获取年月日，时分秒，这一周的第几天，这一个月的第几天，日期比较，日期毫秒数，等等的运用。。。。

**3.代码：**

**\[java\]** [view plain][view plain 1] [copy][view plain 1] [print][view plain 1] [?][view plain 1]

1.  1.  import java.util.Calendar;  
    2.    
    3.  /\*\* 
    4.   \* Calendar的简单使用 
    5.   \* @author \_jon 
    6.   \* 
    7.   \*/  
    8.  public class TestCalendar \{  
    9.      public static void main(String\[\] args) \{  
    10.         /\*\* 
    11.          \* 获取的calendar实例的时间是当前时间 
    12.          \*/  
    13.         //得到Calendar的实例  
    14.         Calendar calendar = Calendar.getInstance();  
    15.           
    16.           
    17.         /\*\* 
    18.          \* 获取 年 ，月 ，日 
    19.          \*/  
    20.         System.out.println(calendar.get(Calendar.YEAR));  
    21.         //默认从0-11  
    22.         System.out.println(calendar.get(Calendar.MONTH));  
    23.         System.out.println(calendar.get(Calendar.DATE));  
    24.           
    25.           
    26.         /\*\* 
    27.          \* 获取时分秒 
    28.          \*/  
    29.         //24小时制  
    30.         System.out.println(calendar.get(Calendar.HOUR\_OF\_DAY));  
    31.         //12小时制  
    32.         //System.out.println(calendar.get(Calendar.HOUR));  
    33.         System.out.println(calendar.get(Calendar.MINUTE));  
    34.         System.out.println(calendar.get(Calendar.SECOND));  
    35.           
    36.         /\*\* 
    37.          \* 这一年的第几天,这个月的第几天，这周的第几天 
    38.          \*/  
    39.         System.out.println(calendar.get(Calendar.DAY\_OF\_YEAR));  
    40.         System.out.println(calendar.get(Calendar.DAY\_OF\_MONTH));  
    41.         System.out.println(calendar.get(Calendar.DAY\_OF\_WEEK));  
    42.           
    43.         /\*\* 
    44.          \* 得到时间，Fri Aug 19 14:33:03 CST 2016 
    45.          \* 得到本周第一天 
    46.          \* 得到时间的毫秒数 
    47.          \*/  
    48.         System.out.println(calendar.getTime());  
    49.         System.out.println(calendar.getFirstDayOfWeek());  
    50.         System.out.println(calendar.getTimeInMillis());  
    51.           
    52.     //  System.out.println(calendar.compareTo(anotherCalendar));  
    53.     \}  
    54. \}  
    
    1.  \-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

在今年7月份时候 写了一篇关于 ["JS日历控件"][JS] 的文章 , 当时仅仅支持 年月日 的日历控件，如今优化例如以下：

1. 在原基础上 支持 yyyy-mm-dd 的年月日的控件。

2. 在原基础上添加支持 yyyy-mm-dd HH:MM 年月日时分的控件。

3. 在原基础上添加支持 yyyy-mm-dd HH:MM:SS 年月日时分秒的控件。

4. 添加确定button 及 今天 和关闭button。

当我切换到其它年份的时候，我点击 "今天"button 就能够返回当前的年月份。

配置项例如以下：

<table style="border:0px solid rgb(153,153,153);width:600px;float:left;border-collapse:collapse;background-color:rgb(153,153,153);"> 
 <tbody> 
  <tr> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-size:16px;">&nbsp; targetCls<br></span></strong></td> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-size:16px;">&nbsp; 渲染日历的class 默觉得空</span></strong></td> 
  </tr> 
  <tr> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><span style="font-size:16px;"><strong>&nbsp;&nbsp;<span style="color:rgb(255,255,255);">beginyear</span></strong></span></td> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><span style="font-size:16px;background-color:rgb(192,192,192);"><strong><span style="color:rgb(255,255,255);background-color:rgb(153,153,153);">&nbsp; 日历的開始年份 默觉得1949</span><span style="color:rgb(255,255,255);"><br></span></strong></span></td> 
  </tr> 
  <tr> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-size:16px;">&nbsp; endyear</span></strong></td> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-size:16px;">&nbsp; 日历的结束年份 默觉得2049</span></strong></td> 
  </tr> 
  <tr> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><span style="color:rgb(255,255,255);"><strong><span style="font-size:16px;">&nbsp; date</span></strong></span></td> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-size:16px;">&nbsp; new Date() 默认日期 也能够在input框自己自己定义值</span></strong></td> 
  </tr> 
  <tr> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><span style="font-size:16px;"><strong><span style="color:rgb(255,255,255);">&nbsp; type</span></strong></span></td> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><p style="margin:10px auto;line-height:1.8;"><span style="color:rgb(255,255,255);line-height:1.8;font-family:'Microsoft YaHei';font-size:16px;">&nbsp;&nbsp;<strong>日期格式。眼下支持三种格式：</strong></span></p><p style="margin:10px auto;line-height:1.8;"><strong><span style="color:rgb(255,255,255);line-height:1.8;font-family:'Microsoft YaHei';font-size:16px;">&nbsp; &nbsp; &nbsp;1. "yyyy-mm-dd" 年月日</span></strong></p><p style="margin:10px auto;line-height:1.8;"><strong><span style="color:rgb(255,255,255);line-height:1.8;font-family:'Microsoft YaHei';font-size:16px;">&nbsp; &nbsp; &nbsp;2. "yyyy-mm-dd HH:MM:SS" 年月日时分秒。</span></strong></p><p></p><strong><span style="color:rgb(255,255,255);font-size:16px;"><strong>&nbsp; &nbsp; 3. "yyyy-mm-dd HH:MM" 年月日时分</strong><br></span></strong></td> 
  </tr> 
  <tr> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-family:'Microsoft YaHei';font-size:16px;">&nbsp; separator</span></strong></td> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-size:16px;">日期的分隔符 默觉得 -</span></strong></td> 
  </tr> 
  <tr> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-family:'Microsoft YaHei';font-size:16px;">&nbsp; wday</span></strong></td> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-size:16px;">&nbsp;0, 设置周的第一天，默认从第一天開始<br></span></strong></td> 
  </tr> 
  <tr> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><strong><span style="color:rgb(255,255,255);font-family:'Microsoft YaHei';font-size:16px;">&nbsp; language</span></strong></td> 
   <td style="padding:3px;border:1px solid #C0C0C0;border-collapse:collapse;"><p style="margin:10px auto;line-height:1.8;"><strong><span style="color:rgb(255,255,255);line-height:1.8;font-family:'Microsoft YaHei';font-size:16px;">对象：</span></strong></p><p style="margin:10px auto;line-height:1.8;"><strong><span style="color:rgb(255,255,255);line-height:1.8;font-family:'Microsoft YaHei';font-size:16px;">{ </span></strong></p><p style="margin:10px auto;line-height:1.8;"><strong><span style="color:rgb(255,255,255);line-height:1.8;font-family:'Microsoft YaHei';font-size:16px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; year: "年",</span></strong></p><p style="margin:10px auto;line-height:1.8;"><strong><span style="color:rgb(255,255,255);line-height:1.8;font-family:'Microsoft YaHei';font-size:16px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; month: "月",</span></strong></p><p style="margin:10px auto;line-height:1.8;"><strong><span style="color:rgb(255,255,255);line-height:1.8;font-family:'Microsoft YaHei';font-size:16px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; monthList: &nbsp; &nbsp; &nbsp; ["1","2","3","4","5","6","7","8","9","10","11","12"],</span></strong></p><strong><span style="color:rgb(255,255,255);font-size:16px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; weekList: ["日","一","二","三","四","五","六"]}</strong><br></span></strong></td> 
  </tr> 
 </tbody> 
</table>

比方例如以下demo年月日的示意图例如以下：

![211426460938346.png][]

时分秒的demo例如以下：  
![211427039835748.png][]

时分的demo例如以下：

![211427215627477.png][]

HTML代码例如以下：

<table style="background:none;margin:0px;padding:0px;border:1px solid #C0C0C0;width:844px;height:auto;line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;vertical-align:baseline;float:none;border-collapse:collapse;"> 
 <tbody style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.1em;vertical-align:baseline;float:none;"> 
  <tr style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.1em;vertical-align:baseline;float:none;"> 
   <td style="background:none;margin:0px;padding:3px;border:1px solid #C0C0C0;width:35px;height:auto;color:rgb(175,175,175);line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;border-collapse:collapse;"> 
    <div style="background:rgb(244,244,244);border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      1 
    </div> 
    <div style="border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      2 
    </div> 
    <div style="background:rgb(244,244,244);border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      3 
    </div> 
    <div style="border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      4 
    </div> 
    <div style="background:rgb(244,244,244);border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      5 
    </div> 
    <div style="border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      6 
    </div></td> 
   <td style="background:none;margin:0px;padding:3px;border:1px solid #C0C0C0;width:auto;height:auto;line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;border-collapse:collapse;"> 
    <div style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.1em;vertical-align:baseline;float:none;"> 
     <div style="background:rgb(244,244,244);margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&lt;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">p</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">開始时间：</code> 
     </div> 
     <div style="background:rgb(244,244,244);margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&lt;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">input</code>&nbsp; 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">name="mydate" type="text" class="input_cxcalendar"&nbsp; style="width:200px;"&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">结束时间：</code> 
     </div> 
     <div style="background:rgb(244,244,244);margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&lt;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">input</code>&nbsp; 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">name="mydate2" type="text" class="input_cxcalendar" style="width:200px;" &gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&lt;/</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">p</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

当然在头部要引入例如以下JS文件：

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

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

依赖于jquery框架。

后面的是日历控件JS

初始化方式例如以下：

<table style="background:none;margin:0px;padding:0px;border:1px solid #C0C0C0;width:844px;height:auto;line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;vertical-align:baseline;float:none;border-collapse:collapse;"> 
 <tbody style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.1em;vertical-align:baseline;float:none;"> 
  <tr style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.1em;vertical-align:baseline;float:none;"> 
   <td style="background:none;margin:0px;padding:3px;border:1px solid #C0C0C0;width:35px;height:auto;color:rgb(175,175,175);line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;border-collapse:collapse;"> 
    <div style="background:rgb(244,244,244);border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      1 
    </div> 
    <div style="border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      2 
    </div> 
    <div style="background:rgb(244,244,244);border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      3 
    </div> 
    <div style="border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      4 
    </div> 
    <div style="background:rgb(244,244,244);border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      5 
    </div> 
    <div style="border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      6 
    </div> 
    <div style="background:rgb(244,244,244);border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      7 
    </div> 
    <div style="border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      8 
    </div> 
    <div style="background:rgb(244,244,244);border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      9 
    </div> 
    <div style="border-width:0px 2px 0px 0px;margin:0px;padding:0px .5em;width:auto;height:auto;text-align:right;line-height:1.8em;vertical-align:baseline;border-right-color:rgb(108,226,108);border-right-style:solid;float:none;white-space:nowrap;">
      10 
    </div></td> 
   <td style="background:none;margin:0px;padding:3px;border:1px solid #C0C0C0;width:auto;height:auto;line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;border-collapse:collapse;"> 
    <div style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.1em;vertical-align:baseline;float:none;"> 
     <div style="background:rgb(244,244,244);margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&lt;script&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">$(</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:#0000FF;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">'.input_cxcalendar'</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">).each(</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">function</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">(){ </code> 
     </div> 
     <div style="background:rgb(244,244,244);margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">var</code>&nbsp; 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">a =&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">new</code>&nbsp; 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">Calendar({ </code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">targetCls: $(</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">this</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">),</code> 
     </div> 
     <div style="background:rgb(244,244,244);margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">type:&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:#0000FF;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">'yyyy-mm-dd'</code>&nbsp; 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">或者 ‘yyyy-mm-dd HH:MM:SS’ 或者 ‘yyyy-mm-dd HH:MM’;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">},</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,0,255);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">function</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">(val){ </code> 
     </div> 
     <div style="background:rgb(244,244,244);margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">console.log(val);&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;color:rgb(0,130,0);line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">// 回调函数 当前选中的值</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">});</code> 
     </div> 
     <div style="background:rgb(244,244,244);margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">});</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;border:0px;width:auto;height:auto;line-height:1.8em;vertical-align:baseline;float:none;white-space:nowrap;"> 
      <code style="background:none;margin:0px;padding:0px;border:0px;width:auto;height:auto;line-height:1.8em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;float:none;">&lt;/script&gt;　</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

代码分析：

1. 页面初始化时。调用init()方法，生成日历控件代码，例如以下所看到的：

![211431387185714.png][]

2. 初始化完毕后，调用渲染日历面板的函数 \_renderCalendarPanel(),例如以下所看到的：\\

![211433384689596.png][]

3. 在\_renderCalendarPanel()函数做一些推断例如以下：

![211434261088376.png][]

4.  在第三步定义了每月的天数 self.month\_day; 定义了周末(周六，周日)的位置是第几个，例如以下所看到的：

![211435114527057.png][]

接着代码例如以下：

![211435424053734.png][]

![211436033275376.png][]

![211436135932638.png][]

![211436298589569.png][]

例如以下设置wday = 2

![211436573275078.png][]

\_dayNumOfMonth函数的意思例如以下：

![211437286084955.png][]

5. 以下我们接着来看看 通过春节 月份来渲染天数 \_renderBody()函数，例如以下：

![211439008279814.png][]

![211439187023988.png][]

例如以下所看到的

![211439501552578.png][]

接着：

![211440296248020.png][]

![211441013906581.png][]

![211441118901774.png][]

![211441281405476.png][]

等。

[view plain]: https://blog.csdn.net/weinianjie1/article/details/17282905#
[view plain 1]: https://blog.csdn.net/w2232097312/article/details/52250735#
[JS]: http://www.cnblogs.com/tugenhua0707/p/3830638.html
[211426460938346.png]: /images/20220526/71efb6c769924fff94d611549126f8da.png
[211427039835748.png]: /images/20220526/798219a91d8c438dbd77f5fb088e76d3.png
[211427215627477.png]: /images/20220526/09fccf761a644397b47d447eb09fddce.png
[211431387185714.png]: /images/20220526/60bc4380c5de4548b4b8b6abff3199f0.png
[211433384689596.png]: /images/20220526/1cdb0e075e2c4abf89e8987280c1cdad.png
[211434261088376.png]: /images/20220526/65063b09761042fb958851665193f3a4.png
[211435114527057.png]: /images/20220526/1c2f7dc011b642c7876aa474bc30707c.png
[211435424053734.png]: /images/20220526/8400d764ee314fff926c8b6e8a4fa25c.png
[211436033275376.png]: /images/20220526/e80cb3c500834ba0acc0a837c439b1b9.png
[211436135932638.png]: /images/20220526/cccf6d291f8a4e37a9fc4cbce2b6f36c.png
[211436298589569.png]: /images/20220526/a71555e997424957b349db56e636e30d.png
[211436573275078.png]: /images/20220526/e8bbc871802d4618809cd02cb5cc6312.png
[211437286084955.png]: /images/20220526/5d3447d4118d443e8506a3ef1bcc8735.png
[211439008279814.png]: /images/20220526/eff11d65b7f34434b8043af6753825a2.png
[211439187023988.png]: /images/20220526/54cd7e3e0f5f40d8ba7059f0f3c0d2b7.png
[211439501552578.png]: /images/20220526/e25d151eff1b4a45a0e299a2bf8e2af1.png
[211440296248020.png]: /images/20220526/6a2e4a7effc84f89a1a8989613505560.png
[211441013906581.png]: /images/20220526/a073ef8fa1be45a59a26f70011bfda1d.png
[211441118901774.png]: /images/20220526/9c0727b62679480aa095043fe1f4eec6.png
[211441281405476.png]: /images/20220526/27b9cd82fd304a71bc0f73d117bcaa37.png

发表评论取消回复

表情：

评论列表（有 0 条评论，296人围观）

还没有评论，来说两句吧...

相关阅读

相关 C#日历控件（MonthCalendar）

日历控件（MonthCalendar）用于显示日期，通常是与文本框联用，将日期控件中选择的日期添加到文本框中。【实例】使用日历控件实现入职日期

清疚/ 2022年10月01日 13:58/ 0 赞/ 343 阅读

相关 web页面控件之日历控件

web页面开发中一般需要引用日历，如根据一个日期或时间，或者根据一个日期范围或时间范围，查询业务数据。下面介绍一下使用日历控件的使用。功能概述

缺乏、安全感/ 2022年09月17日 14:24/ 0 赞/ 765 阅读

相关日历控件

<html> <body> <script src="Calendar.js" language="javascript" type="text/javascript

心已赠人/ 2022年08月27日 13:45/ 0 赞/ 293 阅读

相关 js实现的日历控件

js实现的日历控件效果如下： ![Center][] 需要引入dateWidget.js <!DOCTYPE HTML PUBLIC "-//W3C//

朴灿烈づ我的快乐病毒、/ 2022年08月27日 03:22/ 0 赞/ 232 阅读

相关 javaScript实现日历控件

最近学习js，闲来无事就写了个简单的日历控件，不知道别人是怎么实现的，纯粹自己想法写的，写的不好，但可以起到抛砖引玉的作用。先来看效果。 ![Center][

不念不忘少年蓝@/ 2022年08月01日 13:52/ 0 赞/ 298 阅读

相关 JAVA中的Calendar---------------js日历控件

1.时区（TimeZone）和地区（Locale）时区：这个名称有点不准确，其实应该叫“时间体系和偏移量”。时间体系有很多种，古时中国人喜欢用皇帝名+登基时间来

秒速五厘米/ 2022年05月26日 12:08/ 0 赞/ 297 阅读

相关 js日历控件

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

水深无声/ 2022年03月09日 05:30/ 0 赞/ 319 阅读

相关 java日历控件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdn

逃离我推掉我的手/ 2022年02月14日 05:40/ 0 赞/ 332 阅读

相关日历控件WdatePicker

http://www.my97.net/dp/demo/resource/2.1.asp 详单用法网站 http://www.oschina.net/news/26789/t

╰+攻爆jí腚メ/ 2021年12月23日 12:57/ 0 赞/ 357 阅读

相关 js日历控件

[http://kimsoft-jscalendar.googlecode.com/svn/trunk/help.html][http_kimsoft-jscalendar.g

朱雀/ 2021年12月15日 14:39/ 0 赞/ 492 阅读