Skip to content

Commit 7f5108d

Browse files
stomitastomita
authored
Merge pull request #225 from mashmatrix/allow-out-of-month-date-pick
Allow to select out of month date in calendar
2 parents e23ec65 + 10e8aaa commit 7f5108d

File tree

2 files changed

+59
-54
lines changed

2 files changed

+59
-54
lines changed

‎.storybook/__storyshots__/Datepicker.shot‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -241,10 +241,10 @@ exports[`Controlled with knobs`] = `
241241
<span
242242
className="slds-day"
243243
data-date-value="2017-01-29"
244-
onClick={null}
244+
onClick={[Function]}
245245
onFocus={[Function]}
246-
onKeyDown={null}
247-
tabIndex={-1}>
246+
onKeyDown={[Function]}
247+
tabIndex={0}>
248248
29
249249
</span>
250250
</td>
@@ -257,10 +257,10 @@ exports[`Controlled with knobs`] = `
257257
<span
258258
className="slds-day"
259259
data-date-value="2017-01-30"
260-
onClick={null}
260+
onClick={[Function]}
261261
onFocus={[Function]}
262-
onKeyDown={null}
263-
tabIndex={-1}>
262+
onKeyDown={[Function]}
263+
tabIndex={0}>
264264
30
265265
</span>
266266
</td>
@@ -273,10 +273,10 @@ exports[`Controlled with knobs`] = `
273273
<span
274274
className="slds-day"
275275
data-date-value="2017-01-31"
276-
onClick={null}
276+
onClick={[Function]}
277277
onFocus={[Function]}
278-
onKeyDown={null}
279-
tabIndex={-1}>
278+
onKeyDown={[Function]}
279+
tabIndex={0}>
280280
31
281281
</span>
282282
</td>
@@ -745,10 +745,10 @@ exports[`Controlled with knobs`] = `
745745
<span
746746
className="slds-day"
747747
data-date-value="2017-03-01"
748-
onClick={null}
748+
onClick={[Function]}
749749
onFocus={[Function]}
750-
onKeyDown={null}
751-
tabIndex={-1}>
750+
onKeyDown={[Function]}
751+
tabIndex={0}>
752752
1
753753
</span>
754754
</td>
@@ -761,10 +761,10 @@ exports[`Controlled with knobs`] = `
761761
<span
762762
className="slds-day"
763763
data-date-value="2017-03-02"
764-
onClick={null}
764+
onClick={[Function]}
765765
onFocus={[Function]}
766-
onKeyDown={null}
767-
tabIndex={-1}>
766+
onKeyDown={[Function]}
767+
tabIndex={0}>
768768
2
769769
</span>
770770
</td>
@@ -777,10 +777,10 @@ exports[`Controlled with knobs`] = `
777777
<span
778778
className="slds-day"
779779
data-date-value="2017-03-03"
780-
onClick={null}
780+
onClick={[Function]}
781781
onFocus={[Function]}
782-
onKeyDown={null}
783-
tabIndex={-1}>
782+
onKeyDown={[Function]}
783+
tabIndex={0}>
784784
3
785785
</span>
786786
</td>
@@ -793,10 +793,10 @@ exports[`Controlled with knobs`] = `
793793
<span
794794
className="slds-day"
795795
data-date-value="2017-03-04"
796-
onClick={null}
796+
onClick={[Function]}
797797
onFocus={[Function]}
798-
onKeyDown={null}
799-
tabIndex={-1}>
798+
onKeyDown={[Function]}
799+
tabIndex={0}>
800800
4
801801
</span>
802802
</td>
@@ -1639,10 +1639,10 @@ exports[`Default`] = `
16391639
<span
16401640
className="slds-day"
16411641
data-date-value="2016-03-27"
1642-
onClick={null}
1642+
onClick={[Function]}
16431643
onFocus={[Function]}
1644-
onKeyDown={null}
1645-
tabIndex={-1}>
1644+
onKeyDown={[Function]}
1645+
tabIndex={0}>
16461646
27
16471647
</span>
16481648
</td>
@@ -1655,10 +1655,10 @@ exports[`Default`] = `
16551655
<span
16561656
className="slds-day"
16571657
data-date-value="2016-03-28"
1658-
onClick={null}
1658+
onClick={[Function]}
16591659
onFocus={[Function]}
1660-
onKeyDown={null}
1661-
tabIndex={-1}>
1660+
onKeyDown={[Function]}
1661+
tabIndex={0}>
16621662
28
16631663
</span>
16641664
</td>
@@ -1671,10 +1671,10 @@ exports[`Default`] = `
16711671
<span
16721672
className="slds-day"
16731673
data-date-value="2016-03-29"
1674-
onClick={null}
1674+
onClick={[Function]}
16751675
onFocus={[Function]}
1676-
onKeyDown={null}
1677-
tabIndex={-1}>
1676+
onKeyDown={[Function]}
1677+
tabIndex={0}>
16781678
29
16791679
</span>
16801680
</td>
@@ -1687,10 +1687,10 @@ exports[`Default`] = `
16871687
<span
16881688
className="slds-day"
16891689
data-date-value="2016-03-30"
1690-
onClick={null}
1690+
onClick={[Function]}
16911691
onFocus={[Function]}
1692-
onKeyDown={null}
1693-
tabIndex={-1}>
1692+
onKeyDown={[Function]}
1693+
tabIndex={0}>
16941694
30
16951695
</span>
16961696
</td>
@@ -1703,10 +1703,10 @@ exports[`Default`] = `
17031703
<span
17041704
className="slds-day"
17051705
data-date-value="2016-03-31"
1706-
onClick={null}
1706+
onClick={[Function]}
17071707
onFocus={[Function]}
1708-
onKeyDown={null}
1709-
tabIndex={-1}>
1708+
onKeyDown={[Function]}
1709+
tabIndex={0}>
17101710
31
17111711
</span>
17121712
</td>
@@ -2980,10 +2980,10 @@ exports[`Extension Rendering`] = `
29802980
<span
29812981
className="slds-day"
29822982
data-date-value="2016-03-27"
2983-
onClick={null}
2983+
onClick={[Function]}
29842984
onFocus={[Function]}
2985-
onKeyDown={null}
2986-
tabIndex={-1}>
2985+
onKeyDown={[Function]}
2986+
tabIndex={0}>
29872987
27
29882988
</span>
29892989
</td>
@@ -2996,10 +2996,10 @@ exports[`Extension Rendering`] = `
29962996
<span
29972997
className="slds-day"
29982998
data-date-value="2016-03-28"
2999-
onClick={null}
2999+
onClick={[Function]}
30003000
onFocus={[Function]}
3001-
onKeyDown={null}
3002-
tabIndex={-1}>
3001+
onKeyDown={[Function]}
3002+
tabIndex={0}>
30033003
28
30043004
</span>
30053005
</td>
@@ -3012,10 +3012,10 @@ exports[`Extension Rendering`] = `
30123012
<span
30133013
className="slds-day"
30143014
data-date-value="2016-03-29"
3015-
onClick={null}
3015+
onClick={[Function]}
30163016
onFocus={[Function]}
3017-
onKeyDown={null}
3018-
tabIndex={-1}>
3017+
onKeyDown={[Function]}
3018+
tabIndex={0}>
30193019
29
30203020
</span>
30213021
</td>
@@ -3028,10 +3028,10 @@ exports[`Extension Rendering`] = `
30283028
<span
30293029
className="slds-day"
30303030
data-date-value="2016-03-30"
3031-
onClick={null}
3031+
onClick={[Function]}
30323032
onFocus={[Function]}
3033-
onKeyDown={null}
3034-
tabIndex={-1}>
3033+
onKeyDown={[Function]}
3034+
tabIndex={0}>
30353035
30
30363036
</span>
30373037
</td>
@@ -3044,10 +3044,10 @@ exports[`Extension Rendering`] = `
30443044
<span
30453045
className="slds-day"
30463046
data-date-value="2016-03-31"
3047-
onClick={null}
3047+
onClick={[Function]}
30483048
onFocus={[Function]}
3049-
onKeyDown={null}
3050-
tabIndex={-1}>
3049+
onKeyDown={[Function]}
3050+
tabIndex={0}>
30513051
31
30523052
</span>
30533053
</td>

‎src/scripts/Datepicker.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export default class Datepicker extends Component {
115115
}
116116

117117
onDateClick(date) {
118+
console.log('onDateClick', date);
118119
if (this.props.onSelect) {
119120
this.props.onSelect(date);
120121
}
@@ -123,6 +124,7 @@ export default class Datepicker extends Component {
123124
onDateFocus(date) {
124125
if (this.state.targetDate !== date) {
125126
setTimeout(() => {
127+
console.log('onDateFocus=>', date);
126128
this.setState({ targetDate: date });
127129
}, 10);
128130
}
@@ -251,15 +253,18 @@ export default class Datepicker extends Component {
251253
}
252254

253255
renderDate(cal, selectedDate, today, d, i) {
256+
let selectable = true;
254257
let enabled = d.year === cal.year && d.month === cal.month;
255258
if (cal.minDate) {
256259
const min = moment(d.value, 'YYYY-MM-DD')
257260
.isAfter(moment(cal.minDate.value, 'YYYY-MM-DD'));
261+
selectable = selectable && min;
258262
enabled = enabled && min;
259263
}
260264
if (cal.maxDate) {
261265
const max = moment(d.value, 'YYYY-MM-DD')
262266
.isBefore(moment(cal.maxDate.value, 'YYYY-MM-DD'));
267+
selectable = selectable && max;
263268
enabled = enabled && max;
264269
}
265270
const selected = d.value === selectedDate;
@@ -280,9 +285,9 @@ export default class Datepicker extends Component {
280285
>
281286
<span
282287
className='slds-day'
283-
tabIndex={ enabled ? 0 : -1 }
284-
onClick={ enabled ? this.onDateClick.bind(this, d.value) : null }
285-
onKeyDown={ enabled ? this.onDateKeyDown.bind(this, d.value) : null }
288+
tabIndex={ selectable ? 0 : -1 }
289+
onClick={ selectable ? this.onDateClick.bind(this, d.value) : null }
290+
onKeyDown={ selectable ? this.onDateKeyDown.bind(this, d.value) : null }
286291
onFocus={ enabled ? this.onDateFocus.bind(this, d.value) : cancelEvent }
287292
data-date-value={ d.value }
288293
>{ d.date }</span>

0 commit comments

Comments
 (0)