基于Vue的日期选择器

DateSelCom.gif

使用

dateSelect.png

<template>
  <div class="date-picker">
    <!-- 日期选择组件 -->
    <dl v-for="(c, i) in date" :key="c.name" :class="{ active: show === i }">
      <dt @click="show = show === i ? -1 : i">
        <span>{{ c.value }}</span>
        <i class="iconfont icon-left"></i>
      </dt>
      <dd>
        <div
          v-for="(name, key) in c.arr"
          :key="key"
          class="option"
          :class="{ active: key === c.code }"
          @click="onChange(c.name, i, name)"
        >
          {{ name }}
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: 'DateSelCom',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { type: Array, default: () => ['', '', ''] },
    min: { type: Number, default: 1970 },
    max: { type: Number, default: 2020 }
  },
  data: () => ({
    show: -1,
    date: [
      {
        name: 'year',
        arr: [],
        value: '请选择'
      },
      {
        name: 'month',
        arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        value: '请选择'
      },
      {
        name: 'day',
        arr: [],
        value: '请选择'
      }
    ],
    time: ['', '', '']
  }),
  watch: {
    time() {
      this.onMonth(this.time[0])
    },
    value(v) {
      if (v !== this.time) {
        this.time = v
        v.forEach((c, i) => {
          const curr = this.date[i]
          curr.value = v[i] || '请选择'
        })
      }
    }
  },
  created() {
    this.onInit()
  },
  methods: {
    onChange(name, ind, value) {
      const curr = this.date[ind]
      curr.value = value
      this.show = -1
      this.$emit('change', (this.time = this.date.map((i) => i.value)))
    },
    // 初始化年份
    onInit() {
      const y = this.date[0]
      for (let i = this.min; i <= this.max; i++) {
        y.arr.push(i)
      }
    },
    // @param { Number } y [判断闰年平年 如果是闰年返回true, 否则返回false]
    isLearYear(y) {
      return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
    },
    onMonth(y) {
      const isLear = this.isLearYear(y)
      const day = this.date[2]
      const m = this.time[1]
      if (m === 2 && isLear) {
        this.onSetDay(29)
        this.time[2] > 29 && (day.value = '请选择')
      } else if (m === 2) {
        this.onSetDay(28)
        this.time[2] > 28 && (day.value = '请选择')
      } else if ((m <= 7 && m % 2 === 1) || (m > 7 && m % 2 === 0)) {
        this.onSetDay(31)
      } else {
        this.onSetDay(30)
        this.time[2] > 30 && (day.value = '请选择')
      }
    },
    // @param { Number } num [对应天数]
    onSetDay(num) {
      const d = this.date[2]
      d.arr = []
      for (let i = 1; i <= num; i++) {
        d.arr.push(i)
      }
    }
  }
}
</script>

<style lang="less">
.date-picker {
  ::-webkit-scrollbar {
    width: 7px;
  }
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 7px;
  }
  ::-webkit-scrollbar-track {
    background-color: #f3f3f3;
  }
  dl {
    float: left;
    width: 120px;
    height: 40px;
    box-sizing: border-box;
    vertical-align: middle;
    font-size: 0;
    cursor: default;
    background: #fff;
    font-size: 12px;
    margin-right: 10px;
    position: relative;

    &.active {
      .iconfont {
        transform: rotate(-90deg);
        // transform-origin: center center;
      }

      dd {
        display: block;
      }
    }

    dt {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
      position: relative;

      span {
        display: block;
        cursor: pointer;
        padding: 0 10px;
        width: calc(100% - 28px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        user-select: none;
        font-size: 14px;
      }

      i {
        cursor: pointer;
        display: inline-block;
        width: 12px;
        height: 12px;
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        top: 14px;
        right: 10px;
        transition: all 0.3s linear;
        line-height: 12px;
        color: #bbb;
        user-select: none;
      }
    }
    dd {
      display: none;
      width: 118px;
      max-height: 168px;
      border: 1px solid #d3d3d3;
      border-top-width: 0;
      position: absolute;
      top: 39px;
      left: 0;
      z-index: 99;
      overflow-y: scroll;
      background: #fff;
      .option {
        display: block;
        padding: 0 10px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        width: calc(100% - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        &:hover {
          background: #eee;
        }
      }
    }
  }
}
</style>