基本用法

<template>
  <view style="padding: 40rpx;">
    <view>每行4个</view>
    <ex-date-range v-model="dateRange"></ex-date-range>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [],
      list: [
        {
          type: "day",
          nums: -2,
          label: "前天",
        },
        {
          type: "day",
          nums: -1,
          label: "昨天",
        },
        {
          type: "day",
          nums: 0,
          label: "今天",
        },
        {
          type: "week",
          nums: 0,
          label: "本周",
        },
        {
          type: "week",
          nums: -1,
          label: "上周",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped></style>

属性

属性名	类型	默认值	可选值	说明
showFormat	String	'YYYY-MM-DD'		页面显示的日期时间格式(参照 dayjs 配置即可)
valueFormat	String	'YYYY-MM-DD HH:mm:ss'		提交后台的时间格式(参照 dayjs 配置即可)
defaultTime	Array	['00:00:00', '23:59:59']		默认的起止时间数组
lineNumber	Number	3		每行按钮个数
gap	String	12px		按钮间距
selectedStyle	Object	{ background: '#409eff',color: '#FFFFFF',border: 'solid 1rpx #409eff'}		自定义按钮选中样式
unSelectedStyle	Object	{background: '#F5F5F5',color: '#4D4D4D',border: 'solid 1rpx #F5F5F5'}		自定义按钮未选中样式
list	Array	详情见 list 配置项		按钮选项数组(可自定义配置)
weekStart	Number	0	0,1,2,3,4,5,6	一周的起始日 默认周天
startPlaceholder	String	请选择开始时间		开始时间未选择时候的提示文字
endPlaceholder	String	请选择结束时间	0,1,2,3,4,5,6	结束时间未选择时候的提示文字

list 配置项(按钮组)

属性名	类型	说明
type	String	day:天，week:周， month：月， quarter：季度， year：年， nextDay：近多少天
nums	Number	与 type 搭配使用
label	Number	显示的 label

当 num=0 （type=day 表示当天， type=week 表示本周， type=month 表示本月）

当 num=-1 （type=day 表示昨天， type=week 表示上周， type=month 表示上月）

当 num=1 （type=day 表示明天， type=week 表示下周， type=month 表示下月）

const dataList = [
  {
    type: "day",
    nums: -2,
    label: "前天",
  },
  {
    type: "day",
    nums: -1,
    label: "昨天",
  },
  {
    type: "day",
    nums: 0,
    label: "今天",
  },
  {
    type: "week",
    nums: 0,
    label: "本周",
  },
  {
    type: "week",
    nums: -1,
    label: "上周",
  },
  {
    type: "week",
    nums: 1,
    label: "下周",
  },
  {
    type: "month",
    nums: 0,
    label: "本月",
  },
  {
    type: "month",
    nums: 1,
    label: "下月",
  },
  {
    type: "month",
    nums: -1,
    label: "上月",
  },
  {
    type: "quarter",
    nums: 0,
    label: "本季度",
  },
  {
    type: "quarter",
    nums: 1,
    label: "下季度",
  },
  {
    type: "quarter",
    nums: -1,
    label: "上季度",
  },
  {
    type: "year",
    nums: 0,
    label: "本年度",
  },
  {
    type: "year",
    nums: 1,
    label: "下年度",
  },
  {
    type: "year",
    nums: -1,
    label: "上年度",
  },
  {
    type: "nextDay",
    nums: -2,
    label: "近3天",
  },
  {
    type: "nextDay",
    nums: -6,
    label: "近7天",
  },
  {
    type: "nextDay",
    nums: -14,
    label: "近15天",
  },
  {
    type: "nextDay",
    nums: -29,
    label: "近30天",
  },
  {
    type: "nextDay",
    nums: -59,
    label: "近60天",
  },
  {
    type: "nextDay",
    nums: -89,
    label: "近90天",
  },
  {
    type: "nextDay",
    nums: -20,
    label: "近3周",
  },
  {
    type: "nextDay",
    nums: -34,
    label: "近5周",
  },
  {
    type: "nextDay",
    nums: -48,
    label: "近7周",
  },
];

事件

事件名	说明
itemClick	选项点击事件