【Vue】DatePicker 设置默认日期

功能说明：

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

效果图：

实现代码

<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>

最后

不断学习，不断成长~