update docs to describe handling manual date entry with disallowed dates

Author: WickyNilliams

README.md

@@ -603,16 +603,25 @@ Please note that you must provide the entirety of the localization properties in
 
 Duet Date Picker allows you to disable the selection of specific days. Below is an example of a date picker that is disabling weekends.
 
+Be aware, this only disables selection of dates in the popup calendar. You must still handle the case where a user manually enters a disallowed date into the input.
+
 ```html
 <label for="date">Choose a date</label>
 <duet-date-picker identifier="date"></duet-date-picker>
 
 <script>
-  const pickerDisableWeekend = document.querySelector("duet-date-picker")
-
-  pickerDisableWeekend.isDateDisabled = function isWeekend(date) {
+  function isWeekend(date) {
     return date.getDay() === 0 || date.getDay() === 6
   }
+
+  const pickerDisableWeekend = document.querySelector("duet-date-picker")
+  pickerDisableWeekend.isDateDisabled = isWeekend
+
+  pickerDisableWeekend.addEventListener("duetChange", function(e) {
+    if (isWeekend(e.detail.valueAsDate)) {
+      alert("Please select a weekday")
+    }
+  })
 </script>
 ```
 

docs/index.html

@@ -534,22 +534,36 @@ <h2>Required atrribute</h2>
       <label for="dateDisabledWeekend">Choose a date</label>
       <duet-date-picker class="picker-disabled-weekend" identifier="dateDisabledWeekend"></duet-date-picker>
       <script>
-        const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
-
-        pickerDisableWeekend.isDateDisabled = function isWeekend(date) {
+        function isWeekend(date) {
           return date.getDay() === 0 || date.getDay() === 6
         }
+
+        const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
+        pickerDisableWeekend.isDateDisabled = isWeekend
+
+        pickerDisableWeekend.addEventListener("duetChange", function(e) {
+          if (isWeekend(e.detail.valueAsDate)) {
+            alert("Please select a weekday")
+          }
+        })
       </script>
       <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
 &lt;duet-date-picker identifier="date"&gt;&lt;/duet-date-picker&gt;
 
 &lt;script&gt;
-  const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
-
-  pickerDisableWeekend.isDateDisabled = function isWeekend(date) {
+  function isWeekend(date) {
     return date.getDay() === 0 || date.getDay() === 6
   }
-&lt;/script&gt;</code></pre> -->
+
+  const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
+  pickerDisableWeekend.isDateDisabled = isWeekend
+
+  pickerDisableWeekend.addEventListener("duetChange", function(e) {
+    if (isWeekend(e.detail.valueAsDate)) {
+      alert("Please select a weekday")
+    }
+  })
+&lt;/script&gt;</code></pre>-->
       <br />
       <p>
         © 2020 LocalTapiola Services Ltd /

src/index.html

@@ -520,24 +520,42 @@ <h2>Required atrribute</h2>
 &lt;/script&gt;</code></pre>
 
       <h2>Disable selectable days</h2>
+      <p>
+        This only disables selection of dates in the popup calendar. You must still handle the case where a user enters
+        a disallowed date into the input.
+      </p>
       <label for="dateDisabledWeekend">Choose a date</label>
       <duet-date-picker class="picker-disabled-weekend" identifier="dateDisabledWeekend"></duet-date-picker>
       <script>
-        const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
-
-        pickerDisableWeekend.isDateDisabled = function isWeekend(date) {
+        function isWeekend(date) {
           return date.getDay() === 0 || date.getDay() === 6
         }
+
+        const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
+        pickerDisableWeekend.isDateDisabled = isWeekend
+
+        pickerDisableWeekend.addEventListener("duetChange", function(e) {
+          if (isWeekend(e.detail.valueAsDate)) {
+            alert("Please select a weekday")
+          }
+        })
       </script>
       <pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
 &lt;duet-date-picker identifier="date"&gt;&lt;/duet-date-picker&gt;
 
 &lt;script&gt;
-  const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
-
-  pickerDisableWeekend.isDateDisabled = function isWeekend(date) {
+  function isWeekend(date) {
     return date.getDay() === 0 || date.getDay() === 6
   }
+
+  const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
+  pickerDisableWeekend.isDateDisabled = isWeekend
+
+  pickerDisableWeekend.addEventListener("duetChange", function(e) {
+    if (isWeekend(e.detail.valueAsDate)) {
+      alert("Please select a weekday")
+    }
+  })
 &lt;/script&gt;</code></pre>
       <br />
       <p>