playbook_ui_docs 12.26.0.pre.alpha.multiselectfixes825 → 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +3 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +18 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +17 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +3 -1
- data/dist/playbook-doc.js +199 -199
- metadata +9 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: af65045b9fd6e4b7e3017e555b208a0f00097bc536e3fc96d38330487393f320
|
4
|
+
data.tar.gz: d095e43d6e280baa202a91445a8c9e2d03167cee7f40ed3f91fa57256956eaf0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 506715be37c5d6f1a12bb4a8eac600900bbde3321d6d89aa37a696c21073167d3fbb86cd8c415e6efbb1b885ced1dcb9121dbd2e7257780854d33b71b569be3c
|
7
|
+
data.tar.gz: 56b0a77981d2bba8dc955cc7a52ec2d3bb2beeef28dfb9e8baecce5c4d4b712c0cd4653bdacfcb49ebdb203a26fc6b80792c9eef0c591a244b05d003c3eadd67
|
@@ -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.
|
@@ -8,6 +8,8 @@ examples:
|
|
8
8
|
- date_picker_input: Input Field
|
9
9
|
- date_picker_label: Label
|
10
10
|
- date_picker_range: Range
|
11
|
+
- date_picker_quick_pick_rails: Range (Quick Pick)
|
12
|
+
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
11
13
|
- date_picker_format: Format
|
12
14
|
- date_picker_disabled: Disabled Dates
|
13
15
|
- date_picker_min_max: Min Max
|
@@ -33,6 +35,8 @@ examples:
|
|
33
35
|
- date_picker_on_change: onChange
|
34
36
|
- date_picker_on_close: onClose
|
35
37
|
- date_picker_range: Range
|
38
|
+
- date_picker_quick_pick_react: Range (Quick Pick)
|
39
|
+
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
36
40
|
- date_picker_format: Format
|
37
41
|
- date_picker_disabled: Disabled Dates
|
38
42
|
- date_picker_min_max: Min Max
|
@@ -19,4 +19,6 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
|
|
19
19
|
export { default as DatePickerPositions } from './_date_picker_positions.jsx'
|
20
20
|
export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
|
21
21
|
export { default as DatePickerAllowInput } from './_date_picker_allow_input'
|
22
|
-
export { default as
|
22
|
+
export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
|
23
|
+
export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
|
24
|
+
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|