@sb1/ffe-datepicker-react 100.5.2 → 100.6.0
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.
- package/es/calendar/Calendar.js +11 -7
- package/es/datelogic/simplecalendar.js +7 -2
- package/es/datepicker/DatepickerComp.js +2 -2
- package/lib/calendar/Calendar.js +11 -7
- package/lib/datelogic/simplecalendar.js +7 -2
- package/lib/datepicker/DatepickerComp.js +2 -2
- package/package.json +8 -8
- package/types/calendar/Calendar.d.ts +2 -0
- package/types/datelogic/simplecalendar.d.ts +2 -1
- package/types/datepicker/DatepickerComp.d.ts +2 -0
package/es/calendar/Calendar.js
CHANGED
|
@@ -63,7 +63,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
_this.state = {
|
|
66
|
-
calendar: new SimpleCalendar(getSimpleDateFromString(props === null || props === void 0 ? void 0 : props.selectedDate), props.minDate, props.maxDate, props.locale),
|
|
66
|
+
calendar: new SimpleCalendar(getSimpleDateFromString(props === null || props === void 0 ? void 0 : props.selectedDate), props.minDate, props.maxDate, props.disabledDates, props.locale),
|
|
67
67
|
isFocusingHeader: false,
|
|
68
68
|
};
|
|
69
69
|
_this.datepickerId = "ffe-calendar-".concat(uuid());
|
|
@@ -81,7 +81,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
81
81
|
Calendar.prototype.componentDidUpdate = function (prevProps) {
|
|
82
82
|
if (prevProps.selectedDate !== this.props.selectedDate) {
|
|
83
83
|
this.setState({
|
|
84
|
-
calendar: new SimpleCalendar(getSimpleDateFromString(this.props.selectedDate), this.props.minDate, this.props.maxDate, this.props.locale),
|
|
84
|
+
calendar: new SimpleCalendar(getSimpleDateFromString(this.props.selectedDate), this.props.minDate, this.props.maxDate, this.props.disabledDates, this.props.locale),
|
|
85
85
|
}, this.forceUpdate);
|
|
86
86
|
}
|
|
87
87
|
};
|
|
@@ -89,7 +89,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
89
89
|
return nextProps.selectedDate !== this.props.selectedDate;
|
|
90
90
|
};
|
|
91
91
|
Calendar.prototype.keyDown = function (event) {
|
|
92
|
-
var _a, _b;
|
|
92
|
+
var _a, _b, _c;
|
|
93
93
|
var calendar = this.state.calendar;
|
|
94
94
|
var scrollableEvents = [
|
|
95
95
|
'PageUp',
|
|
@@ -106,14 +106,15 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
106
106
|
}
|
|
107
107
|
switch (event.key) {
|
|
108
108
|
case 'Enter':
|
|
109
|
-
if (calendar.isDateWithinDateRange(calendar.focusedDate)
|
|
109
|
+
if (calendar.isDateWithinDateRange(calendar.focusedDate) &&
|
|
110
|
+
((_a = this.props.disabledDates) === null || _a === void 0 ? void 0 : _a.includes(calendar.focusedDate.toString())) === false) {
|
|
110
111
|
calendar.selectFocusedDate();
|
|
111
112
|
this.props.onDatePicked(calendar.selected());
|
|
112
113
|
}
|
|
113
114
|
event.preventDefault();
|
|
114
115
|
break;
|
|
115
116
|
case 'Escape':
|
|
116
|
-
(
|
|
117
|
+
(_c = (_b = this.props).escKeyHandler) === null || _c === void 0 ? void 0 : _c.call(_b, event);
|
|
117
118
|
break;
|
|
118
119
|
case 'Tab':
|
|
119
120
|
break;
|
|
@@ -158,7 +159,8 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
158
159
|
};
|
|
159
160
|
Calendar.prototype.mouseClick = function (date) {
|
|
160
161
|
var pickedDate = getSimpleDateFromTimestamp(date.timestamp);
|
|
161
|
-
if (this.state.calendar.isDateWithinDateRange(pickedDate)
|
|
162
|
+
if (this.state.calendar.isDateWithinDateRange(pickedDate) &&
|
|
163
|
+
date.isEnabled) {
|
|
162
164
|
this.state.calendar.selectTimestamp(date.timestamp);
|
|
163
165
|
this.props.onDatePicked(this.state.calendar.selected());
|
|
164
166
|
}
|
|
@@ -218,7 +220,9 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
218
220
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
219
221
|
return (React.createElement("div", { role: "dialog", "aria-modal": true, "aria-labelledby": "".concat(this.datepickerId, "-title"), className: "ffe-default-mode" },
|
|
220
222
|
React.createElement("div", { className: this.props.calendarClassName || 'ffe-calendar', role: "application", onKeyDown: this.focusTrap },
|
|
221
|
-
React.createElement(Header, { datepickerId: this.datepickerId, month: calendar.focusedMonth, nextMonthHandler: this.nextMonth, nextMonthLabel: calendar.nextName, previousMonthHandler: this.previousMonth, previousMonthLabel: calendar.previousName, year: calendar.focusedYear, prevMonthButtonElement: this.prevMonthButtonElementRef, nextMonthButtonElement: this.nextMonthButtonElementRef, monthNumber: calendar.focusedDate.month + 1, locale: this.props.locale, dropdownCaption: this.props.dropdownCaption, onMonthYearChange: function (month, year) {
|
|
223
|
+
React.createElement(Header, { datepickerId: this.datepickerId, month: calendar.focusedMonth, nextMonthHandler: this.nextMonth, nextMonthLabel: calendar.nextName, previousMonthHandler: this.previousMonth, previousMonthLabel: calendar.previousName, year: calendar.focusedYear, prevMonthButtonElement: this.prevMonthButtonElementRef, nextMonthButtonElement: this.nextMonthButtonElementRef, monthNumber: calendar.focusedDate.month + 1, locale: this.props.locale, dropdownCaption: this.props.dropdownCaption, onMonthYearChange: function (month, year) {
|
|
224
|
+
return _this.navigateToMonthYear(month, year);
|
|
225
|
+
}, minDate: this.props.minDate, maxDate: this.props.maxDate }),
|
|
222
226
|
React.createElement("table", { className: "ffe-calendar__grid", onKeyDown: this.keyDown, role: "presentation" },
|
|
223
227
|
React.createElement("thead", null,
|
|
224
228
|
React.createElement("tr", null, calendar.dayNames.map(this.renderDay))),
|
|
@@ -28,8 +28,9 @@ function isDateWithinMinMax(date, minDate, maxDate) {
|
|
|
28
28
|
return !(maxDate && date.isAfter(maxDate));
|
|
29
29
|
}
|
|
30
30
|
var SimpleCalendar = /** @class */ (function () {
|
|
31
|
-
function SimpleCalendar(initialDate, minDate, maxDate, locale) {
|
|
31
|
+
function SimpleCalendar(initialDate, minDate, maxDate, disabledDates, locale) {
|
|
32
32
|
if (locale === void 0) { locale = 'nb'; }
|
|
33
|
+
this.disabledDates = [];
|
|
33
34
|
this.locale = locale;
|
|
34
35
|
this.focusedDate = initialDate
|
|
35
36
|
? initialDate.clone()
|
|
@@ -37,6 +38,7 @@ var SimpleCalendar = /** @class */ (function () {
|
|
|
37
38
|
this.selectedDate = initialDate ? initialDate.clone() : initialDate;
|
|
38
39
|
this.minDate = minDate ? getSimpleDateFromString(minDate) : null;
|
|
39
40
|
this.maxDate = maxDate ? getSimpleDateFromString(maxDate) : null;
|
|
41
|
+
this.disabledDates = disabledDates ? disabledDates : [];
|
|
40
42
|
// Settings
|
|
41
43
|
this.firstDay = i18n[locale].FIRST_DAY_OF_WEEK;
|
|
42
44
|
}
|
|
@@ -161,7 +163,10 @@ var SimpleCalendar = /** @class */ (function () {
|
|
|
161
163
|
isFocus: currentDate.equal(this.focusedDate),
|
|
162
164
|
isSelected: !!this.selectedDate &&
|
|
163
165
|
currentDate.equal(this.selectedDate),
|
|
164
|
-
isEnabled: isDateWithinMinMax(currentDate, this.minDate, this.maxDate)
|
|
166
|
+
isEnabled: isDateWithinMinMax(currentDate, this.minDate, this.maxDate) &&
|
|
167
|
+
(this.disabledDates
|
|
168
|
+
? !this.disabledDates.includes(currentDate.format())
|
|
169
|
+
: true),
|
|
165
170
|
};
|
|
166
171
|
week.dates.push(date);
|
|
167
172
|
currentDate.adjust({ period: 'D', offset: 1 });
|
|
@@ -12,7 +12,7 @@ import { ErrorFieldMessage } from '@sb1/ffe-form-react';
|
|
|
12
12
|
import i18n from '../i18n/i18n';
|
|
13
13
|
import { isMonth } from '../types';
|
|
14
14
|
export var DatepickerComp = function (_a) {
|
|
15
|
-
var ariaInvalidState = _a.ariaInvalid, ariaInvalidProp = _a["aria-invalid"], ariaDescribedbyState = _a.ariaDescribedby, ariaDescribedbyProp = _a["aria-describedby"], onBlur = _a.onBlur, calendarAbove = _a.calendarAbove, id = _a.id, maxDateProp = _a.maxDate, minDateProp = _a.minDate, onChange = _a.onChange, fullWidth = _a.fullWidth, fieldMessage = _a.fieldMessage, labelId = _a.labelId, dropdownCaption = _a.dropdownCaption;
|
|
15
|
+
var ariaInvalidState = _a.ariaInvalid, ariaInvalidProp = _a["aria-invalid"], ariaDescribedbyState = _a.ariaDescribedby, ariaDescribedbyProp = _a["aria-describedby"], onBlur = _a.onBlur, calendarAbove = _a.calendarAbove, id = _a.id, maxDateProp = _a.maxDate, minDateProp = _a.minDate, onChange = _a.onChange, fullWidth = _a.fullWidth, fieldMessage = _a.fieldMessage, labelId = _a.labelId, dropdownCaption = _a.dropdownCaption, disabledDates = _a.disabledDates;
|
|
16
16
|
var _b = useContext(DatepickerContext), day = _b.day, setDay = _b.setDay, year = _b.year, setYear = _b.setYear, month = _b.month, setMonth = _b.setMonth, locale = _b.locale, calendarActiveDate = _b.calendarActiveDate, setCalendarActiveDate = _b.setCalendarActiveDate, setLastChangedValue = _b.setLastChangedValue;
|
|
17
17
|
var formatDate = useCallback(function () {
|
|
18
18
|
return getPaddedDateString(day, month, year);
|
|
@@ -234,6 +234,6 @@ export var DatepickerComp = function (_a) {
|
|
|
234
234
|
setYear(newValue);
|
|
235
235
|
}, prevSpinButton: monthRef, maxLength: 4, "aria-invalid": ariaInvalid(), "aria-valuetext": "".concat(year), "aria-valuenow": typeof year === 'number' ? year : undefined, "aria-label": i18n[locale].YEAR, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, year ? year : 'yyyy')),
|
|
236
236
|
React.createElement(Button, { onClick: calendarButtonClickHandler, locale: locale, value: calendarActiveDate || '', ref: buttonRef }),
|
|
237
|
-
displayDatePicker && (React.createElement(Calendar, { calendarClassName: classNames('ffe-calendar ffe-calendar--datepicker', { 'ffe-calendar--datepicker--above': calendarAbove }), locale: locale, onDatePicked: datePickedHandler, selectedDate: calendarActiveDate, focusOnMount: true, dropdownCaption: dropdownCaption, minDate: minDate, maxDate: maxDate })),
|
|
237
|
+
displayDatePicker && (React.createElement(Calendar, { calendarClassName: classNames('ffe-calendar ffe-calendar--datepicker', { 'ffe-calendar--datepicker--above': calendarAbove }), locale: locale, onDatePicked: datePickedHandler, selectedDate: calendarActiveDate, focusOnMount: true, dropdownCaption: dropdownCaption, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates })),
|
|
238
238
|
!!fieldMessage && (React.createElement(ErrorFieldMessage, { as: "p", id: fieldMessageId }, fieldMessage))));
|
|
239
239
|
};
|
package/lib/calendar/Calendar.js
CHANGED
|
@@ -99,7 +99,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
101
|
_this.state = {
|
|
102
|
-
calendar: new simplecalendar_1.SimpleCalendar((0, simpledate_1.getSimpleDateFromString)(props === null || props === void 0 ? void 0 : props.selectedDate), props.minDate, props.maxDate, props.locale),
|
|
102
|
+
calendar: new simplecalendar_1.SimpleCalendar((0, simpledate_1.getSimpleDateFromString)(props === null || props === void 0 ? void 0 : props.selectedDate), props.minDate, props.maxDate, props.disabledDates, props.locale),
|
|
103
103
|
isFocusingHeader: false,
|
|
104
104
|
};
|
|
105
105
|
_this.datepickerId = "ffe-calendar-".concat((0, uuid_1.v4)());
|
|
@@ -117,7 +117,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
117
117
|
Calendar.prototype.componentDidUpdate = function (prevProps) {
|
|
118
118
|
if (prevProps.selectedDate !== this.props.selectedDate) {
|
|
119
119
|
this.setState({
|
|
120
|
-
calendar: new simplecalendar_1.SimpleCalendar((0, simpledate_1.getSimpleDateFromString)(this.props.selectedDate), this.props.minDate, this.props.maxDate, this.props.locale),
|
|
120
|
+
calendar: new simplecalendar_1.SimpleCalendar((0, simpledate_1.getSimpleDateFromString)(this.props.selectedDate), this.props.minDate, this.props.maxDate, this.props.disabledDates, this.props.locale),
|
|
121
121
|
}, this.forceUpdate);
|
|
122
122
|
}
|
|
123
123
|
};
|
|
@@ -125,7 +125,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
125
125
|
return nextProps.selectedDate !== this.props.selectedDate;
|
|
126
126
|
};
|
|
127
127
|
Calendar.prototype.keyDown = function (event) {
|
|
128
|
-
var _a, _b;
|
|
128
|
+
var _a, _b, _c;
|
|
129
129
|
var calendar = this.state.calendar;
|
|
130
130
|
var scrollableEvents = [
|
|
131
131
|
'PageUp',
|
|
@@ -142,14 +142,15 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
142
142
|
}
|
|
143
143
|
switch (event.key) {
|
|
144
144
|
case 'Enter':
|
|
145
|
-
if (calendar.isDateWithinDateRange(calendar.focusedDate)
|
|
145
|
+
if (calendar.isDateWithinDateRange(calendar.focusedDate) &&
|
|
146
|
+
((_a = this.props.disabledDates) === null || _a === void 0 ? void 0 : _a.includes(calendar.focusedDate.toString())) === false) {
|
|
146
147
|
calendar.selectFocusedDate();
|
|
147
148
|
this.props.onDatePicked(calendar.selected());
|
|
148
149
|
}
|
|
149
150
|
event.preventDefault();
|
|
150
151
|
break;
|
|
151
152
|
case 'Escape':
|
|
152
|
-
(
|
|
153
|
+
(_c = (_b = this.props).escKeyHandler) === null || _c === void 0 ? void 0 : _c.call(_b, event);
|
|
153
154
|
break;
|
|
154
155
|
case 'Tab':
|
|
155
156
|
break;
|
|
@@ -194,7 +195,8 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
194
195
|
};
|
|
195
196
|
Calendar.prototype.mouseClick = function (date) {
|
|
196
197
|
var pickedDate = (0, simpledate_1.getSimpleDateFromTimestamp)(date.timestamp);
|
|
197
|
-
if (this.state.calendar.isDateWithinDateRange(pickedDate)
|
|
198
|
+
if (this.state.calendar.isDateWithinDateRange(pickedDate) &&
|
|
199
|
+
date.isEnabled) {
|
|
198
200
|
this.state.calendar.selectTimestamp(date.timestamp);
|
|
199
201
|
this.props.onDatePicked(this.state.calendar.selected());
|
|
200
202
|
}
|
|
@@ -254,7 +256,9 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
254
256
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
255
257
|
return (react_1.default.createElement("div", { role: "dialog", "aria-modal": true, "aria-labelledby": "".concat(this.datepickerId, "-title"), className: "ffe-default-mode" },
|
|
256
258
|
react_1.default.createElement("div", { className: this.props.calendarClassName || 'ffe-calendar', role: "application", onKeyDown: this.focusTrap },
|
|
257
|
-
react_1.default.createElement(Header_1.Header, { datepickerId: this.datepickerId, month: calendar.focusedMonth, nextMonthHandler: this.nextMonth, nextMonthLabel: calendar.nextName, previousMonthHandler: this.previousMonth, previousMonthLabel: calendar.previousName, year: calendar.focusedYear, prevMonthButtonElement: this.prevMonthButtonElementRef, nextMonthButtonElement: this.nextMonthButtonElementRef, monthNumber: calendar.focusedDate.month + 1, locale: this.props.locale, dropdownCaption: this.props.dropdownCaption, onMonthYearChange: function (month, year) {
|
|
259
|
+
react_1.default.createElement(Header_1.Header, { datepickerId: this.datepickerId, month: calendar.focusedMonth, nextMonthHandler: this.nextMonth, nextMonthLabel: calendar.nextName, previousMonthHandler: this.previousMonth, previousMonthLabel: calendar.previousName, year: calendar.focusedYear, prevMonthButtonElement: this.prevMonthButtonElementRef, nextMonthButtonElement: this.nextMonthButtonElementRef, monthNumber: calendar.focusedDate.month + 1, locale: this.props.locale, dropdownCaption: this.props.dropdownCaption, onMonthYearChange: function (month, year) {
|
|
260
|
+
return _this.navigateToMonthYear(month, year);
|
|
261
|
+
}, minDate: this.props.minDate, maxDate: this.props.maxDate }),
|
|
258
262
|
react_1.default.createElement("table", { className: "ffe-calendar__grid", onKeyDown: this.keyDown, role: "presentation" },
|
|
259
263
|
react_1.default.createElement("thead", null,
|
|
260
264
|
react_1.default.createElement("tr", null, calendar.dayNames.map(this.renderDay))),
|
|
@@ -34,8 +34,9 @@ function isDateWithinMinMax(date, minDate, maxDate) {
|
|
|
34
34
|
return !(maxDate && date.isAfter(maxDate));
|
|
35
35
|
}
|
|
36
36
|
var SimpleCalendar = /** @class */ (function () {
|
|
37
|
-
function SimpleCalendar(initialDate, minDate, maxDate, locale) {
|
|
37
|
+
function SimpleCalendar(initialDate, minDate, maxDate, disabledDates, locale) {
|
|
38
38
|
if (locale === void 0) { locale = 'nb'; }
|
|
39
|
+
this.disabledDates = [];
|
|
39
40
|
this.locale = locale;
|
|
40
41
|
this.focusedDate = initialDate
|
|
41
42
|
? initialDate.clone()
|
|
@@ -43,6 +44,7 @@ var SimpleCalendar = /** @class */ (function () {
|
|
|
43
44
|
this.selectedDate = initialDate ? initialDate.clone() : initialDate;
|
|
44
45
|
this.minDate = minDate ? (0, simpledate_1.getSimpleDateFromString)(minDate) : null;
|
|
45
46
|
this.maxDate = maxDate ? (0, simpledate_1.getSimpleDateFromString)(maxDate) : null;
|
|
47
|
+
this.disabledDates = disabledDates ? disabledDates : [];
|
|
46
48
|
// Settings
|
|
47
49
|
this.firstDay = i18n_1.default[locale].FIRST_DAY_OF_WEEK;
|
|
48
50
|
}
|
|
@@ -167,7 +169,10 @@ var SimpleCalendar = /** @class */ (function () {
|
|
|
167
169
|
isFocus: currentDate.equal(this.focusedDate),
|
|
168
170
|
isSelected: !!this.selectedDate &&
|
|
169
171
|
currentDate.equal(this.selectedDate),
|
|
170
|
-
isEnabled: isDateWithinMinMax(currentDate, this.minDate, this.maxDate)
|
|
172
|
+
isEnabled: isDateWithinMinMax(currentDate, this.minDate, this.maxDate) &&
|
|
173
|
+
(this.disabledDates
|
|
174
|
+
? !this.disabledDates.includes(currentDate.format())
|
|
175
|
+
: true),
|
|
171
176
|
};
|
|
172
177
|
week.dates.push(date);
|
|
173
178
|
currentDate.adjust({ period: 'D', offset: 1 });
|
|
@@ -51,7 +51,7 @@ var ffe_form_react_1 = require("@sb1/ffe-form-react");
|
|
|
51
51
|
var i18n_1 = __importDefault(require("../i18n/i18n"));
|
|
52
52
|
var types_1 = require("../types");
|
|
53
53
|
var DatepickerComp = function (_a) {
|
|
54
|
-
var ariaInvalidState = _a.ariaInvalid, ariaInvalidProp = _a["aria-invalid"], ariaDescribedbyState = _a.ariaDescribedby, ariaDescribedbyProp = _a["aria-describedby"], onBlur = _a.onBlur, calendarAbove = _a.calendarAbove, id = _a.id, maxDateProp = _a.maxDate, minDateProp = _a.minDate, onChange = _a.onChange, fullWidth = _a.fullWidth, fieldMessage = _a.fieldMessage, labelId = _a.labelId, dropdownCaption = _a.dropdownCaption;
|
|
54
|
+
var ariaInvalidState = _a.ariaInvalid, ariaInvalidProp = _a["aria-invalid"], ariaDescribedbyState = _a.ariaDescribedby, ariaDescribedbyProp = _a["aria-describedby"], onBlur = _a.onBlur, calendarAbove = _a.calendarAbove, id = _a.id, maxDateProp = _a.maxDate, minDateProp = _a.minDate, onChange = _a.onChange, fullWidth = _a.fullWidth, fieldMessage = _a.fieldMessage, labelId = _a.labelId, dropdownCaption = _a.dropdownCaption, disabledDates = _a.disabledDates;
|
|
55
55
|
var _b = (0, react_1.useContext)(DatepickerContext_1.DatepickerContext), day = _b.day, setDay = _b.setDay, year = _b.year, setYear = _b.setYear, month = _b.month, setMonth = _b.setMonth, locale = _b.locale, calendarActiveDate = _b.calendarActiveDate, setCalendarActiveDate = _b.setCalendarActiveDate, setLastChangedValue = _b.setLastChangedValue;
|
|
56
56
|
var formatDate = (0, react_1.useCallback)(function () {
|
|
57
57
|
return (0, dateUtil_1.getPaddedDateString)(day, month, year);
|
|
@@ -273,7 +273,7 @@ var DatepickerComp = function (_a) {
|
|
|
273
273
|
setYear(newValue);
|
|
274
274
|
}, prevSpinButton: monthRef, maxLength: 4, "aria-invalid": ariaInvalid(), "aria-valuetext": "".concat(year), "aria-valuenow": typeof year === 'number' ? year : undefined, "aria-label": i18n_1.default[locale].YEAR, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, year ? year : 'yyyy')),
|
|
275
275
|
react_1.default.createElement(button_1.Button, { onClick: calendarButtonClickHandler, locale: locale, value: calendarActiveDate || '', ref: buttonRef }),
|
|
276
|
-
displayDatePicker && (react_1.default.createElement(calendar_1.Calendar, { calendarClassName: (0, classnames_1.default)('ffe-calendar ffe-calendar--datepicker', { 'ffe-calendar--datepicker--above': calendarAbove }), locale: locale, onDatePicked: datePickedHandler, selectedDate: calendarActiveDate, focusOnMount: true, dropdownCaption: dropdownCaption, minDate: minDate, maxDate: maxDate })),
|
|
276
|
+
displayDatePicker && (react_1.default.createElement(calendar_1.Calendar, { calendarClassName: (0, classnames_1.default)('ffe-calendar ffe-calendar--datepicker', { 'ffe-calendar--datepicker--above': calendarAbove }), locale: locale, onDatePicked: datePickedHandler, selectedDate: calendarActiveDate, focusOnMount: true, dropdownCaption: dropdownCaption, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates })),
|
|
277
277
|
!!fieldMessage && (react_1.default.createElement(ffe_form_react_1.ErrorFieldMessage, { as: "p", id: fieldMessageId }, fieldMessage))));
|
|
278
278
|
};
|
|
279
279
|
exports.DatepickerComp = DatepickerComp;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-datepicker-react",
|
|
3
|
-
"version": "100.
|
|
3
|
+
"version": "100.6.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank 1",
|
|
6
6
|
"files": [
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
"test:watch": "ffe-buildtool jest --watch"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@sb1/ffe-datepicker": "^100.
|
|
28
|
-
"@sb1/ffe-dropdown-react": "^100.
|
|
29
|
-
"@sb1/ffe-form": "^100.
|
|
30
|
-
"@sb1/ffe-form-react": "^100.
|
|
31
|
-
"@sb1/ffe-icons-react": "^100.
|
|
27
|
+
"@sb1/ffe-datepicker": "^100.6.0",
|
|
28
|
+
"@sb1/ffe-dropdown-react": "^100.6.0",
|
|
29
|
+
"@sb1/ffe-form": "^100.6.0",
|
|
30
|
+
"@sb1/ffe-form-react": "^100.6.0",
|
|
31
|
+
"@sb1/ffe-icons-react": "^100.6.0",
|
|
32
32
|
"@testing-library/react": "^16.0.0",
|
|
33
33
|
"@types/lodash.debounce": "^4.0.9",
|
|
34
34
|
"classnames": "^2.3.1",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"uuid": "^9.0.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@sb1/ffe-buildtool": "^100.
|
|
39
|
+
"@sb1/ffe-buildtool": "^100.6.0",
|
|
40
40
|
"eslint": "^9.22.0",
|
|
41
41
|
"react": "^18.2.0",
|
|
42
42
|
"react-dom": "^18.2.0"
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "2fb5ef0325f4cc6fb7e3e5ca177e34486828838d"
|
|
51
51
|
}
|
|
@@ -14,6 +14,8 @@ export interface CalendarProps {
|
|
|
14
14
|
minDate?: string | null;
|
|
15
15
|
/** Seneste tillatte dato (format: 'dd.mm.yyyy') - brukes kun til å bestemme år-intervall i dropdown */
|
|
16
16
|
maxDate?: string | null;
|
|
17
|
+
/** Array av datoer i format 'dd.mm.yyyy' som skal være deaktivert */
|
|
18
|
+
disabledDates?: string[];
|
|
17
19
|
}
|
|
18
20
|
interface State {
|
|
19
21
|
calendar: SimpleCalendar;
|
|
@@ -9,7 +9,8 @@ export declare class SimpleCalendar {
|
|
|
9
9
|
firstDay: number;
|
|
10
10
|
minDate: SimpleDate | null;
|
|
11
11
|
maxDate: SimpleDate | null;
|
|
12
|
-
|
|
12
|
+
disabledDates: string[];
|
|
13
|
+
constructor(initialDate?: SimpleDate | null, minDate?: string | null, maxDate?: string | null, disabledDates?: string[], locale?: Locale);
|
|
13
14
|
get focusedMonth(): any;
|
|
14
15
|
get focusedYear(): number;
|
|
15
16
|
get dayNames(): {
|
|
@@ -31,5 +31,7 @@ export interface DatepickerCompProps {
|
|
|
31
31
|
labelId: string;
|
|
32
32
|
/** Om måned- og år-dropdown skal vises i kalenderen */
|
|
33
33
|
dropdownCaption?: boolean;
|
|
34
|
+
/** Liste over datoer som skal deaktiveres i kalenderen */
|
|
35
|
+
disabledDates?: string[];
|
|
34
36
|
}
|
|
35
37
|
export declare const DatepickerComp: React.FC<DatepickerCompProps>;
|