playbook_ui_docs 14.8.0.pre.rc.5 → 14.8.0.pre.rc.7
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_default_date.html.erb +42 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +4 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2a454f31f254e5a8ab770dadbeb8b21e03302018d9d96ef5e01f00e3be742f4e
|
4
|
+
data.tar.gz: 6273ac2b92e787d16e9b830082a8d260196d39aa020f3d5ec55502f53b6bd7d3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 86f1d2c3fc30361b407c8903cf78a0ecf00b19ef8a6573f1d08c36dc0298c2a00bd31d8b74b06a0ab5c38b9ade190eb55f47d0b9fecea24592d3cc9a12afb942
|
7
|
+
data.tar.gz: f84d519237507f26f45759cf7ff1c741e348db85a869ed5bf66fbb4c32a5c633c13b6f05d1ada1d42498235dbb343bd70eb6902c81751884cce4c6f10a9d0a24
|
@@ -0,0 +1,42 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
allow_input: true,
|
3
|
+
default_date: "This month",
|
4
|
+
end_date_id: "quick-pick-end-date",
|
5
|
+
end_date_name: "quick-pick-end-date",
|
6
|
+
mode: "range",
|
7
|
+
picker_id: "quick-pick-default-date",
|
8
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
9
|
+
selection_type: "quickpick",
|
10
|
+
start_date_id: "quick-pick-start-date",
|
11
|
+
start_date_name: "quick-pick-start-date"
|
12
|
+
}) %>
|
13
|
+
|
14
|
+
<%= pb_rails("date_picker", props: {
|
15
|
+
allow_input: true,
|
16
|
+
custom_quick_pick_dates: {
|
17
|
+
dates: [
|
18
|
+
{
|
19
|
+
label: "Last 15 months",
|
20
|
+
value: {
|
21
|
+
timePeriod: "months",
|
22
|
+
amount: 15,
|
23
|
+
},
|
24
|
+
},
|
25
|
+
{
|
26
|
+
label: "First Week of June 2022",
|
27
|
+
value: ["06/01/2022", "06/07/2022"],
|
28
|
+
},
|
29
|
+
],
|
30
|
+
},
|
31
|
+
default_date: "First Week of June 2022",
|
32
|
+
end_date_id: "quick-pick-end-date",
|
33
|
+
end_date_name: "quick-pick-end-date",
|
34
|
+
label: "Custom Date Picker",
|
35
|
+
mode: "range",
|
36
|
+
picker_id: "custom-quick-pick-default-date",
|
37
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
38
|
+
selection_type: "quickpick",
|
39
|
+
start_date_id: "quick-pick-start-date",
|
40
|
+
start_date_name: "quick-pick-start-date"
|
41
|
+
}) %>
|
42
|
+
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import DatePicker from "../_date_picker"
|
3
|
+
|
4
|
+
const DatePickerQuickPickDefaultDate = (props) => (
|
5
|
+
<>
|
6
|
+
<DatePicker
|
7
|
+
allowInput
|
8
|
+
defaultDate="This month"
|
9
|
+
mode="range"
|
10
|
+
pickerId="quick-pick-default-date"
|
11
|
+
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
12
|
+
selectionType="quickpick"
|
13
|
+
{...props}
|
14
|
+
/>
|
15
|
+
|
16
|
+
<DatePicker
|
17
|
+
allowInput
|
18
|
+
customQuickPickDates={{
|
19
|
+
dates: [
|
20
|
+
{
|
21
|
+
label: "Last 15 months",
|
22
|
+
value: {
|
23
|
+
timePeriod: "months",
|
24
|
+
amount: 15,
|
25
|
+
},
|
26
|
+
},
|
27
|
+
{
|
28
|
+
label: "First Week of June 2022",
|
29
|
+
value: ["06/01/2022", "06/07/2022"],
|
30
|
+
},
|
31
|
+
],
|
32
|
+
}}
|
33
|
+
defaultDate="First Week of June 2022"
|
34
|
+
label="Custom Date Picker"
|
35
|
+
mode="range"
|
36
|
+
pickerId="custom-quick-pick-default-date"
|
37
|
+
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
38
|
+
selectionType="quickpick"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
</>
|
42
|
+
)
|
43
|
+
|
44
|
+
export default DatePickerQuickPickDefaultDate
|
@@ -0,0 +1 @@
|
|
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.
|
@@ -12,6 +12,7 @@ examples:
|
|
12
12
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
13
13
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
14
14
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
15
|
+
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
15
16
|
- date_picker_format: Format
|
16
17
|
- date_picker_disabled: Disabled Dates
|
17
18
|
- date_picker_min_max: Min Max
|
@@ -42,6 +43,7 @@ examples:
|
|
42
43
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
43
44
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
44
45
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
46
|
+
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
45
47
|
- date_picker_format: Format
|
46
48
|
- date_picker_disabled: Disabled Dates
|
47
49
|
- date_picker_min_max: Min Max
|
@@ -25,3 +25,4 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
|
|
25
25
|
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
26
26
|
export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
|
27
27
|
export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
|
28
|
+
export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
|