Vue项目input时间类型自动补全
最近Vue项目中出现了设置时间的一个要求,一开始是简单的使用以下代码。<inputv-model="activityParam.startTime"type="datetime-local"placeholder="活动时间" >这时时间格式为“yyyy-MM-dd HH:mm”,手动设置时间,如下图所示。但是...
·
最近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)
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)