忘れないように記録しとこ

カバの樹

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

完全版を表示する

はじめに

 

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

 

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

https://www.kabanoki.net/3905/

 

環境

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

今日はこの辺でー

  • B!