playbook_ui 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date/_date.tsx +96 -42
- data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
- data/app/pb_kits/playbook/pb_date/date.rb +2 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +30 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +74 -78
- data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
- data/app/pb_kits/playbook/pb_time/time.rb +2 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +2 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +3 -2
- data/app/pb_kits/playbook/pb_title/title.rb +10 -3
- data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +1 -1
- metadata +7 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 545f767b2aa613f9d6490c5bf7bc6d06bb8736a2f06aa1e3a055ad0cb61bd060
|
|
4
|
+
data.tar.gz: 37ac24266bff35f8d6abf8cbff56e5e0edcc386a1de31f6d28e1633f5a932cf7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5dbf9d8ef59601a795eda0dc0665a438413454d06fc035b28d01bc78ff2b562b16d96c26615f37f3db5c21bfede6064e93a78cae6ab93ccbc89c2aa4f3b297a0
|
|
7
|
+
data.tar.gz: c9008cfc3ad1571970c45003a7ca4a4aa71387cd9e3dfdc7bdd03d09d0a4f3d36583f83c2f598597138df99990177dd16b56153a8fc01ffa60af34c3fd5c692e
|
|
@@ -19,6 +19,7 @@ type PbDateProps = {
|
|
|
19
19
|
showDayOfWeek?: boolean;
|
|
20
20
|
showIcon?: boolean;
|
|
21
21
|
size?: "sm" | "md" | "lg";
|
|
22
|
+
unstyled?: boolean;
|
|
22
23
|
value: string | Date;
|
|
23
24
|
};
|
|
24
25
|
|
|
@@ -32,6 +33,7 @@ const PbDate = (props: PbDateProps) => {
|
|
|
32
33
|
showDayOfWeek = false,
|
|
33
34
|
showIcon = false,
|
|
34
35
|
size = "md",
|
|
36
|
+
unstyled = false,
|
|
35
37
|
value,
|
|
36
38
|
} = props;
|
|
37
39
|
|
|
@@ -52,48 +54,100 @@ const PbDate = (props: PbDateProps) => {
|
|
|
52
54
|
);
|
|
53
55
|
|
|
54
56
|
return (
|
|
55
|
-
<div {...ariaProps}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
57
|
+
<div {...ariaProps}
|
|
58
|
+
{...dataProps}
|
|
59
|
+
className={classes}
|
|
60
|
+
id={id}
|
|
61
|
+
>
|
|
62
|
+
{unstyled
|
|
63
|
+
? <>
|
|
64
|
+
{showIcon && (
|
|
65
|
+
<div>
|
|
66
|
+
<Icon fixedWidth
|
|
67
|
+
icon="calendar-alt"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
)}
|
|
71
|
+
|
|
72
|
+
{showDayOfWeek && (
|
|
73
|
+
<>
|
|
74
|
+
<div>
|
|
75
|
+
{weekday}
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div>{"•"}</div>
|
|
79
|
+
</>
|
|
80
|
+
)}
|
|
81
|
+
|
|
82
|
+
<span>
|
|
83
|
+
<span>
|
|
84
|
+
{month} {day}
|
|
85
|
+
</span>
|
|
86
|
+
|
|
87
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
|
88
|
+
</span>
|
|
89
|
+
</>
|
|
90
|
+
: size == "md" || size == "lg"
|
|
91
|
+
? (
|
|
92
|
+
<Title size={4}
|
|
93
|
+
tag="h4"
|
|
94
|
+
>
|
|
95
|
+
{showIcon && (
|
|
96
|
+
<Body className="pb_icon_kit_container"
|
|
97
|
+
color="light"
|
|
98
|
+
tag="span"
|
|
99
|
+
>
|
|
100
|
+
<Icon fixedWidth
|
|
101
|
+
icon="calendar-alt"
|
|
102
|
+
/>
|
|
103
|
+
</Body>
|
|
104
|
+
)}
|
|
105
|
+
|
|
106
|
+
{showDayOfWeek && (
|
|
107
|
+
<>
|
|
108
|
+
{weekday}
|
|
109
|
+
<Body color="light"
|
|
110
|
+
tag="span"
|
|
111
|
+
text=" • "
|
|
112
|
+
/>
|
|
113
|
+
</>
|
|
114
|
+
)}
|
|
115
|
+
|
|
116
|
+
<span>
|
|
117
|
+
{month} {day}
|
|
118
|
+
</span>
|
|
119
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
|
120
|
+
</Title>
|
|
121
|
+
)
|
|
122
|
+
: (
|
|
123
|
+
<>
|
|
124
|
+
{showIcon && (
|
|
125
|
+
<Caption className="pb_icon_kit_container"
|
|
126
|
+
tag="span"
|
|
127
|
+
>
|
|
128
|
+
<Icon fixedWidth
|
|
129
|
+
icon="calendar-alt"
|
|
130
|
+
size="sm"
|
|
131
|
+
/>
|
|
132
|
+
</Caption>
|
|
133
|
+
)}
|
|
134
|
+
|
|
135
|
+
{showDayOfWeek && (
|
|
136
|
+
<>
|
|
137
|
+
<Caption tag="div">{weekday}</Caption>
|
|
138
|
+
<Caption color="light"
|
|
139
|
+
tag="div"
|
|
140
|
+
text=" • "
|
|
141
|
+
/>
|
|
142
|
+
</>
|
|
143
|
+
)}
|
|
144
|
+
|
|
145
|
+
<Caption tag="span">
|
|
146
|
+
{month} {day}
|
|
147
|
+
{currentYear != year && <>{`, ${year}`}</>}
|
|
148
|
+
</Caption>
|
|
149
|
+
</>
|
|
150
|
+
)}
|
|
97
151
|
</div>
|
|
98
152
|
);
|
|
99
153
|
};
|
|
@@ -4,7 +4,28 @@
|
|
|
4
4
|
class: object.classname,
|
|
5
5
|
aria: object.aria) do %>
|
|
6
6
|
|
|
7
|
-
<% if object.
|
|
7
|
+
<% if object.unstyled %>
|
|
8
|
+
<!-- icon -->
|
|
9
|
+
<% if object.show_icon %>
|
|
10
|
+
<div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<!-- day_of_week -->
|
|
14
|
+
<% if object.show_day_of_week %>
|
|
15
|
+
<div><%= object.day_of_week %></div>
|
|
16
|
+
<div>•</div>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<!-- month day, year -->
|
|
20
|
+
<%# if not current year %>
|
|
21
|
+
<% if object.year.to_s == DateTime.now.year.to_s %>
|
|
22
|
+
<span><%= "#{object.month} #{object.day}" %></span>
|
|
23
|
+
<%# if is current year %>
|
|
24
|
+
<% else %>
|
|
25
|
+
<span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
|
|
26
|
+
<% end %>
|
|
27
|
+
|
|
28
|
+
<% elsif object.size == "md" || object.size == "lg" %>
|
|
8
29
|
<!-- icon -->
|
|
9
30
|
<% if object.show_icon %>
|
|
10
31
|
<%= pb_rails("body", props: {
|
|
@@ -36,7 +57,6 @@
|
|
|
36
57
|
<% end %>
|
|
37
58
|
|
|
38
59
|
<% else %>
|
|
39
|
-
|
|
40
60
|
<!-- icon -->
|
|
41
61
|
<% if object.show_icon %>
|
|
42
62
|
<%= pb_rails("caption", props: {
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("date", props: {
|
|
4
|
+
date: Date.today,
|
|
5
|
+
unstyled: true
|
|
6
|
+
}) %>
|
|
7
|
+
|
|
8
|
+
<br />
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
|
|
11
|
+
|
|
12
|
+
<%= pb_rails("title", props: { size: 1 }) do %>
|
|
13
|
+
<%= pb_rails("date", props: {
|
|
14
|
+
date: "2012-08-02T15:49:29Z",
|
|
15
|
+
unstyled: true
|
|
16
|
+
}) %>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<br />
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("caption", props: { size: "xs" }) do %>
|
|
24
|
+
<%= pb_rails("date", props: {
|
|
25
|
+
date: "2012-08-02T15:49:29Z",
|
|
26
|
+
show_icon: true,
|
|
27
|
+
unstyled: true,
|
|
28
|
+
show_day_of_week: true
|
|
29
|
+
}) %>
|
|
30
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Caption, Date as FormattedDate, Title } from '../../'
|
|
3
|
+
|
|
4
|
+
const DateUnstyled = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Caption size="xs"
|
|
8
|
+
text="Basic unstyled example"
|
|
9
|
+
/>
|
|
10
|
+
<FormattedDate
|
|
11
|
+
unstyled
|
|
12
|
+
value={new Date()}
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
|
|
16
|
+
<br />
|
|
17
|
+
|
|
18
|
+
<Caption size="xs"
|
|
19
|
+
text="Example with wrapping typography kit"
|
|
20
|
+
/>
|
|
21
|
+
<Title size={1}>
|
|
22
|
+
<FormattedDate
|
|
23
|
+
unstyled
|
|
24
|
+
value="1995-12-25"
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
</Title>
|
|
28
|
+
|
|
29
|
+
<br />
|
|
30
|
+
|
|
31
|
+
<Caption size="xs"
|
|
32
|
+
text="Example with icon + subcaption"
|
|
33
|
+
/>
|
|
34
|
+
<Caption size="xs">
|
|
35
|
+
<FormattedDate
|
|
36
|
+
showDayOfWeek
|
|
37
|
+
showIcon
|
|
38
|
+
unstyled
|
|
39
|
+
value="1995-12-25"
|
|
40
|
+
{...props}
|
|
41
|
+
/>
|
|
42
|
+
</Caption>
|
|
43
|
+
</>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export default DateUnstyled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Date` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Date` kit to inherit any of our typography styles.
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- date_default: Default
|
|
5
5
|
- date_variants: Variants
|
|
6
6
|
- date_alignment: Alignment
|
|
7
7
|
- date_timezone: Timezones
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- date_unstyled: Unstyled
|
|
9
|
+
|
|
10
10
|
react:
|
|
11
11
|
- date_default: Default
|
|
12
12
|
- date_variants: Variants
|
|
13
13
|
- date_alignment: Alignment
|
|
14
|
-
|
|
14
|
+
- date_unstyled: Unstyled
|
|
@@ -19,13 +19,12 @@ type pluginDataType = {
|
|
|
19
19
|
rangesButtons: [] | any,
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
let activeLabel = ""
|
|
23
|
+
|
|
22
24
|
const quickPickPlugin = () => {
|
|
23
25
|
return function (fp: FpTypes & any): any {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
// variable that holds the ranges available
|
|
28
|
-
const ranges = {
|
|
26
|
+
// variable that holds the ranges available
|
|
27
|
+
const ranges = {
|
|
29
28
|
'Today': [new Date(), new Date()],
|
|
30
29
|
'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
|
|
31
30
|
'This week': [moment().startOf('week').toDate(), moment().endOf('week').toDate()],
|
|
@@ -33,20 +32,20 @@ const quickPickPlugin = () => {
|
|
|
33
32
|
'This quarter': [moment().startOf('quarter').toDate(), new Date()],
|
|
34
33
|
'This year': [moment().startOf('year').toDate(), new Date()],
|
|
35
34
|
'Last week': [
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
moment().subtract(1, 'week').startOf('week').toDate(),
|
|
36
|
+
moment().subtract(1, 'week').endOf('week').toDate()
|
|
38
37
|
],
|
|
39
38
|
'Last month': [
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
moment().subtract(1, 'month').startOf('month').toDate(),
|
|
40
|
+
moment().subtract(1, 'month').endOf('month').toDate()
|
|
42
41
|
],
|
|
43
42
|
'Last quarter': [
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
moment().subtract(1, 'quarter').startOf('quarter').toDate(),
|
|
44
|
+
moment().subtract(1, 'quarter').endOf('quarter').toDate()
|
|
46
45
|
],
|
|
47
46
|
'Last year': [
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
moment().subtract(1, 'year').startOf('year').toDate(),
|
|
48
|
+
moment().subtract(1, 'year').endOf('year').toDate()
|
|
50
49
|
]
|
|
51
50
|
}
|
|
52
51
|
//creating the ul element for the nav dropdown and giving it classnames
|
|
@@ -59,96 +58,93 @@ const quickPickPlugin = () => {
|
|
|
59
58
|
rangesButtons: [],
|
|
60
59
|
};
|
|
61
60
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
/**
|
|
62
|
+
* @param {string} label
|
|
63
|
+
* @returns HTML Element
|
|
64
|
+
*/
|
|
66
65
|
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
//function for creating the range buttons in the nav
|
|
67
|
+
const addRangeButton = (label: string) => {
|
|
69
68
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
// creating new elements to mimick selectable card component
|
|
70
|
+
const div2 = document.createElement('div');
|
|
71
|
+
div2.className = "nav-item-link"
|
|
72
|
+
div2.innerHTML = label;
|
|
74
73
|
|
|
75
|
-
|
|
74
|
+
pluginData.rangesButtons[label] = div2;
|
|
76
75
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
// create li elements inside the dropdown
|
|
77
|
+
const item = document.createElement('li');
|
|
78
|
+
item.className = "nav-item";
|
|
80
79
|
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
// append those nav items to the li items
|
|
81
|
+
item.appendChild(pluginData.rangesButtons[label]);
|
|
83
82
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
// return the ranges buton prop
|
|
88
|
-
return pluginData.rangesButtons[label];
|
|
89
|
-
};
|
|
83
|
+
// append the li item to the ul rangeNav prop
|
|
84
|
+
pluginData.rangesNav.appendChild(item);
|
|
90
85
|
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
// return the ranges buton prop
|
|
87
|
+
return pluginData.rangesButtons[label];
|
|
88
|
+
};
|
|
93
89
|
|
|
94
|
-
|
|
95
|
-
current.
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
90
|
+
const selectActiveRangeButton = (selectedDates: Array<string>) => {
|
|
91
|
+
const current = pluginData.rangesNav.querySelector('.active');
|
|
92
|
+
|
|
93
|
+
if (current) {
|
|
94
|
+
current.classList.remove('active');
|
|
95
|
+
}
|
|
96
|
+
/** conditional statment to extract start and end dates from selectedDates,
|
|
97
|
+
* then loop through ranges prop in pluginData
|
|
98
|
+
* and check if chosen dates equal to a date in the ranges prop
|
|
99
|
+
* if they are equal, add the active class
|
|
100
|
+
*/
|
|
101
|
+
if (selectedDates.length > 0 && activeLabel) {
|
|
102
|
+
// const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
|
|
103
|
+
// selected.forEach(el => {
|
|
104
|
+
// if (el.innerHTML === activeLabel)
|
|
105
|
+
// el.classList.add('active')
|
|
106
|
+
// return
|
|
107
|
+
// })
|
|
108
|
+
|
|
109
|
+
pluginData.rangesButtons[activeLabel].classList.add('active');
|
|
110
|
+
}
|
|
111
111
|
}
|
|
112
|
-
}
|
|
113
112
|
|
|
114
113
|
|
|
115
|
-
|
|
114
|
+
return {
|
|
116
115
|
// onReady is a hook from flatpickr that runs when calender is in a ready state
|
|
117
116
|
onReady(selectedDates: Array<string>) {
|
|
118
117
|
// 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
|
|
119
118
|
for (const [label, range] of Object.entries(pluginData.ranges)) {
|
|
120
119
|
addRangeButton(label).addEventListener('click', function () {
|
|
121
120
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
});
|
|
121
|
+
const start = moment(range[0]).toDate();
|
|
122
|
+
const end = moment(range[1]).toDate();
|
|
123
|
+
|
|
124
|
+
if (!start) {
|
|
125
|
+
fp.clear();
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
activeLabel = label
|
|
129
|
+
fp.setDate([start, end], true);
|
|
130
|
+
fp.close();
|
|
131
|
+
}
|
|
132
|
+
});
|
|
135
133
|
}
|
|
136
|
-
|
|
134
|
+
// conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
|
|
137
135
|
if (pluginData.rangesNav.children.length > 0) {
|
|
138
136
|
|
|
139
137
|
fp.calendarContainer.prepend(pluginData.rangesNav);
|
|
140
138
|
pluginData.rangesNav.classList.add('quick-pick-ul')
|
|
141
139
|
fp.calendarContainer.classList.add('quick-pick-drop-down');
|
|
142
140
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
141
|
+
/**
|
|
142
|
+
*
|
|
143
|
+
* @param {Array} selectedDates
|
|
144
|
+
*/
|
|
147
145
|
// function to give the active button the active class
|
|
148
|
-
debugger
|
|
149
146
|
selectActiveRangeButton(selectedDates);
|
|
150
147
|
}
|
|
151
|
-
|
|
152
148
|
},
|
|
153
149
|
onValueUpdate(selectedDates: Array<string>) {
|
|
154
150
|
debugger
|
|
@@ -157,10 +153,10 @@ const quickPickPlugin = () => {
|
|
|
157
153
|
|
|
158
154
|
onClose(selectedDates: Array<string>) {
|
|
159
155
|
// set the input value to the selected dates when the dropdown is closed
|
|
160
|
-
if (selectedDates.length < 2 && selectedDates.length > 0) {
|
|
156
|
+
if (selectedDates.length < 2 && selectedDates.length > 0) {
|
|
161
157
|
fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
|
|
162
158
|
}
|
|
163
|
-
|
|
159
|
+
}
|
|
164
160
|
};
|
|
165
161
|
};
|
|
166
162
|
}
|