playbook_ui 12.26.0 → 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +26 -0
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +102 -95
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +18 -2
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +15 -4
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +84 -1
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +38 -4
  8. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +12 -0
  9. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +3 -0
  10. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +12 -0
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +18 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +17 -0
  14. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +1 -0
  15. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  16. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +3 -1
  17. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +168 -0
  18. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +3 -2
  19. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +75 -0
  20. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +47 -125
  21. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +125 -166
  22. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  24. data/dist/playbook-rails.js +279 -7
  25. data/lib/playbook/version.rb +2 -2
  26. metadata +16 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f05ba004408818dfcba9bd10157c3c88af1dd4d310795c061f333b5945fc4f5a
4
- data.tar.gz: e0634afd89ddd77122ed2a6fedf1a0af05dbc0a07e93dccae55b1e2227303cbc
3
+ metadata.gz: 64a2a354bbc83b538372e2d6c2fce8ef6cc717dab74cb0ff5c6e4703fdd39a34
4
+ data.tar.gz: e4978419bb744d0f5638c2d172fa9e63dec96d46de9387db50a8286ec615bbe2
5
5
  SHA512:
6
- metadata.gz: d9c746e3c5e9e738c378c47f109c3c7ac8f069da5d04fca517dc58128053d6b02a75b0ba2d244d1f070348f856d8348438721f59708afd9b9be90ba82f66267f
7
- data.tar.gz: '050496ad839d51a4fc1e6440d9356f578cb3613b788770ffbd703b99c1f1f14d1e060e6dd7b7bc1fb878c61f5f1a697b0a8df3ddb55b8f0ee4085d047a6be9a8'
6
+ metadata.gz: b7311804701a200d8c822d1658f8b085973a8eb277d7b4f5180c18c27334a5bb7be3da262e80d8b07db62ea2caa6bc88bc5ee8dcdc237b78c24eac8897cdf6b4
7
+ data.tar.gz: b178b398c5b61d199f6fab3589d3b8a4e311ac7ea404c8ff045983691eb6713335164243068db66b55d887e25b4bc45efa83421326f211baa8270789ffd30fde
@@ -6,6 +6,7 @@
6
6
  @import "./sass_partials/month_and_year_styles";
7
7
  @import "./sass_partials/time_selection_styles";
8
8
  @import "./sass_partials/input_styles";
9
+ @import "./sass_partials/quick_pick_styles";
9
10
 
10
11
  [class^=pb_date_picker_kit] {
11
12
  .input_wrapper {
@@ -26,7 +27,32 @@
26
27
  @include transition_default;
27
28
  border-color: $primary;
28
29
  }
30
+ .add-on-card {
31
+ border-color: $primary;
32
+ }
33
+ }
34
+
35
+ @media (hover: hover) {
36
+ &:hover {
37
+ .add-on-card {
38
+ cursor: pointer;
39
+ background-color: rgba($focus_input_light,$opacity_5);
40
+ }
41
+ }
42
+ }
43
+ .text_input_wrapper_add_on .add-on-icon {
44
+ color: $text_lt_light
29
45
  }
46
+
47
+ .text_input_wrapper_add_on .add-on-right .text_input{
48
+ cursor: pointer;
49
+ }
50
+
51
+ }
52
+
53
+
54
+ .pb_popover_reference_wrapper {
55
+ display: unset !important
30
56
  }
31
57
 
