|
|
@@ -0,0 +1,144 @@
|
|
|
+<template>
|
|
|
+ <div class="fl time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="startTime"
|
|
|
+ style="margin: 0"
|
|
|
+ class="date-picker"
|
|
|
+ type="date"
|
|
|
+ :size="size"
|
|
|
+ :style="{ width: width }"
|
|
|
+ :placeholder="(placeholder||'') + '开始日期'"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :picker-options="pickerOptions1"
|
|
|
+ :editable="false"
|
|
|
+ :clearable="true"
|
|
|
+ :disabled="isEdit"
|
|
|
+ @change="timeChange"
|
|
|
+ />
|
|
|
+ <samp style="padding: 0 3px; margin: 0">至</samp>
|
|
|
+ <el-date-picker
|
|
|
+ style="margin: 0"
|
|
|
+ :size="size"
|
|
|
+ v-model="endTime"
|
|
|
+ class="date-picker"
|
|
|
+ :style="{ width: width }"
|
|
|
+ type="date"
|
|
|
+ :placeholder="(placeholder||'') + '结束日期'"
|
|
|
+ :disabled="isEdit"
|
|
|
+ :picker-options="pickerOptions2"
|
|
|
+ :editable="false"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :clearable="true"
|
|
|
+ @change="timeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 选择时间段(只有日期)组件
|
|
|
+// timeReturned 返回值{startTime: Number,endTime: Number}
|
|
|
+export default {
|
|
|
+ name: "PeriodDatePicker",
|
|
|
+ props: ["start", "end", "disabled", "size", "width", "type", "placeholder"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ startTime: this.start,
|
|
|
+ endTime: this.end,
|
|
|
+ isEdit: this.disabled,
|
|
|
+ pickerOptions1: {
|
|
|
+ disabledDate: (time) => {
|
|
|
+ if (this.endTime != null && this.endTime != "" && time) {
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ disabled: function (val) {
|
|
|
+ this.isEdit = val;
|
|
|
+ },
|
|
|
+ start(val) {
|
|
|
+ this.startTime = val;
|
|
|
+ },
|
|
|
+ end(val) {
|
|
|
+ this.endTime = val;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ timeChange() {
|
|
|
+ if (
|
|
|
+ this.startTime !== "" &&
|
|
|
+ this.startTime !== null &&
|
|
|
+ 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 (
|
|
|
+ new Date(this.endTime).valueOf() < new Date(this.startTime).valueOf()
|
|
|
+ ) {
|
|
|
+ this.showMessage("结束时间不大于开始时间！");
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.timeReturned();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.timeReturned();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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),
|
|
|
+ };
|
|
|
+
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ showMessage(message) {
|
|
|
+ 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;
|
|
|
+ if (eDay - sDay > step * days) {
|
|
|
+ isok = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ return isok;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.date-picker.el-input {
|
|
|
+ // width: 150px !important;
|
|
|
+}
|
|
|
+</style>
|
