简单实现Anjular2 TypeScript版本日期选择控件

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

整体思路，日期控件大家都不陌生，也知道是什么样子。首先就会想到一个表格，里面填充了日期，顶部有年月显示或者下拉选择，或上下一年月选择。而底部就是快捷选择当前日期。所以第一步就是实现这个表格布局：

                          </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()方法中初始化他代码如下：

在修改对应的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",
        }

设置弹出日期控件的大小和位置就完成

后面可自行改进，如改年月为下拉框，以及小时分钟的选择等等！