32
58
  .flatpickr-calendar {
@@ -30,7 +30,7 @@ type DatePickerProps = {
30
30
  inputAria?: { [key: string]: string },
31
31
  inputData?: { [key: string]: string },
32
32
  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
33
- inputValue?: any,
33
+ inputValue?: string,
34
34
  label?: string,
35
35
  maxDate: string,
36
36
  minDate: string,
@@ -39,9 +39,10 @@ type DatePickerProps = {
39
39
  placeholder?: string,
40
40
  positionElement?: HTMLElement | null,
41
41
  scrollContainer?: string,
42
- selectionType?: "month" | "week",
42
+ selectionType?: "month" | "week"| "quickpick",
43
43
  showTimezone?: boolean,
44
44
  staticPosition: boolean,
45
+ thisRangesEndToday?: boolean,
45
46
  timeFormat?: string,
46
47
  type?: string,
47
48
  yearRange?: number[],
@@ -88,6 +89,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
88
89
  selectionType = '',
89
90
  showTimezone = false,
90
91
  staticPosition = true,
92
+ thisRangesEndToday = false,
91
93
  yearRange = [1900, 2100],
92
94
  } = props
93
95
 
@@ -96,46 +98,47 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
96
98
  const inputAriaProps = buildAriaProps(inputAria)
97
99
  const inputDataProps = buildDataProps(inputData)
98
100
 
101
+ useEffect(() => {
102
+ datePickerHelper({
103
+ allowInput,
104
+ defaultDate,
105
+ disableDate,
106
+ disableRange,
107
+ disableWeekdays,
108
+ enableTime,
109
+ format,
110
+ hideIcon,
111
+ inLine,
112
+ maxDate,
113
+ minDate,
114
+ mode,
115
+ onChange,
116
+ onClose,
117
+ pickerId,
118
+ plugins,
119
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
120
+ // @ts-ignore
121
+ position,
122
+ positionElement,
123
+ selectionType,
124
+ showTimezone,
125
+ staticPosition,
126
+ thisRangesEndToday,
127
+ yearRange,
128
+ required: false,
129
+ }, scrollContainer)
130
+ })
99
131
  const filteredProps = {...props}
100
132
  delete filteredProps?.position
101
133
 
102
134
  const classes = classnames(
103
135
  buildCss('pb_date_picker_kit'),
136
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
104
137
  //@ts-ignore
105
138
  globalProps(filteredProps),
106
139
  error ? 'error' : null,
107
140
  className
108
141
  )
109
-
110
- useEffect(() => {
111
- datePickerHelper({
112
- allowInput,
113
- defaultDate,
114
- disableDate,
115
- disableRange,
116
- disableWeekdays,
117
- enableTime,
118
- format,
119
- hideIcon,
120
- inLine,
121
- maxDate,
122
- minDate,
123
- mode,
124
- onChange,
125
- onClose,
126
- pickerId,
127
- plugins,
128
- // @ts-ignore
129
- position,
130
- positionElement,
131
- selectionType,
132
- showTimezone,
133
- staticPosition,
134
- yearRange,
135
- required: false,
136
- }, scrollContainer)
137
- })
138
-
139
142
  const iconWrapperClass = () => {
140
143
  let base = 'cal_icon_wrapper'
141
144
  if (dark) {
@@ -150,80 +153,84 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
150
153
  return base
151
154
  }
152
155
 
156
+
153
157
  return (
154
158
  <div
155
- {...ariaProps}
156
- {...dataProps}
157
- className={classes}
158
- id={id}
159
+ {...ariaProps}
160
+ {...dataProps}
161
+ className={classes}
162
+ id={id}
159
163
  >
160
164
  <div
161
- {...inputAriaProps}
162
- {...inputDataProps}
163
- className="input_wrapper">
165
+ {...inputAriaProps}
166
+ {...inputDataProps}
167
+ className="input_wrapper"
168
+ >
164
169
 
165
170
  <Caption
166
- className="pb_date_picker_kit_label"
167
- text={hideLabel ? null : label}
171
+ className="pb_date_picker_kit_label"
172
+ text={hideLabel ? null : label}
168
173
  />
169
-
170
- <div className="date_picker_input_wrapper">
171
- <input
172
- autoComplete="off"
173
- className="date_picker_input"
174
- disabled={disableInput}
175
- id={pickerId}
176
- name={name}
177
- onChange={inputOnChange}
178
- placeholder={placeholder}
179
- value={inputValue}
180
- />
181
-
182
- {error && <Body
183
- status="negative"
184
- text={error}
185
- variant={null}
186
- />
187
- }
188
- </div>
189
-
190
- {!hideIcon &&
191
- <div
192
- className={iconWrapperClass()}
193
- id={`cal-icon-${pickerId}`}
194
- >
195
- <Icon
196
- className="cal_icon"
197
- icon="calendar-alt"
198
- />
199
- </div>
200
- }
201
-
202
- {hideIcon && inLine ?
203
- <div>
204
- <div
205
- className={iconWrapperClass()}
206
- id={`${pickerId}-icon-plus`}
207
- >
208
- <Icon
209
- className="date-picker-plus-icon"
210
- icon="plus"
211
- />
212
- </div>
213
- <div
214
- className={iconWrapperClass()}
215
- id={`${pickerId}-angle-down`}
216
- >
217
- <Icon
218
- className="angle_down_icon"
219
- icon="angle-down"
174
+ <>
175
+ <div className="date_picker_input_wrapper">
176
+ <input
177
+ autoComplete="off"
178
+ className="date_picker_input"
179
+ disabled={disableInput}
180
+ id={pickerId}
181
+ name={name}
182
+ onChange={inputOnChange}
183
+ placeholder={placeholder}
184
+ value={inputValue}
220
185
  />
186
+
187
+ {error &&
188
+ <Body
189
+ status="negative"
190
+ text={error}
191
+ variant={null}
192
+ />
193
+ }
221
194
  </div>
222
- </div>
223
- : null}
195
+
196
+ {!hideIcon &&
197
+ <div
198
+ className={iconWrapperClass()}
199
+ id={`cal-icon-${pickerId}`}
200
+ >
201
+ <Icon
202
+ className="cal_icon"
203
+ icon="calendar-alt"
204
+ />
205
+ </div>
206
+ }
207
+
208
+ {hideIcon && inLine ?
209
+ <div>
210
+ <div
211
+ className={iconWrapperClass()}
212
+ id={`${pickerId}-icon-plus`}
213
+ >
214
+ <Icon
215
+ className="date-picker-plus-icon"
216
+ icon="plus"
217
+ />
218
+ </div>
219
+ <div
220
+ className={iconWrapperClass()}
221
+ id={`${pickerId}-angle-down`}
222
+ >
223
+ <Icon
224
+ className="angle_down_icon"
225
+ icon="angle-down"
226
+ />
227
+ </div>
228
+ </div>
229
+ : null
230
+ }
231
+ </>
224
232
  </div>
225
233
  </div>
226
234
  )
227
235
  }
228
-
229
236
  export default DatePicker
@@ -21,6 +21,12 @@
21
21
  required: object.required,
22
22
  }) %>
