900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 【Vue】DatePicker 设置默认日期

【Vue】DatePicker 设置默认日期

时间:2023-11-16 01:32:12

相关推荐

【Vue】DatePicker 设置默认日期

功能说明:

利用DatePicker组件设置默认日期为当天或一个月后

效果图:

实现代码

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

最后

不断学习,不断成长~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。