DatePickFlexend

该组件是基于 view-design 的老板本 iview 中的DatePick开发的，只是在原有的功能上做了少量的更改，找遍全网没有一个日期组件是定位日期在右边的，但是作为使用体验上来说，尤其是中台系统，选择是时间都是从现在向过去选择日期的，所以产生了这个组件。

TIP

警示信息

<template>
    <div>
        <date-pick-flexend
            type="daterange"
            :value="datetime"
            :options="datetimeOption"
            confirm
            split-panels
            placement="bottom-end"
            placeholder="请选择查询日期范围"
            style="width:210px;margin-left:8px" />
    </div>
</template>
<script>
function formatDate (date, fmt) {
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds(),
      'q+': Math.floor((date.getMonth() + 3) / 3),
      S: date.getMilliseconds()
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
    }
    return fmt
}

const shortcuts = [
    {
      text: '今天',
      value () {
        const start = new Date()
        const end = new Date()
        return [start, end]
      },
      onClick: () => {
        const shortCut = document.querySelectorAll('.ivu-picker-panel-shortcut')
        const len = shortCut.length
        for (let i = 0; i < len; i++) {
          shortCut[i].style.background = 'none'
        }
        shortCut[0].style.backgroundColor = '#e8eaec'
      }
    },
    {
      text: '昨天',
      value () {
        const start = new Date()
        const end = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24)
        end.setTime(end.getTime() - 3600 * 1000 * 24)
        return [start, end]
      },
      onClick: () => {
        const shortCut = document.querySelectorAll('.ivu-picker-panel-shortcut')
        const len = shortCut.length
        for (let i = 0; i < len; i++) {
          shortCut[i].style.background = 'none'
        }
        shortCut[1].style.backgroundColor = '#e8eaec'
      }
    },
    {
      text: '本周',
      value () {
        const start = new Date()
        const end = new Date()
        let week = new Date().getDay()
        week = week > 0 ? week - 1 : 6
        start.setTime(start.getTime() - 3600 * 1000 * 24 * week)
        return [start, end]
      },
      onClick: () => {
        const shortCut = document.querySelectorAll('.ivu-picker-panel-shortcut')
        const len = shortCut.length
        for (let i = 0; i < len; i++) {
          shortCut[i].style.background = 'none'
        }
        shortCut[2].style.backgroundColor = '#e8eaec'
      }
    },
    {
      text: '近7天',
      value () {
        const today = formatDate(new Date(), 'yyyy/MM/dd 00:00:00')
        const end = new Date(today)
        const start = new Date()
        end.setTime(end.getTime())
        start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
        return [start, end]
      },
      onClick: () => {
        const shortCut = document.querySelectorAll('.ivu-picker-panel-shortcut')
        const len = shortCut.length
        for (let i = 0; i < len; i++) {
          shortCut[i].style.background = 'none'
        }
        shortCut[3].style.backgroundColor = '#e8eaec'
      }
    },
    {
      text: '上周',
      value () {
        const start = new Date()
        const end = new Date()
        let week = new Date().getDay()
        week = week > 0 ? week : 7
        end.setTime(end.getTime() - 3600 * 1000 * 24 * week)
        start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
        return [start, end]
      },
      onClick: () => {
        const shortCut = document.querySelectorAll('.ivu-picker-panel-shortcut')
        const len = shortCut.length
        for (let i = 0; i < len; i++) {
          shortCut[i].style.background = 'none'
        }
        shortCut[4].style.backgroundColor = '#e8eaec'
      }
    },
    {
      text: '本月',
      value () {
        const first = formatDate(new Date(), 'yyyy/MM/01')
        const start = new Date(first)
        const end = new Date()
        return [start, end]
      },
      onClick: () => {
        const shortCut = document.querySelectorAll('.ivu-picker-panel-shortcut')
        const len = shortCut.length
        for (let i = 0; i < len; i++) {
          shortCut[i].style.background = 'none'
        }
        shortCut[5].style.backgroundColor = '#e8eaec'
      }
    },
    {
      text: '上个月',
      value () {
        let year = formatDate(new Date(), 'yyyy')
        let month = formatDate(new Date(), 'MM')
        if (month > 1) month--
        else {
          month = 12
          year--
        }
        const max = new Date(year, month, 0).getDate()
        const start = new Date(`${year}/${month}/01`)
        const end = new Date()
        end.setTime(start.getTime() + 3600 * 1000 * 24 * max - 1000)
        return [start, end]
      },
      onClick: () => {
        const shortCut = document.querySelectorAll('.ivu-picker-panel-shortcut')
        const len = shortCut.length
        for (let i = 0; i < len; i++) {
          shortCut[i].style.background = 'none'
        }
        shortCut[6].style.backgroundColor = '#e8eaec'
      }
    }
]
export default {
    data () {
        return {
            datetime: ['2022-04-01', '2022-04-11'],
            datetimeOption: {
                shortcuts,
                disabledDate (date) {
                return date && date.valueOf() > Date.now()
                }
            }
        }
    }
}
</script>

Expand Copy Copy

参数使用

参数	说明	类型	可选值	默认值	是否必传
type	类型	String	range,date-pick,time-pick	range	是

事件

方法