23
23
  <% end %>
24
+
25
+ <% if object.selection_type == "quickpick" %>
26
+ <input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
27
+ <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
28
+ <% end %>
29
+
24
30
  <% if !object.hide_icon %>
25
31
  <div
26
32
  class="<%= object.icon_wrapper_class %>"
@@ -61,7 +67,17 @@
61
67
 
62
68
  <%= javascript_tag do %>
63
69
  window.addEventListener("DOMContentLoaded", () => {
64
- datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
70
+ datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
71
+
72
+ if (<%= object.selection_type == "quickpick" %>) {
73
+ document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
74
+ const startDate = document.getElementById("<%= object.start_date_id %>")
75
+ const endDate = document.getElementById("<%= object.end_date_id %>")
76
+ const splittedValue = target.value.split(" → ")
77
+ startDate.value = splittedValue[0]
78
+ endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
79
+ })
80
+ }
65
81
  })
66
82
  <% end %>
67
- <% end %>
83
+ <% end %>
@@ -19,6 +19,10 @@ module Playbook
19
19
  default: []
20
20
  prop :enable_time, type: Playbook::Props::Boolean,
21
21
  default: false
22
+ prop :end_date_id, type: Playbook::Props::String,
23
+ default: "end_date_id"
24
+ prop :end_date_name, type: Playbook::Props::String,
25
+ default: "end_date_name"
22
26
  prop :error, type: Playbook::Props::String
