更新记录

1.0.1（2024-03-04）

代码优化

1.0.0（2024-03-04）

vue3版本发布

平台兼容性

vue2版本点击下方蓝色链接

点击跳转至vue2版本

hy-date-range-btn-v3 支持v-model 支持反显

项目依耐dayjs 请先安装dayjs npm i dayjs

// 页面显示的日期时间格式(参照dayjs配置即可)
showFormat: {
    type: String,
    default: () => {
        return 'YYYY-MM-DD'
    }
},
// 提交后台的时间格式(参照dayjs配置即可)
valueFormat: {
    type: String,
    default: () => {
        return 'YYYY-MM-DD HH:mm:ss'
    }
}

自定义按钮选项 可自己在utils.js中扩展 可通过配置disabled为true禁用按钮选项

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周'
    }
]

按钮的选中颜色可自己更改

    .btn-selected {
    background: #9d322d;
    color: #FFFFFF;
}