整体思路，日期控件大家都不陌生，也知道是什么样子。首先就会想到一个表格，里面填充了日期，顶部有年月显示或者下拉选择，或上下一年月选择。而底部就是快捷选择当前日期。所以第一步就是实现这个表格布局：
<table width="100%" border="0" bgcolor="#CCCCCC" cellspacing="1" cellpadding="0"> <tr> <td> <table border="0" cellspacing="0" bgcolor="#33AECC" cellpadding="0" width="100%"> <tr> <td width="20" height="30" align="center" title="上一年"><<</td> <td width="12" align="center" title="上一月"><</td> <td align="center"> <span id="y" title="点击选择年份"></span>2017 年<span id="m" title="点击选择月份"></span> 05 月</td> <td width="12" align="center" id="monthR" title="下一月">></td> <td width="20" align="center" id="yearR" title="下一年">>></td> </tr> </table> </td> </tr> <tr bgcolor="#FFFFFF"> <td> <table style="text-align: center;" width="100%" border="1px" bgcolor="#9999FF" cellspacing="1" cellpadding="0"> <tr style="height: 30px;" bgcolor="#CCCCFF" height="18"> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> <tr class="daylisttr" style="height: 30px;" bgcolor="#ffffff" height="18"> <td >1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
<td >6</td>
<td >7</td>
</tr> </table> </td> </tr> <tr bgcolor="#FFFFFF"> <td> <div id="calenderDay"></div> </td> </tr> <tr> <td> <table border="1px" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" height="30" id="hoursL" title="今天">今天</td> </tr> </table> </td> </tr> </table>
代码也很简单，而我们所需要的表格样式出来了，接下就是需要做的就是根据当前月来如何初始化这个table,于是我们在控制器代码ngOnInit()方法中初始化他代码如下：
var now = new Date(); //初始化年月 this.oyear = now.getFullYear(); this.omonth = now.getMonth() + 1; //定义每个月多少天的Array var mon = Array(31, (this.oyear % 4 == 0 ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //定义星期Array var sunarr = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); //计算某年某月某天是星期几 var sunindex = new Date(this.oyear + "/" + this.omonth + "/1").getDay() //上个月的剩余天数 if (this.omonth == 1) { var upmonthday = 31; var thismonthday = mon[this.omonth - 1]; } else { var upmonthday = mon[this.omonth - 2]; var thismonthday = mon[this.omonth - 1]; } //上个月末尾天数添加到数组days var days = new Array(); var upmonthdayindex = 0; for (var k = sunindex - 1; k >= 0; k--) { days[k] = { id: 1, name: upmonthday - upmonthdayindex }; upmonthdayindex++; } //本月的天数添加到数组days var indexday = 1; for (var k = sunindex; k <= thismonthday; k++) { if (now.getDate() == indexday) { days[k] = { id: 2, name: indexday }; } else { days[k] = { id: 0, name: indexday }; } indexday++; } //下一个月的开头天数添加到数组days末尾 var nextmonthday = 7 - days.length % 7; console.log(nextmonthday); for (var k = 0; k < nextmonthday; k++) { days[days.length] = { id: 1, name: k + 1 }; } //根据星期来对月进行划分显示 对days进行重构 var daysuns = new Array(); var daysunslen = days.length / 7;//取整数 var daysunindex = 0; for (var k = 0; k < daysunslen; k++) { var daysunarr = new Array(); for (var i = 0; i < 7; i++) { daysunarr[i] = { id: days[i + daysunindex].id, name: days[i + daysunindex].name, }; } daysuns[k] = daysunarr; daysunindex = daysunindex + 7; } //重构好的数据发送到页面 this.daylist = daysuns;
在修改对应的table为如下：
忽略。。。
<tr bgcolor="#FFFFFF"> <td> <table style="text-align: center;" width="100%" border="1px" bgcolor="#9999FF" cellspacing="1" cellpadding="0"> <tr style="height: 30px;" bgcolor="#CCCCFF" height="18"> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> <tr class="daylisttr" *ngFor="let days of daylist" style="height: 30px;" bgcolor="#ffffff" height="18"> <td [class.tdbgcolor]="day.id===1" (click)="selectday(day.id,day.name)" [class.thedaybgcolor]="day.id===2" *ngFor="let day of days">{{day.name}}</td> </tr> </table> </td> </tr> 忽略。。。
此时就实现可表格填充和当天被选中并给出不同样式，如下图
接下就是选择日期的以及上一年下一年，今天这些单击事件了。
/// <summary> /// 选择日期 /// </summary> /// <param name="id">判断标识</param> /// <param name="theday">当前选中的天</param> /// <returns></returns> selectday(id: any, theday: any) { if (id == 0) { var thedate = this.oyear + "-" + this.omonth + "-" + theday; this.theselectday = thedate; this.showpicker = false; } } /// <summary> /// 获取今天 /// </summary> /// <param name=""></param> /// <returns></returns> gettoday() { var thedate = this.oyear + "-" + this.omonth + "-" + new Date().getDate(); this.theselectday = thedate; this.showpicker = false; } /// <summary> /// 变换年份和月份的方法 /// </summary> /// <param name="norumonth">上一月或下一月</param> /// <param name="noruyear">上一年或下一年</param> /// <returns></returns> upandnextyearormoth(norumonth: any, noruyear: any) { var now = new Date(); //当前为最后一个月 即年需要向下翻 if (norumonth == 13) { this.oyear = noruyear + 1; this.omonth = 1; } //当前为1月 即年向上翻 else if (norumonth == 0) { this.oyear = noruyear - 1; this.omonth = 12; } else { this.oyear = noruyear; this.omonth = norumonth; } var mon = Array(31, (this.oyear % 4 == 0 ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var sunarr = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); var sunindex = new Date(this.oyear + "/" + this.omonth + "/1").getDay() //上个月的剩余天数 if (this.omonth == 1) { var upmonthday = 31; var thismonthday = mon[this.omonth - 1]; } else { var upmonthday = mon[this.omonth - 2]; var thismonthday = mon[this.omonth - 1]; } var days = new Array(); var upmonthdayindex = 0; for (var k = sunindex - 1; k >= 0; k--) { days[k] = { id: 1, name: upmonthday - upmonthdayindex }; upmonthdayindex++; } var indexday = 1; for (var k = sunindex; k <= thismonthday; k++) { if (now.getDate() == indexday) { days[k] = { id: 2, name: indexday }; } else { days[k] = { id: 0, name: indexday }; } indexday++; } var nextmonthday = 7 - days.length % 7; for (var k = 0; k < nextmonthday; k++) { days[days.length] = { id: 1, name: k + 1 }; } var daysuns = new Array(); var daysunslen = days.length / 7;//取整数 var daysunindex = 0; for (var k = 0; k < daysunslen; k++) { var daysunarr = new Array(); for (var i = 0; i < 7; i++) { daysunarr[i] = { id: days[i + daysunindex].id, name: days[i + daysunindex].name, }; } daysuns[k] = daysunarr; daysunindex = daysunindex + 7; } this.daylist = daysuns; }
页面表格添加对应方法代码片段： 。。。
<tr> <td> <table border="0" cellspacing="0" bgcolor="#33AECC" cellpadding="0" width="100%"> <tr> <td width="20" height="30" align="center" (click)="upandnextyearormoth(omonth,oyear-1)" id="yearL" title="上一年"><<</td> <td width="12" align="center" id="monthL" (click)="upandnextyearormoth(omonth-1,oyear)" title="上一月"><</td> <td align="center"> <span id="y" title="点击选择年份"></span>{{oyear}} 年<span id="m" title="点击选择月份"></span> {{omonth}} 月</td> <td width="12" (click)="upandnextyearormoth(omonth+1,oyear)" align="center" id="monthR" title="下一月">></td> <td width="20" (click)="upandnextyearormoth(omonth,oyear+1)" align="center" id="yearR" title="下一年">>></td> </tr> </table> </td> </tr> 。。。。。。
<tr> <td> <table border="1px" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" (click)="gettoday()" height="30" id="hoursL" title="今天">今天</td> </tr> </table> </td> </tr> 。。。。
这样就全部实现了这个简单的日期选择控件了， 接下里就可以随意绑定到某个元素标签，如输入框：
<input id="dateinput" type="text" (click)="showdatepicker()" style="float: left; margin-left: 5px; padding-left: 5px; padding-top: 2px; width: 80px; height: 25px; border-radius: 5px; font-size: 12px; line-height: 25px;" placeholder="开始日期" readonly="readonly" name="date" value="{{theselectday}}" /> 。。。
ts 代码
//获取当前标签坐标点 var pox = dateinput.getBoundingClientRect().left; //设置弹出样式 this.pickerstyle = { height: "220px", width: "210px", position: "absolute", display: "block", backgroundColor: "#ccc", "margin-left": pox + "px", }
设置弹出日期控件的大小和位置就完成
后面可自行改进，如改年月为下拉框，以及小时分钟的选择等等！