23
27
  prop :format, type: Playbook::Props::String,
24
28
  default: "m/d/Y"
@@ -43,20 +47,26 @@ module Playbook
43
47
  required: true
44
48
  prop :placeholder, type: Playbook::Props::String,
45
49
  default: "Select Date"
46
- prop :plugins, type: Playbook::Props::Boolean,
47
- default: false,
48
- deprecated: true
50
+ prop :plugins, type: Playbook::Props::Boolean,
51
+ default: false,
52
+ deprecated: true
49
53
  prop :position, type: Playbook::Props::String,
50
54
  default: "auto"
51
55
  prop :position_element, type: Playbook::Props::String
52
56
  prop :scroll_container, type: Playbook::Props::String
53
57
  prop :selection_type, type: Playbook::Props::Enum,
54
- values: %w[week month none],
58
+ values: %w[week month quickpick none],
55
59
  default: "none"
56
60
  prop :show_timezone, type: Playbook::Props::Boolean,
57
61
  default: false
62
+ prop :start_date_id, type: Playbook::Props::String,
63
+ default: "start_date_id"
64
+ prop :start_date_name, type: Playbook::Props::String,
65
+ default: "start_date_name"
58
66
  prop :static_position, type: Playbook::Props::Boolean,
59
67
  default: true
68
+ prop :this_ranges_end_today, type: Playbook::Props::Boolean,
69
+ default: false
60
70
  prop :required, type: Playbook::Props::Boolean,
61
71
  default: false
62
72
  prop :year_range, type: Playbook::Props::Array,
@@ -88,6 +98,7 @@ module Playbook
88
98
  selectionType: selection_type,
89
99
  showTimezone: show_timezone,
90
100
  staticPosition: static_position,
101
+ thisRangesEndToday: this_ranges_end_today,
91
102
  yearRange: year_range,
92
103
  }.to_json.html_safe
93
104
  end
@@ -1,5 +1,6 @@
1
1
  /* eslint-disable no-console */
2
2
  import React from 'react'
3
+ import moment from 'moment'
3
4
  import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
4
5
 
5
6
  import DatePicker from './_date_picker'
@@ -10,7 +11,6 @@ import { getTimezoneText } from './plugins/timeSelect'
10
11
  jest.setSystemTime(new Date('01/01/2020'));
11
12
  const DEFAULT_DATE = new Date()
12
13
 
