docs: update content

Author: mrholek

docs/assets/js/snippets.js

@@ -176,8 +176,7 @@
   const myMultiSelect = document.getElementById('multiSelect')
 
   if (myMultiSelect) {
-    // eslint-disable-next-line no-unused-vars
-    const toastCoreUI = new coreui.MultiSelect(myMultiSelect, {
+    new coreui.MultiSelect(myMultiSelect, {
       name: 'multiSelect',
       options: [
         {
@@ -219,17 +218,18 @@
       ],
       search: true
     })
-    // js-docs-end multi-select-array-data
   }
+  // js-docs-end multi-select-array-data
 
   // -------------------------------
   // Date Pickers
   // -------------------------------
   // 'Date Pickers components' example in docs only
 
-  if (document.getElementById('myDatePickerDisabledDates')) {
-    // eslint-disable-next-line no-unused-vars
-    const myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), {
+  // js-docs-start date-picker-disabled-dates
+  const myDatePickerDisabledDates = document.getElementById('myDatePickerDisabledDates')
+  if (myDatePickerDisabledDates) {
+    const optionsDatePickerDisabledDates = {
       locale: 'en-US',
       calendarDate: new Date(2022, 2, 1),
       disabledDates: [
@@ -240,15 +240,20 @@
       ],
       maxDate: new Date(2022, 5, 0),
       minDate: new Date(2022, 1, 1)
-    })
+    }
+
+    new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), optionsDatePickerDisabledDates)
   }
+  // js-docs-end date-picker-disabled-dates
 
   // -------------------------------
   // Date Range Pickers
   // -------------------------------
   // 'Date Range Pickers components' example in docs only
 
-  if (document.getElementById('myDateRangePickerDisabledDates')) {
+  // js-docs-start date-range-picker-disabled-dates
+  const myDateRangePickerDisabledDates = document.getElementById('myDateRangePickerDisabledDates')
+  if (myDateRangePickerDisabledDates) {
     const optionsDateRangePickerDisabledDates = {
       locale: 'en-US',
       calendarDate: new Date(2022, 2, 1),
@@ -261,11 +266,14 @@
       maxDate: new Date(2022, 5, 0),
       minDate: new Date(2022, 1, 1)
     }
-    // eslint-disable-next-line no-unused-vars
-    const myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), optionsDateRangePickerDisabledDates)
+
+    new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), optionsDateRangePickerDisabledDates)
   }
+  // js-docs-end date-range-picker-disabled-dates
 
-  if (document.getElementById('myDateRangePickerCustomRanges')) {
+  // js-docs-start date-range-picker-custom-ranges
+  const myDateRangePickerCustomRanges = document.getElementById('myDateRangePickerCustomRanges')
+  if (myDateRangePickerCustomRanges) {
     const optionsCustomRanges = {
       locale: 'en-US',
       ranges: {
@@ -292,7 +300,8 @@
         ]
       }
     }
-    // eslint-disable-next-line no-unused-vars
-    const myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)
+
+    new coreui.DateRangePicker(myDateRangePickerCustomRanges, optionsCustomRanges)
   }
+  // js-docs-end date-range-picker-custom-ranges
 })()

docs/content/forms/date-picker.md

@@ -98,22 +98,7 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
 </div>
 {{< /example >}}
 
-```js
-const options = {
-  locale: 'en-US',
-  calendarDate: new Date(2022, 2, 1),
-  disabledDates: [
-    [new Date(2022, 2, 4), new Date(2022, 2, 7)],
-    new Date(2022, 2, 16),
-    new Date(2022, 3, 16),
-    [new Date(2022, 4, 2), new Date(2022, 4, 8)]
-  ],
-  maxDate: new Date(2022, 5, 0),
-  minDate: new Date(2022, 1, 1)
-}
-
-const myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), options)
-```
+{{< js-docs name="date-picker-disabled-dates" file="docs/assets/js/snippets.js" >}}
 
 ## Non-english locale
 

docs/content/forms/date-range-picker.md

@@ -126,22 +126,7 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
 </div>
 {{< /example >}}
 
-```js
-const options = {
-  locale: 'en-US',
-  calendarDate: new Date(2022, 2, 1),
-  disabledDates: [
-    [new Date(2022, 2, 4), new Date(2022, 2, 7)],
-    new Date(2022, 2, 16),
-    new Date(2022, 3, 16),
-    [new Date(2022, 4, 2), new Date(2022, 4, 8)]
-  ],
-  maxDate: new Date(2022, 5, 0),
-  minDate: new Date(2022, 1, 1)
-}
-
-const myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), options)
-```
+{{< js-docs name="date-range-picker-disabled-dates" file="docs/assets/js/snippets.js" >}}
 
 ## Custom ranges
 
@@ -153,36 +138,7 @@ const myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getEl
 </div>
 {{< /example >}}
 
-```js
-const optionsCustomRanges = {
-  locale: 'en-US',
-  ranges: {
-    Today: [new Date(), new Date()],
-    Yesterday: [
-      new Date(new Date().setDate(new Date().getDate() - 1)),
-      new Date(new Date().setDate(new Date().getDate() - 1))
-    ],
-    'Last 7 Days': [
-      new Date(new Date().setDate(new Date().getDate() - 6)),
-      new Date(new Date())
-    ],
-    'Last 30 Days': [
-      new Date(new Date().setDate(new Date().getDate() - 29)),
-      new Date(new Date())
-    ],
-    'This Month': [
-      new Date(new Date().setDate(1)),
-      new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
-    ],
-    'Last Month': [
-      new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
-      new Date(new Date().getFullYear(), new Date().getMonth(), 0)
-    ]
-  }
-}
-
-const myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)
-```
+{{< js-docs name="date-range-picker-custom-ranges" file="docs/assets/js/snippets.js" >}}
 
 ## Non-english locale