vue获取近七天、月份、年份的起始日和结束日

vue获取近七天的起始日和结束日

例如：startDate: 2023-07-29   endDate: 2023-08-04

data() {return {startDate: null,endDate: null}
},
mounted() {this.calculateDateRange();
},
methods: {calculateDateRange() {var currentDate = new Date();var startDate = new Date();startDate.setDate(currentDate.getDate() - 6);this.startDate = this.formatDate(startDate);this.endDate = this.formatDate(currentDate);console.log(this.startDate,'2023-07-29')console.log(this.startDate,'2023-08-04')},formatDate(date) {var year = date.getFullYear();var month = ("0" + (date.getMonth() + 1)).slice(-2);var day = ("0" + date.getDate()).slice(-2);return year + "-" + month + "-" + day;}
}

Vue的data选项中定义了startDate和endDate两个变量来保存起始日和结束日。在Vue的mounted钩子中调用calculateDateRange方法来计算日期范围。
calculateDateRange方法首先获取当前日期，然后通过减去6天得到起始日的日期。接下来，使用formatDate方法将日期格式化为"YYYY-MM-DD"的形式，最后将起始日和结束日保存到Vue的startDate和endDate变量中。
formatDate方法用于将Date对象的日期格式化为"YYYY-MM-DD"的形式。它通过获取年份、月份和日期，并使用slice()方法在需要的情况下添加前导零来确保日期格式正确。

vue根据月份获取起始日和结束日

例如：startDate: 2023-01-01   endDate: 2023-01-31

data() {return {selectedMonth: '', // 已选择的月份startDate: null, // 起始日endDate: null // 结束日}
},
watch: {selectedMonth: function(newMonth) {if (newMonth) {this.calculateDateRange(newMonth);}}
},
methods: {calculateDateRange(selectedMonth) {// 将选定的月份转换为Date对象var monthDate = new Date(selectedMonth);var year = monthDate.getFullYear();var month = monthDate.getMonth();// 计算起始日和结束日var startDay = new Date(year, month, 1);var endDay = new Date(year, month + 1, 0);// 格式化日期this.startDate = this.formatDate(startDay);this.endDate = this.formatDate(endDay);console.log(this.startDate,'2023-01-01')console.log(this.startDate,'2023-01-31')},formatDate(date) {var year = date.getFullYear();var month = ("0" + (date.getMonth() + 1)).slice(-2);var day = ("0" + date.getDate()).slice(-2);return year + "-" + month + "-" + day;}
}

在Vue的data选项中定义了selectedMonth、startDate和endDate三个变量，分别表示已选择的月份、起始日和结束日。通过watch选项监听selectedMonth的变化，当有新的月份被选择时，调用calculateDateRange方法。
calculateDateRange方法将选定的月份转换为Date对象，然后使用Date对象的方法计算出起始日和结束日。最后，使用formatDate方法将日期格式化为"YYYY-MM-DD"的形式，并将起始日和结束日保存到Vue的startDate和endDate变量中。
formatDate方法用于将Date对象的日期格式化为"YYYY-MM-DD"的形式，通过获取年份、月份和日期，并使用slice()方法在需要的情况下添加前导零来确保日期格式正确。

vue根据年份获取起始日和结束日

例如：startDate: 2023-01-01 endDate: 2023-12-31

data() {return {selectedYear: '', // 已选择的年份startDate: null, // 起始日endDate: null // 结束日}
},
watch: {selectedYear: function(newYear) {if (newYear) {this.calculateDateRange(newYear);}}
},
methods: {calculateDateRange(selectedYear) {var startDate = new Date(selectedYear, 0, 1); // 选择年份的第一天var endDate = new Date(selectedYear, 11, 31); // 选择年份的最后一天// 格式化日期this.startDate = this.formatDate(startDate);this.endDate = this.formatDate(endDate);console.log(this.startDate,'2023-01-01')console.log(this.startDate,'2023-12-31')},formatDate(date) {var year = date.getFullYear();var month = ("0" + (date.getMonth() + 1)).slice(-2);var day = ("0" + date.getDate()).slice(-2);return year + "-" + month + "-" + day;}
}

在Vue的data选项中定义了selectedYear、startDate和endDate三个变量，分别表示已选择的年份、起始日和结束日。然后通过watch选项监听selectedYear的变化，当有新的年份被选择时，调用calculateDateRange方法。
calculateDateRange方法根据选择的年份创建起始日和结束日的Date对象，并使用formatDate方法将日期格式化为"YYYY-MM-DD"的形式。最后，将格式化后的起始日和结束日保存到Vue的startDate和endDate变量中。
formatDate方法用于将Date对象的日期格式化为"YYYY-MM-DD"的形式，通过获取年份、月份和日期，并使用slice()方法在需要的情况下添加前导零来确保日期格式正确。