9.14 日历时间选择器（Midea Range Picker）

APP内置组件，可直接在template中使用，不需要import导入和注册 。

实例

基础用法

<template>
    <midea-range-picker
            class="sheet_picker"
            :style="{ height: pinkerHeight + 'px' }"
            :config="rangePinkerConfig"
            @mideaPickerChange="onMideaPickerChange"
      ></midea-range-picker>
</template>
<script>
export default {
    data() {
        return {
            pinkerHeight:650,
            rangePinkerConfig:{
                weeks: ['日', '一', '二', '三', '四', '五', '六'], // 多语言-周
                day: '日', // 多语言-日
                month: '月', // 多语言-月
                year: '年', // 多语言-年
                startTime: '起始时间', // 开始时间多语言
                endTime: '结束时间', // 结束时间多语言
                textColor: '#FFF', // 选中的字体颜色 font-size: 40px;
                backgroundColor: '#00A0A6', // 选中背景色
                betweenColor: '#E5F5F6', // 两个日期之间连接处的背景颜色
                betweenTextColor: '#00A0A6', // 两个日期之间连接处文字的颜色
                type: 2, // 0：年，1：月，2：日
                start: '2024-01-01', //  可选择的开始日期，格式 YYYY-MM-DD
                end: '2024-03-30', //  可以选择的结束日期
                maxLength: 7, // 各个维度最多可以选择多少个 开始结束间隔7天
                pickStart: '2024-02-01', // 选中的开始日期
                pickEnd: '2024-02-07', // 选中的结束日期
                selectorStartTime: '2021-01-01', // 组件渲染的开始时间
                selectorEndTime: '2024-03-30' //  组件渲染的结束时间
            }
        }
    },
    methods:{
        // 时间改变产生的回调
        onMideaPickerChange(event){
             console.log(JSON.stringify(event));
             console.log('选择的开始时间--',event.pickStart)
             console.log('选择的结束时间--',event.pickEnd)
        },
    }
}
</script>

Attributes

Prop	Type	Required	Default	Description
config	Object	Y	-	初始化配置对象，示例变量为 rangePinkerConfig（注1）

注1

Prop	Type	Required	Default	Description
weeks	Array	Y	-	一周的多语言显示
day	String	Y	-	日的多语言显示
month	String	Y	-	月的多语言显示
year	String	Y	-	年的多语言显示
startTime	String	Y	-	起始的多语言显示
endTime	String	Y	-	结束的多语言显示
textColor	String	Y	-	选中的字体颜色
backgroundColor	String	Y	-	背景色
betweenColor	String	Y	-	两个日期之间连接处的背景颜色
betweenTextColor	String	Y	-	两个日期之间连接处文字的颜色
type	Number	Y	-	0：年，1：月，2：日
start	String	Y	-	可选择的开始日期，格式 YYYY-MM-DD
end	String	Y	-	可以选择的结束日期
maxLength	Number	Y	-	各个维度最多可以选择多少个 开始结束间隔7天
pickStart	String	Y	-	选中的开始日期
pickEnd	String	Y	-	选中的结束日期
selectorStartTime	String	Y	-	组件渲染的开始时间
selectorEndTime	String	Y	-	组件渲染的结束时间
normalTextColor	String	Y	-	正常文字颜色
dayWeekBgColor	String	Y	-	星期文字颜色
dayWeekLineColor	String	Y	-	星期文字下划线颜色
stxtDayColor	String	Y	-	年份标题颜色
bigDesBgColor	String	Y	-	内置文字背景色
tvChooseDateColor	String	Y	-	星期上年份文字颜色

Events

事件名称	说明	回调参数
mideaPickerChange	日期范围变化回调	event 为配置对象，pickStart 为开始日期，pickEnd 为结束日期