13
-
14
14
  describe('DatePicker Kit', () => {
15
15
  beforeEach(() => {
16
16
  jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,4 +158,87 @@ describe('DatePicker Kit', () => {
158
158
  expect(input).toHaveValue('01/01/2020 at 12:00 PM')
159
159
  })
160
160
  })
161
+ test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
162
+ const testId = 'datepicker-quick-pick'
163
+ render(
164
+ <DatePicker
165
+ allowInput
166
+ data={{ testid: testId }}
167
+ mode="range"
168
+ pickerId="date-picker-quick-pick"
169
+ placeholder="mm/dd/yyyy → mm/dd/yyyy"
170
+ selectionType="quickpick"
171
+ />
172
+ )
173
+
174
+ const kit = screen.getByTestId(testId)
175
+ const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
176
+
177
+ fireEvent(
178
+ input,
179
+ new MouseEvent('click', {
180
+ bubbles: true,
181
+ cancelable: true,
182
+ }),
183
+ )
184
+ const today = within(kit).getByText('Today')
185
+ const thisYear = within(kit).getByText('This year')
186
+ await waitFor(() => {
187
+ expect(today).toBeInTheDocument()
188
+ expect(thisYear).toBeInTheDocument()
189
+ })
190
+
191
+ fireEvent(
192
+ thisYear,
193
+ new MouseEvent('click', {
194
+ bubbles: true,
195
+ cancelable: true,
196
+ }),
197
+ )
198
+
199
+ await waitFor(() => {
200
+ expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().endOf('year').format('MM/DD/YYYY'))
201
+ })
202
+
203
+ })
204
+ test('shows DatePicker QuickPick ranges ending today', async () => {
205
+ const testId = 'datepicker-quick-pick-ends-today'
206
+ render(
207
+ <DatePicker
208
+ allowInput
209
+ data={{ testid: testId }}
210
+ mode="range"
211
+ pickerId="date-picker-quick-pick"
212
+ placeholder="mm/dd/yyyy → mm/dd/yyyy"
213
+ selectionType="quickpick"
214
+ thisRangesEndToday
215
+ />
216
+ )
217
+
218
+ const kit = screen.getByTestId(testId)
219
+ const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
220
+
221
+ fireEvent(
222
+ input,
223
+ new MouseEvent('click', {
224
+ bubbles: true,
225
+ cancelable: true,
226
+ }),
227
+ )
228
+
229
+ const thisYear = within(kit).getByText('This year')
230
+
231
+ fireEvent(
232
+ thisYear,
233
+ new MouseEvent('click', {
234
+ bubbles: true,
235
+ cancelable: true,
236
+ }),
237
+ )
238
+
239
+ await waitFor(() => {
240
+ expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().format('MM/DD/YYYY'))
241
+ })
242
+
243
+ })
161
244
  })
@@ -3,6 +3,7 @@ import { BaseOptions } from 'flatpickr/dist/types/options'
3
3
  import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
4
4
  import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
5
5
  import timeSelectPlugin from './plugins/timeSelect'
6
+ import quickPickPlugin from './plugins/quickPick'
6
7
 
7
8
  const getPositionElement = (element: string | Element) => {
8
9
  return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -19,10 +20,11 @@ type DatePickerConfig = {
19
20
  hideIcon?: boolean;
20
21
  inLine?: boolean,
21
22
  onChange: (dateStr: string, selectedDates: Date[]) => void,
23
+ selectionType?: "month" | "week" | "quickpick" | "",
22
24
  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
23
- selectionType?: "month" | "week" | "",
24
25
  showTimezone?: boolean,
25
26
  staticPosition: boolean,
27
+ thisRangesEndToday?: boolean,
26
28
  timeCaption?: string,
27
29
  timeFormat?: string,
28
30
  yearRange: number[]
@@ -51,6 +53,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
51
53
  selectionType,
52
54
  showTimezone,
53
55
  staticPosition = true,
56
+ thisRangesEndToday = false,
54
57
  timeCaption = 'Select Time',
55
58
  timeFormat = 'at h:i K',
56
59
  yearRange,
@@ -89,19 +92,24 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
89
92
  }
90
93
  }
91
94
 
92
- const setPlugins = () => {
93
- let pluginList = []
95
+ const setPlugins = (thisRangesEndToday: boolean) => {
96
+ const pluginList = []
94
97
 
95
98
  // month and week selection
96
99
  if (selectionType === "month" || plugins.length > 0) {
97
100
  pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
98
101
  } else if ( selectionType === "week") {
99
102
  pluginList.push(weekSelect())
103
+
104
+ } else if (selectionType === "quickpick") {
105
+ //------- QUICKPICK VARIANT PLUGIN -------------//
106
+ pluginList.push(quickPickPlugin(thisRangesEndToday))
100
107
  }
101
108
 
102
109
  // time selection
103
110
  if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
104
111
 
112
+
105
113
  return pluginList
106
114
  }
107
115
 
@@ -144,6 +152,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
144
152
  },
145
153
  ] : disabledParser(),
146
154
  enableTime,
155
+ locale: {
156
+ rangeSeparator: ' → '
157
+ },
147
158
  maxDate,
148
159
  minDate,
149
160
  mode,
