vue日期設置范圍有默認值不生效如何解決

這篇文章主要介紹了vue日期設置范圍有默認值不生效如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue日期設置范圍有默認值不生效如何解決文章都會有所收獲，下面我們一起來看看吧。

一、問題描述

在 Vue.js 中，使用日期組件時，可以通過設置 picker-options 中的屬性來實現日期范圍的限制。例如，可以通過設置 disabledDate 或者 shortcuts 來規定日期范圍等限制條件，如下所示：

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

其中，pickerOptions 是一個對象，可以設置 disabledDate、shortcuts 等屬性，如下所示：

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: ''
    }
}

上述代碼中，shortcuts 和 disabledDate 都是設置日期范圍的屬性。其中，shortcuts 可以設置三個快捷日期范圍，分別為最近一周、最近一個月、最近三個月。而 disabledDate 則是限制日期的取值范圍，這里設置的是不能晚于今天或早于昨天。

但是，在實際的開發過程中，可能會發現無論怎么設置，始終無法達到我們想要的效果，這是怎么回事呢？

二、解決方案

針對上述問題，我們需要檢查代碼中是否有其他設置日期范圍的屬性或方法，如果有，就需要將這些屬性或方法注釋或者刪除掉，然后再進行測試，看是否可以達到我們想要的效果。

同時，我們還需要注意日期格式的問題。在使用日期組件時，日期格式需要和設置的日期范圍格式保持一致，否則也會導致設置日期范圍失效的問題。例如，如果日期格式為 'yyyy-MM-dd'，則設置的日期范圍也應該為 'yyyy-MM-dd'。具體的代碼可以參考下方：

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: ''
    }
}

上述代碼中，我們添加了 format 屬性來設置日期的格式，同時也設置了日期范圍，時間不能早于 2010 年 1 月 1 日，也不能晚于今天。

關于“vue日期設置范圍有默認值不生效如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue日期設置范圍有默認值不生效如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。