[Bug Report]datePicker组件不能正常使用

[se1120an]

Environment

谷歌浏览器允许的vue3项目

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/date-picker

Steps to reproduce

viewuiplus.min.js:44 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'slice')

What is expected?

能尽快解决

What is actually happening?

尽快解决bug，回出详细解决方案

[dosubot[bot]]

@se1120an 你好，我是Dosu。我是一个可以帮助您解决错误、回答问题并成为贡献者的机器人。在等待人类维护者时，我会尽力帮助您。

I found a similar closed issue that might be relevant to your problem: [Bug Report] View UI Plus DatePicker 日期选择器 不显示，并浏览器报错.

To resolve the TypeError "Cannot read properties of null (reading 'slice')" in the datePicker component, ensure that the internalValue is properly initialized and handled. The error likely occurs because internalValue is null or not properly set when the slice method is called.

In the data function, ensure that internalValue is initialized correctly:

data () {
    const isRange = this.type.includes('range');
    const emptyArray = isRange ? [null, null] : [null];
    const initialValue = isEmptyArray((isRange ? this.modelValue : [this.modelValue]) || []) ? emptyArray : this.parseDate(this.modelValue);
    const focusedTime = initialValue.map(extractTime);
    return {
        prefixCls: prefixCls,
        showClose: false,
        visible: false,
        internalValue: initialValue,
        disableClickOutSide: false,
        disableCloseUnderTransfer: false,
        selectionMode: this.onSelectionModeChange(this.type),
        forceInputRerender: 1,
        isFocused: false,
        focusedDate: initialValue[0] || this.startDate || new Date(),
        focusedTime: {
            column: 0,
            picker: 0,
            time: focusedTime,
            active: false
        },
        internalFocus: false,
        isValueNull: false,
        timeSpinnerList: [],
        panelTableList: []
    };
}

Additionally, ensure that internalValue is always an array before calling slice on it. You can add a check in the publicVModelValue computed property:

computed: {
    publicVModelValue(){
        if (this.multiple){
            return Array.isArray(this.internalValue) ? this.internalValue.slice() : [];
        } else {
            const isRange = this.type.includes('range');
            let val = this.internalValue.map(date => date instanceof Date ? new Date(date) : (date || ''));
            if (this.type.match(/^time/)) val = val.map(this.formatDate);
            return (isRange || this.multiple) ? val : val[0];
        }
    }
}

By ensuring internalValue is properly initialized and checked, you can avoid the TypeError when calling slice ^[1].

To continue talking to Dosu, mention @dosu.