How to solve the problem that the default value of vue date setting range does not take effect-Front-end Q&A-php.cn

How to solve the problem that the default value of vue date setting range does not take effect

PHPz

Release： 2023-04-12 11:24:19

Original

1682 people have browsed it

Vue.js is a very popular JavaScript framework that provides many conveniences for developing dynamic user interfaces. The date component is one of the more commonly used components. However, sometimes, you may encounter some problems when using the date component, such as setting the date range does not work. This article will provide a detailed explanation and solution to this problem.

1. Problem description

In Vue.js, when using the date component, you can limit the date range by setting the properties in picker-options. For example, you can specify date range and other restrictions by setting disabledDate or shortcuts, as shown below:

<el-date-picker
    v-model="dateValue"
    :picker-options="pickerOptions">
</el-date-picker>

Copy after login

Among them, pickerOptions is an object, and you can set disabledDate, shortcuts and other attributes, as shown below:

data () {
    return {
        pickerOptions: {
            shortcuts: [
                {
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                },
                {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                },
                {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }
            ],
            disabledDate (time) {
                return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 8.64e7
            }
        },
        dateValue: ''
    }
}

Copy after login

In the above code, shortcuts and disabledDate are both attributes that set the date range. Among them, shortcuts can set three shortcut date ranges, namely the last week, the last month, and the last three months. And disabledDate limits the value range of the date. What is set here is that it cannot be later than today or earlier than yesterday.

However, in the actual development process, we may find that no matter how we set it, we can never achieve the effect we want. What is going on?

2. Solution

In view of the above problem, we need to check whether there are other attributes or methods for setting the date range in the code. If so, these attributes or methods need to be commented out or deleted. , and then test to see if we can achieve the effect we want.

At the same time, we also need to pay attention to the date format. When using the date component, the date format needs to be consistent with the set date range format, otherwise it will also cause the problem of invalidating the set date range. For example, if the date format is 'yyyy-MM-dd', the set date range should also be 'yyyy-MM-dd'. The specific code can be found below:

data () {
    return {
        pickerOptions: {
            shortcuts: [
                {
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                },
                {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                },
                {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }
            ],
            disabledDate (time) {
                const startTime = new Date('2010/1/1').getTime()
                const endTime = new Date().getTime()
                return time.getTime() < startTime || time.getTime() > endTime
            },
            format: 'yyyy-MM-dd'
        },
        dateValue: ''
    }
}

Copy after login

In the above code, we added the format attribute to set the date format, and also set the date range. The time cannot be earlier than January 1, 2010, nor later than January 1, 2010. on today.

3. Summary

When using the date component of Vue.js, we need to pay attention to the impact of other codes on the date range, so as not to affect the effect we want to achieve. At the same time, when setting the date range, you also need to pay attention to the date format to ensure that the date range can be set correctly. Hope this article is helpful to you.

The above is the detailed content of How to solve the problem that the default value of vue date setting range does not take effect. For more information, please follow other related articles on the PHP Chinese website!