Vue 요소 DateTimePicker 날짜 시간 선택기 보조 패키징

관리 시스템 프로젝트의 개발에서 elementUi 라이브러리 날짜 시간 선택자를 사용하는 것이 가장 일반적이고 가장 일반적으로 사용됩니다.필요한 경우 하나씩 작성하는 것이 매우 번거롭고 사용하기 편리하지 않습니다. 컴포넌트로 패키징되어 관리가 용이하며, 이 컴포넌트를 사용하고 호출만 하면 사용할 수 있습니다.

하위 구성요소:
유형 표시 유형은 연/월/일/주/날짜/날짜/시간 범위/날짜 범위
valueFormat 형식 바인딩 값, 일반적으로 배경
선택기로 전달된 매개변수의 데이터 형식옵션: 바로 가기 키 및 구성 항목
defaultTime: 날짜가 선택된 후 기본 특정 시간 데이터 형식은 ['00:00:00', '23:59:59'] 배열입니다.

  <div>
     <el-date-picker
     @change="changeTimeValue"
      v-model="selectTimeDate"
      :type="type"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :value-format="valueFormat"
      :picker-options="pickerOptions"
      :default-time="defaultTime"
     >
    </el-date-picker>
<script>
export default {
  props: {
    type: {
      type: String,
      required: true
    },
    valueFormat: {
      type: String,
      default: ''
    },
    pickerOptions: {
      type: Object,
      default: () => {
        return {}
      }
    }, 
    defaultTime: {
      type: Array,
      default: () => {
        return []
      }
    },
    vModel: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      selectTimeDate: []
    }
  },
  watch: {
    vModel(val) {
      this.selectTimeDate = val
    }
  },
  methods: {
    changeTimeValue(val) {
      this.$emit('changeTimeValue', val)
    }
  }
}
</script>

상위 구성 요소:

 <data-picker 
      :type="'datetimerange'" 
      :valueFormat="'yyyy-MM-dd HH:mm:ss'" 
      :pickerOptions="pickerOptions" 
      :defaultTime="['00:00:00','23:59:59']"
      @changeTimeValue="changeTimeValue"
      :vModel="dateTimeRangeVal"
     ></data-picker>
<script>
import dataPicker from '@/components/dataPicker.vue'
export default {
  components: {
    dataPicker
  },
  data() {
    return {
     pickerOptions: {
        shortcuts: [{
        text: '今天',
        onClick(picker) {
            const end = new Date();
            const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '昨天',
        onClick(picker) {
            const start=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0, 0, 0, 0));
            const end=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(23, 59, 59, 999));
            picker.$emit('pick', [start, end]);
        }
        },{
        text: '最近一周',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '最近一个月',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '最近三个月',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
        }
        }]
     },
     dateTimeRangeVal: []
    }
  },
  methods: {
   // 子组件传过来的值 以下是对选着的值最大区间限制在6个月之内 不需要直接赋值就行
    changeTimeValue(val) {
      if(val) {
        let min = new Date(val[0])
        let max = new Date(val[1])
        let now = new Date()
        let min6 = new Date(Date.now() - (30 * 24 * 3600 * 1000)*6)
        let timeSection = new Date((max.valueOf() - (30 * 24 * 3600 * 1000)*6)).Format("yyyy-MM-dd hh:mm:ss.S")
        let cha = (max.getFullYear() - min.getFullYear() > 0) ? (max.getMonth() + (max.getFullYear() - min.getFullYear()) * 12) : (max.getMonth() - min.getMonth())
        if(max>now && min > min6) {
            this.dateTimeRangeVal = [min.Format("yyyy-MM-dd hh:mm:ss.S"), now.Format("yyyy-MM-dd hh:mm:ss.S")]
        } else if(max > now && min < min6) {
            this.dateTimeRangeVal = [min6.Format("yyyy-MM-dd hh:mm:ss.S"), now.Format("yyyy-MM-dd hh:mm:ss.S")]
        }else if(cha > 6 && max<now) {
            this.dateTimeRangeVal = [timeSection, max.Format("yyyy-MM-dd hh:mm:ss.S")]
        } else {
            this.dateTimeRangeVal = [min.Format("yyyy-MM-dd hh:mm:ss.S"), max.Format("yyyy-MM-dd hh:mm:ss.S")]
        }
      }
    }
  }
}
</script>