[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]

I found a similar closed issue: [Bug Report] View UI Plus DatePicker 日期选择器 不显示，并浏览器报错. This issue was referenced by: [Bug Report]datePicker组件不能正常使用, which was last updated on September 19, 2024.

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.