5.日历时间选择器(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代表普通picker，0代表年, 1代表月，2代表日，
                start: '2024-01-01', //  可以选择的开始日期 如果是时间/日期picker类则传值，格式:"2021-03-01"，普通类型picker无值， 可回溯到设备最早配网时间
                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){
             this.$bridge.log(JSON.stringify(event));
             console.log('选择的开始时间--',event.pickStart)
             console.log('选择的结束时间--',event.pickEnd)
        },
    }
}
</script>

Attributes

Prop	Type	Required	Default	Description
rangePinkerConfig	Object	Y	-	默认初始化配置（注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代表普通picker，0代表年, 1代表月，2代表日，
start	String	Y	-	可以选择的开始日期 如果是时间/日期picker类则传值，格式:"2021-03-01"，普通类型picker无值， 可回溯到设备最早配网时间
end	String	Y	-	可以选择的结束日期
maxLength	Number	Y	-	各个维度最多可以选择多少个 开始结束间隔7天
pickStart	String	Y	-	选中的开始日期
pickEnd	String	Y	-	选中的结束日期
selectorStartTime	String	Y	-	组件渲染的开始时间
selectorEndTime	String	Y	-	组件渲染的结束时间

Events

事件名称	说明	回调参数
mideaPickerChange