目次
はじめに
今回は「V-Calendar」のdatepickerで指定の日付を選択できないようにする方法を記事にしたいと思います。
「V-Calendar」のdatepickerの使い方は以下を参考にしてください。
環境
Vue.js: 2.6.10
v-calendar: 0.9.7
導入手順
「V-Calendar」には、入力を制限するに2通りの方法があります。
1. 除外する :disabled-dates
<v-date-picker :disabled-dates="dates"
:mode="mode"
v-model="selectedDate"></v-date-picker>
new Vue({
el: '#app',
data: {
dates: {
weekdays: [1, 7]
},
mode: 'single',
selectedDate: new Date()
}
});
2. 許可する :available-dates
<v-date-picker :available-dates="dates"
:mode="mode"
v-model="selectedDate"></v-date-picker>
new Vue({
el: '#app',
data: {
dates: {
weekdays: [1, 7]
},
mode: 'single',
selectedDate: new Date()
}
});
設定値
:disabled-dates :available-datesの設定値になります。
設定例
data:{
dates: {
days: 1 // or [1,2,3]
weekdays: 1 // or [1, 2 3]
ordinalWeekdays: {
key: 1,
value: 1 // or [1,2,3]
},
weeks: 1// or [1,2,3]
months: 1 //or [1,2,3],
years: 2018 // or [2018, 2019, 2020],
dailyInterval: 1,
weeklyInterval: 1,
monthlyInterval: 1,
yearlyInterval: 1
}
}
一覧
| 名 | 説明 | 型 |
|---|---|---|
| days | 月の始まりまたは終わりからの日数。 | Number, Array |
| weekdays | 曜日 | Number, Array |
| ordinalWeekdays | 月の始めまたは終わりからの平日の序数位置。 | Object (key: Number / value: Number, Array) |
| weeks | 月の初めまたは終わりからの週番号。 | Number, Array |
| months | 年の月 | Number, Array |
| years | 年数 | Number, Array |
| dailyInterval | 開始日からの日数（または開始日が指定されていない場合は本日）。 | Number |
| weeklyInterval | 開始日（または今日）からの週数。 | Number |
| monthlyInterval | 開始日（または今日）からの経過月数。 | Number |
| yearlyInterval | 開始日（または今日）からの年数。 | Number |
■ドキュメントはこちら
https://vcalendar.netlify.com/api/date-patterns.html#date-patterns
まとめ
「V-Calendar」には、入力を制限する方法でした。
2通りの設定方法がありました。
どちらを使うかは、ケースバイケースとなります。
今日はこの辺でー
