//日期框点击时显示日历 onDateInputClick: function(event) { var target = event.target; var value = target.value; var datePicker = this.datePicker; if(datePicker.style.display==='none'){ //这里必须要在js文件里将datePicker.style.display设置为none，如果是在css文件里设置为none,得到的display为"" datePicker.style.display = 'block'; }else{ datePicker.style.display = 'none'; return; } if (!value) this.drawShowDateBar(this.showDateBar); //绘制日历的显示栏 }, changeDate : function(year, month, date){ this.dateInput.value = year+"-"+(month<10?("0"+month):month)+"-"+(date<10?("0"+date):date); },
实现效果
有点丑......
实现中遇到的问题
日历格子的绘制问题 。要补全1号前面到周日的天数，还要补全当月最后1号到周六的天数。日历格子的绘制可以分为3部分，当月前面、当月和当月后面的。要计算出1号是周几，然后将这周周日到1号的天数绘制。
当月的日历从1号到最后1号循环绘制。补全最后1号到周六的天数(date.getDay()<=6)
日历格子和日期控制栏显示的同步。在绘制时为每个日历格子单元保存其代表的Date。点击格子单元时，调用changeShowDateBar函数，将单元存的Date传入，改变日期控制栏显示的日期，然后重绘日历格子。
每个月天数不同，出现的“日”选择框天数不同的问题。在changeShowDateBar函数里会根据传入的Date，计算当月有多少天，然后动态生成“日”选择框应有的天数。
跨月，跨年的处理。在日期控制栏中，有月份和日的上下按钮，在处理跨月和跨年时，判断这月(日)是否为最后一月(日)，若为，则日期控制栏的Date的年(月)加1，将显示的月(日)设为第一月(日)，调用changeShowDateBar函数。同理判断是否为第一月(日)。
用到的Date API
date.getFullYear() //得到date的年份
date.getMonth() //得到月份 0-11
date.getDate() //得到日期 1-31的数字
date.getDay() // 得到这天是周几 0-6
date.getTime()// 得到date的时间戳 ms表示
date.setFullYear(2017); // 设置年份
date.setMonth(x) // 如果设置为0-11，则date为x年的1-12月，如果比11大，则会往前面推，会跳到x+([(n+1)/12])年的第（n+1）%12个月
如果为负数，例如-1则会调到上一年的最后一月去。
date.setDate(x) // 和setMonth是同理的，它会自动根据当月的天数，判断是否发生月份的变动。-1代表date跳到上月的最后一天