Vue项目input时间类型自动补全

最近Vue项目中出现了设置时间的一个要求,一开始是简单的使用以下代码。

<input
          v-model="activityParam.startTime"
          type="datetime-local"
          placeholder="活动时间" >

这时时间格式为“yyyy-MM-dd HH:mm”,手动设置时间,如下图所示。
在这里插入图片描述
但是这样问题是每次都要手动选择日期然后输入时间才能得到时间进行下一步操作,比较麻烦,想要点击时间输入框就自动补全一个默认的时间,这样在测试的时候就不需要一个个选了。
在这里插入图片描述
如上图,点击最后一个向下箭头,输入框自动补全一个日期时间。将上述代码进行修改如下图。

<input
          v-model="activityParam.startTime"
          type="datetime-local"
          placeholder="活动时间"
          @focus="activityStartTime"
        >

然后在methods里面添加activityStartTime逻辑

activityStartTime: function () {
        if(!this.activityParam.startTime){
          let now = +new Date();
          this.activityParam.startTime = MomentUtil.getFormatDate(new Date(now -  24 * 3600 * 1000)) + "T00:00";
        }
      },

这样点击时间输入框最后向下的箭头,就会得到当前时间的前一天的00:00。当前时间为在这里插入图片描述
所得时间为
在这里插入图片描述
其中MomentUtil.getFormatDate()是修改时间格式为YYYY-MM-DD后面的00:00手动修改,因为输入框要求yyyy-MM-ddTHH:mm格式。

static getFormatDate(timestamp) {
    let pattern = "YYYY-MM-DD";
    let timezone = _getTimezone()
    switch(timezone) {
      case 'local':
        return new Moment(timestamp).format(pattern)
      case 'GMT':
        return new Moment(timestamp).utc().format(pattern)
      default:
        return new Moment(timestamp).format(pattern)
    }
  }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值