Yb-components
  • 组件
  • 数据录入
zougt
2022-08-24

YbRangeDatepicker 日期范围

与 el-datepicker 不同的是， yb-range-datepicker 范围日期分开选择，操作方式不同

# 基本使用

至
value：[]
<template>
    <div>
        <yb-range-datepicker v-model="dateRange" />
        <div style="margin-top:10px">value：{{dateString}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dateRange: [],
            };
        },
        computed: {
            dateString() {
                return JSON.stringify(this.dateRange);
            },
        },
        methods: {},
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
显示 复制

# 范围完整值

只选一个值时，第二个值取间隔100年
至
value：[]
只选一个值时，第二个值取间隔1年，并且显示到框内
至
value：[]
只选一个值时，第二个值总是间隔1个月
至
value：[]
<template>
    <div>
        <div style="margin:10px 0">只选一个值时，第二个值取间隔100年</div>
        <yb-range-datepicker v-model="dateRange" intactBoth />
        <div style="margin:10px 0">value：{{dateString}}</div>
        <div style="margin:10px 0">
            只选一个值时，第二个值取间隔1年，并且显示到框内
        </div>
        <yb-range-datepicker
            v-model="dateRange2"
            intactBoth
            :intactOption="{value:1,unit:'year',visible:true}"
        />
        <div style="margin:10px 0">value：{{dateString2}}</div>
        <div style="margin:10px 0">只选一个值时，第二个值总是间隔1个月</div>
        <yb-range-datepicker
            v-model="dateRange3"
            intactBoth
            :intactOption="{value:1,unit:'month',visible:true,always:true}"
        />
        <div style="margin:10px 0">value：{{dateString3}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dateRange: [],
                dateRange2: [],
                dateRange3: [],
            };
        },
        computed: {
            dateString() {
                return JSON.stringify(this.dateRange);
            },
            dateString2() {
                return JSON.stringify(this.dateRange2);
            },
            dateString3() {
                return JSON.stringify(this.dateRange3);
            },
        },
        methods: {},
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
显示 复制

# 带快捷选项

  • 注意：默认显示全部内置快捷选项，当设置 intactOption.always 为 true 时，快捷选项需要手动配置
日期快捷
至
value：[]
月份快捷
至
value：[]
年份快捷
至
value：[]
<template>
    <div>
        <div style="margin:10px 0">日期快捷</div>
        <yb-range-datepicker
            v-model="dateRange"
            :shortcuts="[
                    'today',
                    {
                        text: '最近半年dayjs',
                        intervalOption: { 
                            /**
                             * 示例中已将 dayjs 绑定至 Vue 实例
                             * 项目中使用需添加 import dayjs from 'dayjs';
                             */
                            start: function () {
                                return dayjs().subtract('6', 'month').add('1', 'day');
                            },
                            end: function () {
                                return dayjs();
                            },
                        },
                    },
                    {
                        text: '最近半年Date',
                        intervalOption: { 
                            start: function () {
                                let date = new Date();
                                return new Date(date.getFullYear(), date.getMonth() - 6, date.getDate() + 1);
                            },
                            end: function () {
                                return new Date();
                            },
                        },
                    },
                    {
                        text: '指定String',
                        intervalOption: { 
                            start: function () {
                                return '2022-11-11';
                            },
                            end: function () {
                                return '2022/12/12';
                            },
                        },
                    },
                ]"
        />
        <div style="margin-top:10px">value：{{dateString}}</div>
        <div style="margin:10px 0">月份快捷</div>
        <yb-range-datepicker
            v-model="monthRange"
            :datePickerProps="{ type: 'month', format: 'yyyy年MM月', valueFormat: 'yyyy-MM' }"
            :shortcuts="[
                    'currentMonth',
                    'lastMonth',
                    'recentHalfYear',
                    'currentQuarter',
                    'lastQuarter',
                    'currentYearFirstQuarter',
                    'currentYearTwoQuarter',
                    'currentYearThreeQuarter',
                ]"
        />
        <div style="margin-top:10px">value：{{monthString}}</div>
        <div style="margin:10px 0">年份快捷</div>
        <yb-range-datepicker
            v-model="yearRange"
            :datePickerProps="{ type: 'year', format: 'yyyy年', valueFormat: 'yyyy' }"
            :shortcuts="[
                    'currentYear',
                    'lastYear',
                ]"
        />
        <div style="margin-top:10px">value：{{yearString}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dateRange: [],
                monthRange: [],
                yearRange: [],
            };
        },
        computed: {
            dateString() {
                return JSON.stringify(this.dateRange);
            },
            monthString() {
                return JSON.stringify(this.monthRange);
            },
            yearString() {
                return JSON.stringify(this.yearRange);
            },
        },
        methods: {},
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
显示 复制

# Props

参数 说明 类型 可选值 默认值
value/v-model 绑定值 array - -
datePickerProps el-date-picker (opens new window)对应的属性 object - {type: 'date', format: 'yyyy 年 MM 月 dd 日', valueFormat: 'yyyy-MM-dd', startPlaceholder: '选择开始日期', endPlaceholder: '选择结束日期'}
separator 分隔符 string - 至
intactBoth 值的完整性，开启后，与 intactOption 结合保证输出的 value 是完整的两个值 boolean - false
intactOption 当 intactBoth 开启后，其中有一个输入框没有值时，会自动获取完整的值，在已有值的输入框增加/减去一定时间得到完整的范围值，支持的单位请查看dayjs 的增加 (opens new window) object - {value: 100,unit: 'year',always:false,visible: false}
intactOption.visible 当 intactBoth 开启后，是否显示到输入框 boolean - false
intactOption.always 当 intactBoth 开启后，范围值总是保持固定间隔 boolean - false
shortcuts 快捷选项，当 intactOption.always 为 true 时，需自行配置，默认显示全部内置快捷选项 Shortcuts，也可自定义配置 Shortcuts Item object[] | string[] | false - []

# Shortcuts

选项 说明 类型
today 今天 Shortcuts Item
currentWeek 本周 Shortcuts Item
lastWeek 上周 Shortcuts Item
currentMonth 本月 Shortcuts Item
lastMonth 上个月 Shortcuts Item
currentQuarter 本季度 Shortcuts Item
lastQuarter 上季度 Shortcuts Item
currentYearFirstQuarter 今年第一季度 Shortcuts Item
currentYearTwoQuarter 今年前两季度 Shortcuts Item
currentYearThreeQuarter 今年前三季度 Shortcuts Item
currentYear 今年 Shortcuts Item
lastYear 去年 Shortcuts Item
currentYear2Today 今年至今 Shortcuts Item
recentWeek 最近一周 (暂不启用) Shortcuts Item
recentMonth 最近一个月(暂不启用) Shortcuts Item
recentYear 最近一年 (暂不启用) Shortcuts Item
recentHalfYear 最近半年 (暂不启用) Shortcuts Item

# Shortcuts Item

参数 说明 类型
text 标题文本 string
intervalOption 计算时间配置 object
intervalOption.start 开始时间 () => Date | string | dayjs 实例
intervalOption.end 结束时间 () => Date | string | dayjs 实例

# Events

参数 说明 回调参数
change 选定值改变时触发 value
上次更新: 2024/05/07, 09:31:21
YbRangeWrapper 范围结构
YbRange 范围

← YbRange 范围→

Theme by Vdoing | Copyright © 2021-2025 YB-GZ | MIT License