获取当前所在的月份的月初和当天的日期
computed: {
// 默然展示月初的第一天
formattedFirstDayOfMonth() {
const now = new Date();
const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
const year = firstDayOfMonth.getFullYear();
const month = (firstDayOfMonth.getMonth() + 1)
.toString()
.padStart(2, "0"); // 月份是从0开始的，所以加1
const day = firstDayOfMonth.getDate().toString().padStart(2, "0");
return `${year}年${month}月${day}日`;
},
//默认展示今天
formattedToday() {
const today = new Date();
const year = today.getFullYear();
const month = (today.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以加1
const day = today.getDate().toString().padStart(2, "0");
return `${year}年${month}月${day}日`;
},
},我们在写页面的时候 经常会遇到事件的选择器 象我做H5 的时候，我经常用的组件库 就是vant 组件库
举个简单的小例子
就是 下面的日期变化时 上面框里面的日期也要跟着改变 然后点击的时候 选择一个区间的范围
<template>
<van-popup
v-model="dateShow"
position="bottom"
round
:style="{ height: '52%' }"
>
<div class="day_box">
<div class="customize_text">自定义</div>
<img
src="../../assets/information/close.png"
alt=""
class="close-icon"
@click="onClose"
/>
</div>
<div class="date_Range">
<div
class="date_Range_left"
@click="onClickday(0)"
:class="{ date_Range_right: currentday == 0 }"
>
<div v-if="firstFormatValue == null">
{{ formattedFirstDayOfMonth }}
</div>
<div v-else>{{ firstFormatValue }}</div>
</div>
<div class="date_Range_line"></div>
<div
class="date_Range_left"
@click="onClickday(1)"
:class="{ date_Range_right: currentday == 1 }"
>
<div v-if="currentFormatValue == null">{{ formattedToday }}</div>
<div v-else>{{ currentFormatValue }}</div>
</div>
</div>
<div class="date-currentDate-box">
<van-datetime-picker
ref="datetimePicker"
v-model="currentDate"
type="date"
title="选择年月日"
:min-date="minDate"
:max-date="maxDate"
:visible-item-count="3"
@change="handleChange"
/>
<div class="btn" @click.stop="onConfirm">确认</div>
</div>
</van-popup>
</template><script>
export default {
data() {
return {
dateShow: false,
minDate: new Date(2020, 0, 1),
maxDate: new Date(),
currentDate: new Date(),
formattedDate: "", //日期
currentday: 1,
firstFormatValue: null,
currentFormatValue: null,
addFormatValue: "",
};
},
computed: {
// 默然展示月初的第一天
formattedFirstDayOfMonth() {
const now = new Date();
const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
const year = firstDayOfMonth.getFullYear();
const month = (firstDayOfMonth.getMonth() + 1)
.toString()
.padStart(2, "0"); // 月份是从0开始的，所以加1
const day = firstDayOfMonth.getDate().toString().padStart(2, "0");
return `${year}年${month}月${day}日`;
},
//默认展示今天
formattedToday() {
const today = new Date();
const year = today.getFullYear();
const month = (today.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以加1
const day = today.getDate().toString().padStart(2, "0");
return `${year}年${month}月${day}日`;
},
},
methods: {
handleChange(pickerInstance) {
if (this.currentday == 0) {
this.firstFormatValue =
pickerInstance.getValues()[0] +
"年" +
pickerInstance.getValues()[1] +
"月" +
pickerInstance.getValues()[2] +
"日";
} else if (this.currentday == 1) {
this.currentFormatValue =
pickerInstance.getValues()[0] +
"年" +
pickerInstance.getValues()[1] +
"月" +
pickerInstance.getValues()[2] +
"日";
}
},
onConfirm() {
// const selectedDate = this.$refs.datetimePicker.value;
// this.formattedDate = `${this.firstFormatValue}-${this.currentFormatValue}`;
// this.addFormatValue = this.formatDate(selectedDate);
// console.log(this.addFormatValue);
// this.dateShow = false;
const selectedDate = this.$refs.datetimePicker.value;
// 新增判断
if (this.firstFormatValue === null || this.currentFormatValue === null) {
this.addFormatValue = `${this.formattedFirstDayOfMonth}-${this.formattedToday}`;
console.log(this.addFormatValue);
} else {
this.formattedDate = `${this.firstFormatValue}-${this.currentFormatValue}`;
}
this.dateShow = false;
},
formatDate(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以加1
const day = date.getDate().toString().padStart(2, "0");
return `${year}年${month}月${day}日`;
},
onCustomShow() {
this.dateShow = true;
},
},
};
</script>
