功能说明:
利用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>
最后
不断学习,不断成长~