diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts b/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts index ff6f58b855..abb468d60e 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +++ b/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 diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb b/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb new file mode 100644 index 0000000000..fb8301cf95 --- /dev/null +++ b/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" +}) %> + diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx b/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx new file mode 100644 index 0000000000..3eb70a61bd --- /dev/null +++ b/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) => ( + <> + + + + +) + +export default DatePickerQuickPickDefaultDate diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md b/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md new file mode 100644 index 0000000000..f1eb020089 --- /dev/null +++ b/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. diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml b/playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml index 1c8d2412b6..8dfe610423 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml +++ b/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 diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/index.js b/playbook/app/pb_kits/playbook/pb_date_picker/docs/index.js index a401751f42..3618d9b200 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/docs/index.js +++ b/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' diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx b/playbook/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx index 91cb734659..4338c772c3 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +++ b/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) { + 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) { selectActiveRangeButton(selectedDates)