vue中在时间输入框中默认显示时间

复制代码

<template>
<card>
<label>开始时间</label>
<DatePicker
v-model="startTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm"
style="width: 200px"
></DatePicker>
<label>过期时间</label>
<DatePicker
v-model="endTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm"
style="width: 200px"
></DatePicker>
</card>
</template>

<script>
export default {
data() {
return {
startTime:"",
endTime:""
}
},
methods: {
// 格式化时间,获取当前时间的一个月后的时间值
convertToLateDate() {
var data = new Date();
var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 30);
// 以上两行代码为关键代码,若想要返回一天后的时间,则可以将第二行代码更换为下面代码
// var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000);
// 若是想要返回值为当前时间,则上面两行代码可以直接修改为下面代码即可。
// var Da = new Date()
var y = Da.getFullYear();
var m = Da.getMonth() + 1;
var d = Da.getDate();
var H = Da.getHours();
var mm = Da.getMinutes();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
H = H < 10 ? "0" + H : H;
return y + "-" + m + "-" + d + " " + H + ":" + mm;
}
},
// 页面加载完毕后触发的事件
mounted() {
var vm = this;
vm.startTime = new Date();// 默认显示为当天时间
vm.endTime = vm.convertToLateDate();
}
}
</script>

复制代码

 

posted @   这都没什么  阅读(4010)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示