@@ -164,17 +175,40 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
164
175
  onYearChange: [() => {
165
176
  yearChangeHook()
166
177
  }],
167
- plugins: setPlugins(),
178
+ plugins: setPlugins(thisRangesEndToday),
168
179
  position,
169
180
  positionElement: getPositionElement(positionElement),
170
181
  prevArrow: '<i class="far fa-angle-left"></i>',
171
182
  static: staticPosition,
172
183
  })
173
184
 
185
+
174
186
  // ===========================================================
175
187
  // Additional JS Functionality |
176
188
  // ===========================================================
177
189
 
190
+ // opens flatpickr instance when calander icon is clicked so we can have a hover state on icon
191
+ // window.addEventListener("DOMContentLoaded", (event) => {
192
+ // event.preventDefault();
193
+ // function attachIconClickHandler() {
194
+ // const variantArr = document.querySelectorAll(`#cal-icon-${pickerId}`)
195
+ // if (!variantArr) {
196
+ // setTimeout(attachIconClickHandler, 100);
197
+ // return;
198
+ // }
199
+
200
+ // const instance = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
201
+ // variantArr.forEach((icon) => {
202
+ // icon.addEventListener("click", function(event) {
203
+ // event.preventDefault();
204
+ // instance.open()
205
+ // });
206
+ // })
207
+ // }
208
+
209
+ // attachIconClickHandler();
210
+ // });
211
+
178
212
  // Assign dynamically sourced flatpickr instance to variable
179
213
  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
180
214
  picker.innerContainer.parentElement.id = `cal-${pickerId}`
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ allow_input: true,
3
+ end_date_id: "quick-pick-end-date",
4
+ end_date_name: "quick-pick-end-date",
5
+ mode: "range",
6
+ picker_id: "date-picker-quick-pick",
7
+ placeholder: "mm/dd/yyyy → mm/dd/yyyy",
8
+ selection_type: "quickpick",
9
+ start_date_id: "quick-pick-start-date",
10
+ start_date_name: "quick-pick-start-date"
11
+ }) %>
12
+
@@ -0,0 +1,3 @@
1
+ This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
2
+
3
+ Like all other date pickers, the quick pick does require a `picker_id`.
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ allow_input: true,
3
+ end_date_id: "range-limit-end-date",
4
+ end_date_name: "range-limit-end-date",
5
+ mode: "range",
6
+ picker_id: "thisRangesEndToday",
7
+ placeholder: "mm/dd/yyyy → mm/dd/yyyy",
8
+ selection_type: "quickpick",
9
+ start_date_id: "range-limit-start-date",
10
+ start_date_name: "range-limit-start-date",
11
+ this_ranges_end_today: true
12
+ }) %>
@@ -0,0 +1,18 @@
1
+ import React from 'react'
2
+ import DatePicker from '../_date_picker'
3
+
4
+ const DatePickerQuickPickRangeLimit = (props) => (
5
+ <>
6
+ <DatePicker
7
+ allowInput
8
+ mode="range"
9
+ pickerId="thisRangesEndToday"
10
+ placeholder="mm/dd/yyyy → mm/dd/yyyy"
11
+ selectionType="quickpick"
12
+ thisRangesEndToday
13
+ {...props}
14
+ />
15
+ </>
16
+ )
17
+
18
+ export default DatePickerQuickPickRangeLimit
@@ -0,0 +1 @@
1
+ Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+ import DatePicker from '../_date_picker'
3
+
4
+ const DatePickerQuickPickReact = (props) => (
5
+ <>
6
+ <DatePicker
7
+ allowInput
8
+ mode="range"
9
+ pickerId="date-picker-quick-pick"
10
+ placeholder="mm/dd/yyyy → mm/dd/yyyy"
11
+ selectionType="quickpick"
12
+ {...props}
13
+ />
14
+ </>
15
+ )
16
+
17
+ export default DatePickerQuickPickReact
@@ -0,0 +1 @@
1
+ Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.