Vue Datepicker是一個優秀的日期選擇插件,它提供多種界面布局和可自定義的日期格式和顯示名稱。同時,它內置了日期加減功能,可以方便地讓用戶輸入正確的日期。
使用Vue Datepicker進行日期加減時,需要先在Vue組件中引入Datepicker組件:
<template> <div> <datepicker v-model="date"></datepicker> <button @click="addDay">+1 Day</button> <button @click="addWeek">+1 Week</button> </div> </template> <script> import Datepicker from 'vue2-datepicker' import 'vue2-datepicker/index.css' export default { components: { Datepicker }, data () { return { date: new Date() } }, methods: { addDay () { this.date.setDate(this.date.getDate() + 1) }, addWeek () { this.date.setDate(this.date.getDate() + 7) } } } </script>
在上述代碼中,我們引入了Datepicker組件,并在組件的data中設置了一個date變量作為日期的顯示和計算。addDay和addWeek方法用于日期的加減計算,使用setDate方法對date進行修改即可。通過點擊兩個button按鈕,可以方便地實現日期加1天和加1周的功能。