「V-Calendar」の日付の入力制限する方法

はじめに

 

今回は「V-Calendar」のdatepickerで指定の日付を選択できないようにする方法を記事にしたいと思います。

 

「V-Calendar」のdatepickerの使い方は以下を参考にしてください。

VueJS製datepickerにもなる「V-Calendar」の使い方

 

環境

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通りの設定方法がありました。
どちらを使うかは、ケースバイケースとなります。

今日はこの辺でー