playbook_ui 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756
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/_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
|
}
|