|
整体思路，日期控件大家都不陌生，也知道是什么样子。首先就会想到一个表格，里面填充了日期，顶部有年月显示或者下拉选择，或上下一年月选择。而底部就是快捷选择当前日期。所以第一步就是实现这个表格布局：
<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",
}
设置弹出日期控件的大小和位置就完成
后面可自行改进，如改年月为下拉框，以及小时分钟的选择等等！
|
客服电话
APP下载
官方微信
请发表评论