最近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)
    }
  }
Logo

前往低代码交流专区

更多推荐