[PBNTR-637] Adding defaultDate prop to Date Picker Quick Pick variant

playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -143,7 +143,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
-      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
+      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates, defaultDate as string))
     }
 
     // time selection

playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb

@@ -0,0 +1,42 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  default_date: "This month",
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "quick-pick-default-date",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  custom_quick_pick_dates: {
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          timePeriod: "months",
+          amount: 15,
+        },
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"],
+      },
+    ],
+  },
+  default_date: "First Week of June 2022",
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  label: "Custom Date Picker",
+  mode: "range",
+  picker_id: "custom-quick-pick-default-date",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx

@@ -0,0 +1,44 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+
+const DatePickerQuickPickDefaultDate = (props) => (
+    <>
+        <DatePicker
+            allowInput
+            defaultDate="This month"
+            mode="range"
+            pickerId="quick-pick-default-date"
+            placeholder="mm/dd/yyyy to mm/dd/yyyy"
+            selectionType="quickpick"
+            {...props}
+        />
+
+        <DatePicker
+            allowInput
+            customQuickPickDates={{
+                dates: [
+                    {
+                        label: "Last 15 months",
+                        value: {
+                            timePeriod: "months",
+                            amount: 15,
+                        },
+                    },
+                    {
+                        label: "First Week of June 2022",
+                        value: ["06/01/2022", "06/07/2022"],
+                    },
+                ],
+            }}
+            defaultDate="First Week of June 2022"
+            label="Custom Date Picker"
+            mode="range"
+            pickerId="custom-quick-pick-default-date"
+            placeholder="mm/dd/yyyy to mm/dd/yyyy"
+            selectionType="quickpick"
+            {...props}
+        />
+    </>
+)
+
+export default DatePickerQuickPickDefaultDate

playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md

@@ -0,0 +1 @@
+To set a default value using Quick Pick, use the `defaultDate` or `default_date` prop. This prop should match one of the labels displayed in the UI of the dropdown menu.

playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -12,6 +12,7 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
+  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -42,6 +43,7 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
+  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

playbook/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -25,3 +25,4 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
+export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'

playbook/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -26,7 +26,7 @@ type customQuickPickDatesType = {
 
 let activeLabel = ""
 
-const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined) => {
+const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined, defaultDate: string) => {
   return function (fp: FpTypes & any): any {
     const today = new Date()
     const yesterday = DateTime.getYesterdayDate(new Date())
@@ -185,6 +185,8 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
     return {
       // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
+        let defaultDateRange
+
         // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
         for (const [label, range] of Object.entries(pluginData.ranges)) {
           addRangeButton(label).addEventListener('click', function () {
@@ -201,6 +203,14 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
               fp.close();
             }
           });
+
+          // check if there is a default date and set the default date range and label for quick pick
+          if (defaultDate) {
+            if (label.toLowerCase() === defaultDate.toLowerCase()) {
+              activeLabel = label
+              defaultDateRange = range
+            }
+          }
         }
         // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
         if (pluginData.rangesNav.children.length > 0) {
@@ -216,6 +226,12 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
           // function to give the active button the active class
           selectActiveRangeButton(selectedDates);
         }
+
+        // set the default date range if there is one and select the active button
+        if (defaultDateRange) {
+          fp.setDate(defaultDateRange, false);
+          selectActiveRangeButton(defaultDateRange);
+        }
       },
       onValueUpdate(selectedDates: Array<Date>) {
         selectActiveRangeButton(selectedDates)