import DateTimePicker from '../dateTimePicker/index.vue'; import DateUtil from '../dateTimePicker/dateUtil'; import { DATE_TYPES } from '../dateTimePicker/constant'; export default { components: { DateTimePicker }, data() { return { showStartDatePicker: false, showEndDatePicker: false, startDate: '', endDate: '', activeDate: 'startDate' ,// 正在处理哪一个日期值,startDate/endDate dateList:[{ name:'当日', type:'day' }, { name:'本月', type:'month' }, { name:'本年', type:'year' }], currentIndex:null, }; }, props: { // 日期筛选模式,1:年月日(默认),2:年月,3:年,4:年月日时分秒,5:时分秒,6:时分 mode: { type: Number, default: DATE_TYPES.YMD }, title:{ type:String, default:'选择营业时段' }, isYear:{ type:Boolean, default:false }, // 默认开始日期 defaultStartDate: { type: String, default: '' }, // 默认结束日期 defaultEndDate: { type: String, default: '' }, // 可选的最小日期 minDate: { type: String, default: '' }, // 可选的最大日期 maxDate: { type: String, default: '' } }, watch: { mode() { // 筛选模式更换时清空一下数据 this.resetData(); }, startDate() { this.$emit('onChange', { startDate: this.startDate, endDate: this.endDate }); }, endDate() { this.$emit('onChange', { startDate: this.startDate, endDate: this.endDate }); }, defaultStartDate: { handler(defaultStartDate) { if (!defaultStartDate) { return; } if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) { console.error('时分秒/时分模式不支持设置默认开始时间'); return; } if (DateUtil.isBefore(defaultStartDate, this.minDate)) { console.warn( `默认开始日期不可小于最小可选日期,已把默认开始日期设为最小可选日期。默认开始日期:${defaultStartDate},最小可选日期:${this.minDate}` ); this.startDate = this.getModeFormatDateString(this.minDate); } else { this.startDate = this.getModeFormatDateString(defaultStartDate); } }, immediate: true }, defaultEndDate: { handler(defaultEndDate) { if (!defaultEndDate) { return; } if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) { console.error('时分秒/时分模式不支持设置默认结束时间'); return; } if (DateUtil.isAfter(defaultEndDate, this.maxDate)) { console.warn( `默认结束日期不可大于最大可选日期,已把默认结束日期设为最大可选日期。默认结束日期:${defaultEndDate},最大可选日期:${this.maxDate}` ); this.endDate = this.getModeFormatDateString(this.maxDate); } else { this.endDate = this.getModeFormatDateString(defaultEndDate); } }, immediate: true }, minDate(val) { if ((val && this.mode == DATE_TYPES.HMS) || this.mode == DATE_TYPES.HM) { console.error('时分秒/时分模式不支持设置最小可选时间'); return; } }, maxDate(val) { if ((val && this.mode == DATE_TYPES.HMS) || this.mode == DATE_TYPES.HM) { console.error('时分秒/时分模式不支持设置最大可选时间'); return; } } }, methods: { selectYear(item,index){ this.currentIndex = index //今日 if(item.type == 'day'){ // 获取当前时间 const now = new Date(); // 获取今日的起始时间(00:00:00) const startOfDay = new Date(now); startOfDay.setHours(0, 0, 0, 0); // 设置为 00:00:00.000 // 获取今日的结束时间(23:59:59) const endOfDay = new Date(now); endOfDay.setHours(23, 59, 59, 999); // 设置为 23:59:59.999 // 格式化输出 const formatDate = (date) => { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始,需要 +1 const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0'); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }; console.log("今日起始时间:", formatDate(startOfDay)); // 例如:2023-10-05 00:00:00 console.log("今日结束时间:", formatDate(endOfDay)); // 例如:2023-10-05 23:59:59 this.startDate = formatDate(startOfDay) this.endDate = formatDate(endOfDay) } //本月 else if(item.type == 'month'){ // 获取当前时间 const now = new Date(); // 获取本月的第一天(00:00:00) const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0); // 获取本月的最后一天(23:59:59) const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999); // 格式化日期为 YYYY-MM-DD HH:mm:ss const formatDate = (date) => { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始,需要 +1 const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0'); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }; console.log("本月起始时间:", formatDate(startOfMonth)); // 例如:2023-10-01 00:00:00 console.log("本月结束时间:", formatDate(endOfMonth)); // 例如:2023-10-31 23:59:59 this.startDate = formatDate(startOfMonth) this.endDate = formatDate(endOfMonth) } //今年 else if(item.type == 'year'){ // 获取当前时间 const now = new Date(); // 获取今年的第一天(00:00:00) const startOfYear = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0); // 月份从 0 开始,0 表示 1 月 // 获取今年的最后一天(23:59:59) const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59, 999); // 11 表示 12 月 // 格式化日期为 YYYY-MM-DD HH:mm:ss const formatDate = (date) => { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始,需要 +1 const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0'); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }; console.log("今年起始时间:", formatDate(startOfYear)); // 例如:2023-01-01 00:00:00 console.log("今年结束时间:", formatDate(endOfYear)); // 例如:2023-12-31 23:59:59 this.startDate = formatDate(startOfYear) this.endDate = formatDate(endOfYear) } }, open(){ this.$refs.popup.open() }, onTapStartDate() { this.showEndDatePicker = false; if (!this.startDate) { this.startDate = this.getModeFormatDateString(new Date()); } this.activeDate = 'startDate'; this.showStartDatePicker = true; }, onTapEndDate() { this.showStartDatePicker = false; if (!this.endDate) { this.endDate = this.startDate; } this.activeDate = 'endDate'; this.showEndDatePicker = true; }, onChangeStartDate(date) { this.startDate = date; }, onChangeEndDate(date) { this.endDate = date; }, validateInput() { if (!this.startDate) { uni.showToast({ title: '请选择开始时间', icon: 'none' }); return false; } else if (!this.endDate) { uni.showToast({ title: '请选择结束时间', icon: 'none' }); return false; } else if (DateUtil.isAfter(this.startDate, this.endDate)) { uni.showToast({ title: '结束时间不能小于开始时间', icon: 'none' }); return false; } return true; }, onCancel() { this.resetData(); this.$emit('cut') }, onConfirm() { if (this.validateInput()) { this.$emit('onSubmit', { startDate: this.startDate, endDate: this.endDate }); this.showStartDatePicker = false; this.showEndDatePicker = false; this.$refs.popup.close() } }, resetData() { this.startDate = ''; this.endDate = ''; this.activeDate = 'startDate'; this.showStartDatePicker = false; this.$refs.popup.close() this.showEndDatePicker = false; this.$refs.popup.close() }, // 返回对应日期模式的时间字符串 getModeFormatDateString(date) { let fmt = 'YYYY-MM-DD'; switch (this.mode) { case DATE_TYPES.YM: fmt = 'YYYY-MM'; break; case DATE_TYPES.Y: fmt = 'YYYY'; break; case DATE_TYPES['YMD-HMS']: fmt = 'YYYY-MM-DD HH:mm:ss'; break; case DATE_TYPES.HMS: fmt = 'HH:mm:ss'; break; case DATE_TYPES.HM: fmt = 'HH:mm'; break; default: break; } return DateUtil.formatDate(date, fmt); } } };