wcui/src/picker/date.wc

<template>
  <label class="input" tabindex="0">
    <slot name="label"></slot>
    <span></span>
    <wc-icon class="icon" is="calendar"></wc-icon>
  </label>
  <div class="calendar">
    <header class="control">
      <wc-icon is="dbl-left"></wc-icon>
      <wc-icon is="left"></wc-icon>
      <span></span>
      <wc-icon is="right"></wc-icon>
      <wc-icon is="dbl-right"></wc-icon>
    </header>
    <section class="week">
      <span>日</span>
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
    </section>
    <section class="days"></section>
    <div class="tips">日期超出限制</div>
  </div>
</template>

<style lang="scss">
:host {
  overflow: hidden;
  display: inline-block;
  position: relative;
  min-width: 80px;
  user-select: none;
  -moz-user-select: none;
  color: nth($cd, 2);
  border-radius: 4px;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 32px;
  font-size: 13px;
  border: 1px solid nth($cp, 3);
  border-radius: inherit;
  white-space: nowrap;
  background: #fff;
  color: inherit;
  outline: none;
  cursor: text;

  slot {
    display: none;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 30px;
    padding: 0 10px;
    font-size: 14px;
    border-right: 1px solid nth($cp, 3);
    border-radius: 4px 0 0 4px;
    background: nth($cp, 1);
  }

  span {
    overflow: hidden;
    flex: 1;
    min-width: 64px;
    padding: 0 5px;

    &::placeholder {
      color: nth($cgr, 1);
    }
  }

  /* ----- */
  .icon {
    padding: 0 5px;
    --size: 16px;
  }

  &[label] slot {
    display: flex;
  }
}

.calendar {
  display: none;
  position: fixed;
  z-index: 10480;
  left: 0;
  top: 0;
  width: 216px;
  height: auto;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);

  &::after {
    position: absolute;
    left: 30px;
    top: -4px;
    width: 8px;
    height: 8px;
    background: #fff;
    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
    transform: rotate(45deg);
    content: '';
  }

  .control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    margin: 8px 0;
    font-size: 14px;

    wc-icon {
      --size: 14px;
      margin: 0 3px;
      color: nth($cgr, 1);
      cursor: pointer;
    }
    span {
      flex: 1;
      text-align: center;
    }
  }
  .week {
    display: flex;
    height: 29px;
    border-bottom: 1px solid #f2f5fc;
    font-size: 14px;
    span {
      flex: 1;
    }
  }

  .days {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    line-height: 26px;

    span {
      position: relative;
      width: 28px;
      height: 28px;
      border: 1px solid transparent;
      border-radius: 50%;

      &:hover {
        border-color: #f2f5fc;
        font-size: 13px;
      }

      &[weekend] {
        color: nth($ct, 1);
      }
      &[picked] {
        color: #fff;
        border-color: #f2f5fc;

        &::before {
          display: block;
          position: absolute;
          left: 3px;
          top: 3px;
          z-index: -1;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: nth($ct, 1);
          content: '';
        }
      }
      &[disabled] {
        border-color: transparent;
        font-size: 12px;
        color: nth($cp, 3);
      }
    }
  }

  .tips {
    display: none;
    position: absolute;
    z-index: 10241;
    left: 25%;
    top: 40%;
    width: 50%;
    height: 30px;
    line-height: 28px;
    background: #fffbed;
    color: nth($co, 2);
    border: 1px solid nth($co, 1);
    border-radius: 4px;
  }
}

:host(:focus-within) {
  box-shadow: 0 0 3px nth($ct, 1);
}
:host(:focus-within[readonly]) {
  box-shadow: 0 0 3px nth($co, 1);
}
:host([disabled]) {
  opacity: 0.6;
  .input {
    cursor: not-allowed;
    background: #f3f5fb;
  }
}
</style>

<script>
import '../icon/index'
import { nextTick, each, ebind, bind, unbind } from '../utils'

const today = new Date()

/**************** 公共函数 *****************/

//计算日历数组
function getCalendarTable({ year, month, max, min, last }) {
  let nums = getTotalDays(year, month)
  let numsFixed = 1 - getFirstDay(year, month)
  let isLimitYM = isLimited({ max, min }, { year, month })
  let list = []

  for (let i = numsFixed; i <= nums; i++) {
    let day = {
      weekend: false,
      day: i < 1 ? '' : i,
      picked: false,
      disabled: true
    }
    if (i > 0) {
      let week = getFirstDay(year, month, i)
      day.weekend = week === 0 || week === 6
      day.picked = !!isPicked({ year, month, day: i }, last)
      day.disabled = disabledDay({ max, min }, i, isLimitYM)
      day._ = new Date(year, month, i)
    }
    list.push(day)
  }
  return list
}

