Moment.js实现select选择框最近几天、几周、几月、几季、几年1. 拿到当前输入框输入的内容(this.dat

需求说明：

根据输入框输入数字，然后再选择天、...、年，显示最近几天、...、几年的时间段；

因为项目使用的是Moment.js对时间的处理，所以这里也使用它来达到想要的需求；

PREVIEW

一、下载/安装插件

二、代码结构

这里使用的Ant Design组件库中 Input.Group 开启紧凑(compact)模式，可以快速布局。

传送：www.antdv.com/components/…

数据如下↓

    data() {
        return {
            dateArr: [],    // 用来回显
            dateNum: "1",   // 输入框默认值 1
            dateStr: 0,     // 选择框默认 日         所以默认时间就是最近一天
            dateDescArr: [
                { label: "日", value: 0 },
                { label: "周", value: 1 },
                { label: "月", value: 2 },
                { label: "季", value: 3 },
                { label: "年", value: 4 }
          ]
        }
     }

三、具体业务实现代码

拿到当前输入框输入的内容(this.dateNum)，如果选择季进行一个判断处理。
根据选择的value(this.datestr)进行判断处理，这里就写的很没有阅读性了，就是月&季是"months"。
然后传入subtract(this.dateNum, this.datestr)这个方法里，获取开始时间(begin_time)。
最后时间(end_time)为当天时间。

注：这里没有进行数字校验需要的话可以加一下。 Number("abccba") 这里如果输入的是英文会被转为NaN。

解决：可以使用逻辑或运算符 Number("dsadas") || 1 就会默认是1。

因为页面展示和传递后端数据是不同的，所以这里获取的是YYYY-MM-DD HH:mm:ss

四、关于subtract方法

接收两个参数这是Moment.js里的API，更详细内容可以去看官方文档，传送门：momentjs.cn/docs/#/mani…

最后

oak~以上就是本次开发需求的所有内容了，不足之处还希望能多多指出，我会毫不吝啬的说谢谢你！

目标的坚定是性格中最必要的力量源泉之一，也是成功的利器之一。没有它，天才也会在矛盾无定的迷径中徒劳无功。