From 001d75afae3bc71cf579e7c5a604b49c66cf7d6a Mon Sep 17 00:00:00 2001
From: Vladimir Litvinov <vlitvinov@dealersocket.com>
Date: Fri, 22 Jan 2021 23:05:49 +0200
Subject: [PATCH] fix(disabled-dates): update docs

---
 docs/config.md   |  9 ++++++++-
 docs/examples.md | 37 ++++++++++++++++++++++++++++++++++++-
 docs/index.md    |  3 ++-
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/docs/config.md b/docs/config.md
index 032baf4..2aa8c2b 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -22,6 +22,13 @@ Upper limit (not inclusive) for available dates for picking. All dates above tha
 
 Lower limit (not inclusive) for available dates for picking. All dates below that limit will not be selectable.
 
+### `disabledDates`
+
+- Type: `{ dates: Date[] }`
+- Required: no
+
+All dates listed in the dates array will not be selectable.
+
 ### `startingView`
 
 - Type: `'day' | 'month' | 'year'`
@@ -157,4 +164,4 @@ const styleObj = computed(() =>
   <div class="language-json">
     <pre><code>{{ styleObj }}</code></pre>
   </div>
-</details>
\ No newline at end of file
+</details>
diff --git a/docs/examples.md b/docs/examples.md
index a75a0f6..22049d1 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -11,6 +11,10 @@ const example2 = ref(new Date())
 const example2_from = ref(add(new Date(), { days: -7 }))
 const example2_to = ref(add(new Date(), { days: 7 }))
 
+// Disabled dates example
+const pickedDate = ref(new Date())
+const disabledDate = ref(add(new Date(), { days: 1 }))
+
 // Ex 3
 const example3 = ref(new Date())
 const startingView = ref('day')
@@ -81,6 +85,37 @@ Result:
   ```
 </details>
 
+## Disabled dates
+
+Settings: 
+
+- Disabled date: <datepicker v-model="disabledDate" />
+
+Result:
+
+<datepicker v-model="pickedDate" :disabledDates="{ dates: [disabledDate] }" />
+
+<details>
+  <summary>Code for this example</summary>
+  
+  ```vue
+  <script setup>
+  import Datepicker from '../src/datepicker/Datepicker.vue'
+  import { ref } from 'vue'
+  import { add } from 'date-fns'
+  const pickedDate = ref(new Date())
+  const disabledDate = ref(add(new Date(), { days: 1 }))
+  </script>
+
+  <template>
+    <datepicker
+      v-model="pickedDate"
+      :disabledDates="{ dates: [disabledDate] }"
+    />
+  </template>
+  ```
+</details>
+
 ## Starting view
 Settings: 
 
@@ -89,4 +124,4 @@ Settings:
 - <label>Starting view: <code>year</code> <input type="radio" v-model="startingView" value="year"></label>
 
 Result:
-<datepicker v-model="example3" :starting-view="startingView" />
\ No newline at end of file
+<datepicker v-model="example3" :starting-view="startingView" />
diff --git a/docs/index.md b/docs/index.md
index ae51bfe..2b5bbeb 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -60,6 +60,7 @@ More in-depth documentation of the props, as well as examples, can be found in [
 |---|---|---|---|
 |`upperLimit`|`Date`||Upper limit for available dates for picking|
 |`lowerLimit`|`Date`||Lower limit for available dates for picking|
+|`disabledDates`|`{ dates: Date[] }`||Dates not available for picking|
 |`startingView`| `'day' | 'month' | 'year'` | `'day'` |View on which the date picker should open. Can be either `year`, `month`, or `day` |
 | `monthHeadingFormat` | `String` | `LLLL yyyy` | `date-fns`-type formatting for a month view heading
 | `weekdayFormat` | `String` | `EE` | `date-fns`-type formatting for a line of weekdays on day view
@@ -69,4 +70,4 @@ More in-depth documentation of the props, as well as examples, can be found in [
 
 ## Styling
 
-Styling is done via CSS variables, which control colors used in the popup. All variables, as well as styling example and playground can be found in [Configuration section](/config#styling-example-and-playground)
\ No newline at end of file
+Styling is done via CSS variables, which control colors used in the popup. All variables, as well as styling example and playground can be found in [Configuration section](/config#styling-example-and-playground)