//判断当前年/月是否超出限制
function isLimited({ max, min }, { year, month }) {
  let result = ''

  if (!max && !min) {
    return false
  }

  if (max) {
    if (year > max.year) {
      return true
    } else if (year === max.year) {
      if (month > max.month) {
        return true
      } else if (month === max.month) {
        result += '+'
      }
    }
  }

  if (min) {
    if (year < min.year) {
      return true
    } else if (year === min.year) {
      if (month < min.month) {
        return true
      } else if (month === min.month) {
        result += '-'
      }
    }
  }
  return result
}

//判断指定天数是否有效
function disabledDay({ max, min }, day, limitedYM) {
  if (limitedYM === '-') {
    return day < min.day
  }

  if (limitedYM === '+') {
    return max.day && day > max.day
  }

  if (limitedYM === '+-') {
    return day < min.day || (max.day && day > max.day)
  }

  return limitedYM
}

//判断指定天数是否被选中
function isPicked({ year, month, day }, last) {
  return last && last.year === year && last.month === month && last.day === day
}

//获取今年的年份/月份，返回的是数组
function getThisYearMonth() {
  var oDate = new Date()
  return [oDate.getFullYear(), oDate.getMonth() + 1]
}

//根据年份获取指定月份天数
function getTotalDays(year, month) {
  return new Date(year, month, 0).getDate()
}

//判断指定年月第一天是星期几
function getFirstDay(year, month, day) {
  return new Date(year, month, day || 1).getDay()
}

export default class DatePicker {
  props = {
    value: '',
    format: 'Y-m-d',
    'max-date': '',
    'min-date': '',
    max: null,
    min: null,
    calendar: {
      year: 0,
      month: 0,
      list: []
    },
    readonly: false,
    disabled: false
  }

  constructor() {
    /* render */

    this.__INPUT__ = this.root.children[1]
    this.__CALENDAR__ = this.root.children[2]
    this.__CTRL__ = this.__CALENDAR__.firstElementChild
    this.__DAYS__ = this.__CALENDAR__.children[2]
    this.__TIPS__ = this.__CALENDAR__.lastElementChild
  }

  get value() {
    return this.props.value
  }

  set value(val) {
    if (val) {
      if (!Date.isDate(val)) {
        val = new Date(val)
        if (val.toString() === 'Invalid Date') {
          return
        }
      }
      this._updateValue(val)
    } else {
      this.props.last = null
      this.props.value = ''
      this.__INPUT__.children[1].textContent = ''
    }
    let { calendar, last } = this.props

    if (
      !calendar.year ||
      (last && calendar.year !== last.year && calendar.month !== last.month)
    ) {
      this.props.calendar = { ...last, list: [] }
    }
    this._renderCalendar()
    nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
  }

  get readonly() {
    return this.props.readonly
  }

  set readonly(val) {
    var type = typeof val

    if (val === this.props.readonly) {
      return
    }
    if ((type === 'boolean' && val) || type !== 'boolean') {
      this.props.readonly = true
      this.setAttribute('readonly', '')
    } else {
      this.props.readonly = false
      this.removeAttribute('readonly')
    }
  }

  get disabled() {
    return this.props.disabled
  }

  set disabled(val) {
    var type = typeof val

    if (val === this.props.disabled) {
      return
    }
    if ((type === 'boolean' && val) || type !== 'boolean') {
      this.props.disabled = true
      this.setAttribute('disabled', '')
      this.__INPUT__.removeAttribute('tabindex')
    } else {
      this.props.disabled = false
      this.removeAttribute('disabled')
      this.__INPUT__.setAttribute('tabindex', '0')
    }
  }

  _tips() {
    clearTimeout(this.timer)
    this.__TIPS__.style.display = 'block'

    this.timer = setTimeout(() => {
      this.__TIPS__.style.display = ''
    }, 1500)
  }

  _updateValue(oDate, needUpdateStyle) {
    this.props.last = {
      year: oDate.getFullYear(),
      month: oDate.getMonth(),
      day: oDate.getDate()
    }
    this.props.value = oDate.format(this.props.format)
    this.__INPUT__.children[1].textContent = this.props.value

    if (needUpdateStyle) {
      var list = this.props.calendar.list
      each(this.__DAYS__.children, (el, i) => {
        if (this.props.last.day === list[i].day) {
          list[i].picked = true
          el.setAttribute('picked', '')
        } else {
          list[i].picked = false
          el.removeAttribute('picked')
        }
      })
    }
  }

