|
|
@@ -17,9 +17,9 @@
|
|
|
/>
|
|
|
<samp style="padding: 0 3px; margin: 0">至</samp>
|
|
|
<el-date-picker
|
|
|
+ v-model="endTime"
|
|
|
style="margin: 0"
|
|
|
:size="size"
|
|
|
- v-model="endTime"
|
|
|
class="date-picker"
|
|
|
:style="{ width: width }"
|
|
|
type="date"
|
|
|
@@ -35,11 +35,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import dayjs from 'dayjs'
|
|
|
// 选择时间段(只有日期)组件
|
|
|
// timeReturned 返回值{startTime: Number,endTime: Number}
|
|
|
export default {
|
|
|
- name: "PeriodDatePicker",
|
|
|
- props: ["start", "end", "disabled", "size", "width", "type", "placeholder"],
|
|
|
+ name: 'PeriodDatePicker',
|
|
|
+ props: ['start', 'end', 'disabled', 'size', 'width', 'type', 'placeholder'],
|
|
|
data() {
|
|
|
return {
|
|
|
startTime: this.start,
|
|
|
@@ -47,98 +48,106 @@ export default {
|
|
|
isEdit: this.disabled,
|
|
|
pickerOptions1: {
|
|
|
disabledDate: (time) => {
|
|
|
- if (this.endTime != null && this.endTime != "" && time) {
|
|
|
- return time.getTime() > new Date(this.endTime).valueOf();
|
|
|
+ if (this.endTime != null && this.endTime != '' && time) {
|
|
|
+ const start = dayjs(time).format('YYYY-MM-DD')
|
|
|
+ if (start === this.endTime) return false
|
|
|
+ return (time.getTime() >= new Date(this.endTime).valueOf())
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
pickerOptions2: {
|
|
|
disabledDate: (time) => {
|
|
|
- if (this.startTime != null && this.startTime != "" && time) {
|
|
|
- return time.getTime() < new Date(this.startTime).valueOf();
|
|
|
+ if (this.startTime != null && this.startTime != '' && time) {
|
|
|
+ const end = dayjs(time).format('YYYY-MM-DD')
|
|
|
+ if (end === this.startTime) return false
|
|
|
+ return (time.getTime() <= new Date(this.startTime).valueOf())
|
|
|
}
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
- disabled: function (val) {
|
|
|
- this.isEdit = val;
|
|
|
+ disabled: function(val) {
|
|
|
+ this.isEdit = val
|
|
|
},
|
|
|
start(val) {
|
|
|
- this.startTime = val;
|
|
|
+ this.startTime = val
|
|
|
},
|
|
|
end(val) {
|
|
|
- this.endTime = val;
|
|
|
- },
|
|
|
+ this.endTime = val
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
timeChange() {
|
|
|
if (
|
|
|
- this.startTime !== "" &&
|
|
|
+ this.startTime !== '' &&
|
|
|
this.startTime !== null &&
|
|
|
- this.endTime !== "" &&
|
|
|
+ this.endTime !== '' &&
|
|
|
this.endTime !== null
|
|
|
) {
|
|
|
- if (this.type + "" === "1" && !this.setType(365)) {
|
|
|
- this.showMessage("时间跨度不能超过一年！");
|
|
|
- return;
|
|
|
- } else if (this.type + "" === "2" && !this.setType(90)) {
|
|
|
- this.showMessage("时间跨度不能超过90天！");
|
|
|
- return;
|
|
|
- }else if (this.type + "" === "3" && !this.setType(30)) {
|
|
|
- this.showMessage("时间跨度不能超过30天！");
|
|
|
- return;
|
|
|
+ if (this.type + '' === '1' && !this.setType(365)) {
|
|
|
+ this.showMessage('时间跨度不能超过一年！')
|
|
|
+ return
|
|
|
+ } else if (this.type + '' === '2' && !this.setType(90)) {
|
|
|
+ this.showMessage('时间跨度不能超过90天！')
|
|
|
+ return
|
|
|
+ } else if (this.type + '' === '3' && !this.setType(30)) {
|
|
|
+ this.showMessage('时间跨度不能超过30天！')
|
|
|
+ return
|
|
|
} else if (
|
|
|
new Date(this.endTime).valueOf() < new Date(this.startTime).valueOf()
|
|
|
) {
|
|
|
- this.showMessage("结束时间不大于开始时间！");
|
|
|
- return;
|
|
|
+ this.showMessage('结束时间不大于开始时间！')
|
|
|
+ return
|
|
|
} else {
|
|
|
- this.timeReturned();
|
|
|
+ this.timeReturned()
|
|
|
}
|
|
|
} else {
|
|
|
- this.timeReturned();
|
|
|
+ this.timeReturned()
|
|
|
}
|
|
|
},
|
|
|
+ dealDisabledDate(time) {
|
|
|
+ var times = Date.now() - 3600 * 1000 * 24
|
|
|
+ return time > times
|
|
|
+ },
|
|
|
timeReturned() {
|
|
|
- let s = this.startTime == null ? "" : this.startTime;
|
|
|
- let e = this.endTime == null ? "" : this.endTime;
|
|
|
- let model = {
|
|
|
- startTime: s == "" ? "" : this.transformTime(s),
|
|
|
- endTime: e == "" ? "" : this.transformTime(e),
|
|
|
- };
|
|
|
+ const s = this.startTime == null ? '' : this.startTime
|
|
|
+ const e = this.endTime == null ? '' : this.endTime
|
|
|
+ const model = {
|
|
|
+ startTime: s == '' ? '' : this.transformTime(s),
|
|
|
+ endTime: e == '' ? '' : this.transformTime(e)
|
|
|
+ }
|
|
|
|
|
|
- this.$emit("timeReturned", model);
|
|
|
+ this.$emit('timeReturned', model)
|
|
|
},
|
|
|
|
|
|
transformTime(tTime) {
|
|
|
- let time = new Date(tTime);
|
|
|
- let y = time.getFullYear();
|
|
|
- let M = time.getMonth() + 1;
|
|
|
- let d = time.getDate();
|
|
|
- return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
|
|
|
+ const time = new Date(tTime)
|
|
|
+ const y = time.getFullYear()
|
|
|
+ const M = time.getMonth() + 1
|
|
|
+ const d = time.getDate()
|
|
|
+ return y + '-' + (M < 10 ? '0' + M : M) + '-' + (d < 10 ? '0' + d : d)
|
|
|
},
|
|
|
showMessage(message) {
|
|
|
- this.$message.error(message);
|
|
|
- this.startTime = "";
|
|
|
- this.endTime = "";
|
|
|
- this.timeReturned();
|
|
|
+ this.$message.error(message)
|
|
|
+ this.startTime = ''
|
|
|
+ this.endTime = ''
|
|
|
+ this.timeReturned()
|
|
|
},
|
|
|
setType(days) {
|
|
|
- let step = 24 * 3600 * 1000;
|
|
|
- let sDay = new Date(this.startTime).valueOf();
|
|
|
- let eDay = new Date(this.endTime).valueOf();
|
|
|
- let isok = true;
|
|
|
+ const step = 24 * 3600 * 1000
|
|
|
+ const sDay = new Date(this.startTime).valueOf()
|
|
|
+ const eDay = new Date(this.endTime).valueOf()
|
|
|
+ let isok = true
|
|
|
if (eDay - sDay > step * days) {
|
|
|
- isok = false;
|
|
|
+ isok = false
|
|
|
}
|
|
|
|
|
|
- return isok;
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ return isok
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.date-picker.el-input {
|