  _renderCalendar() {
    var { calendar, max, min, last } = this.props
    calendar.list = getCalendarTable({ ...calendar, max, min, last })

    this.__CTRL__.children[2].textContent = `${
      calendar.year
    }年${calendar.month + 1}月`

    this.__DAYS__.innerHTML = calendar.list
      .map(
        (it, i) =>
          `<span data-idx="${i}" ${it.picked ? 'picked' : ''} ${
            it.weekend ? 'weekend' : ''
          } ${it.disabled ? 'disabled' : ''}>${it.day}</span>`
      )
      .join('')
  }

  mounted() {
    var label = this.__INPUT__.firstElementChild.assignedNodes()
    while (label.length > 1) {
      this.removeChild(label.pop())
    }
    if (label.length) {
      this.__INPUT__.setAttribute('label', '')
    }

    this.props.calendar = {
      year: today.getFullYear(),
      month: today.getMonth(),
      list: []
    }

    this._renderCalendar()

    this._activeFn = bind(this.__INPUT__, 'click', ev => {
      if (this.props.disabled || this.props.readonly || this.props.active) {
        return
      }
      this.props.active = true

      let { x, y } = this.getBoundingClientRect()

      this.__CALENDAR__.style.cssText = `display:block;left:${x}px;top:${y +
        50}px`
    })

    this._bubbleFn = ebind(this, 'click')
    this._inactiveFn = bind(document, 'click', ev => {
      this.__CALENDAR__.style.cssText = ''
      this.props.active = false
    })

    this._ctrlFn = bind(this.__CTRL__, 'click', ev => {
      let {
        calendar: { year, month },
        max,
        min
      } = this.props
      if (ev.target.tagName === 'WC-ICON') {
        let act = ev.target.is
        // log(ev.target, act)
        switch (act) {
          case 'left':
            month--
            if (month < 0) {
              month = 11
              year--
            }
            break
          case 'right':
            month++
            if (month > 11) {
              month = 0
              year++
            }
            break
          case 'dbl-left':
            year--
            break
          case 'dbl-right':
            year++
            break
        }
        if (isLimited({ max, min }, { year, month }) === true) {
          return this._tips()
        }
        this.props.calendar.month = month
        this.props.calendar.year = year
        this._renderCalendar()
      }
    })

    this._pickFn = bind(this.__DAYS__, 'click', ev => {
      if (ev.target.tagName === 'SPAN') {
        let { calendar, last } = this.props
        let item = calendar.list[ev.target.dataset.idx]
        if (
          item.disabled ||
          (last &&
            calendar.year === last.year &&
            calendar.month === last.month &&
            item.day === last.day)
        ) {
          return
        }

        this._updateValue(item._, true)
        nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
        this.dispatchEvent(
          new CustomEvent('pick', {
            detail: { value: this.value, _: item._ }
          })
        )
        this._inactiveFn()
      }
    })
  }

  unmount() {
    unbind(this.__INPUT__, 'click', this._activeFn)
    unbind(this, 'click', this._bubbleFn)
    unbind(document, 'click', this._inactiveFn)
    unbind(this.__CTRL__, 'click', this._ctrlFn)
    unbind(this.__DAYS__, 'click', this._pickFn)
  }

  watch(name, old, val) {
    if (old === val) {
      return
    }
    switch (name) {
      // label和placeholder 功能相同
      case 'label':
      case 'placeholder':
        this.__INPUT__.setAttribute('placeholder', val)
        break

      case 'format':
        if (val) {
          this.props.format = val
        }
        break

      case 'max-date':
        if (val) {
          let tmp = new Date(val)
          if (tmp.getFullYear()) {
            this.props.max = {
              year: tmp.getFullYear(),
              month: tmp.getMonth(),
              day: tmp.getDate()
            }
            this._renderCalendar()
          }
        }
        this.removeAttribute('max-date')
        break

      case 'min-date':
        if (val) {
          let tmp = new Date(val)
          if (tmp.getFullYear()) {
            this.props.min = {
              year: tmp.getFullYear(),
              month: tmp.getMonth(),
              day: tmp.getDate()
            }
            this._renderCalendar()
          }
        }
        this.removeAttribute('min-date')
        break

      case 'value':
        this.value = val
        break

      case 'readonly':
      case 'disabled':
        if (val === '') {
          this[name] = true
        }
        break
    }
  }
}
</script>