@navikt/ds-react 2.0.17 → 2.1.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/_docs.json +63 -0
- package/cjs/date/hooks/useDatepicker.js +4 -4
- package/cjs/date/hooks/useMonthPicker.js +4 -4
- package/cjs/date/hooks/useRangeDatepicker.js +5 -5
- package/cjs/date/utils/check-dates.js +1 -1
- package/cjs/date/utils/parse-date.js +58 -13
- package/esm/date/hooks/useDatepicker.d.ts +11 -1
- package/esm/date/hooks/useDatepicker.js +4 -4
- package/esm/date/hooks/useDatepicker.js.map +1 -1
- package/esm/date/hooks/useMonthPicker.d.ts +11 -1
- package/esm/date/hooks/useMonthPicker.js +4 -4
- package/esm/date/hooks/useMonthPicker.js.map +1 -1
- package/esm/date/hooks/useRangeDatepicker.d.ts +7 -2
- package/esm/date/hooks/useRangeDatepicker.js +5 -5
- package/esm/date/hooks/useRangeDatepicker.js.map +1 -1
- package/esm/date/utils/check-dates.js +1 -1
- package/esm/date/utils/check-dates.js.map +1 -1
- package/esm/date/utils/parse-date.d.ts +1 -1
- package/esm/date/utils/parse-date.js +57 -12
- package/esm/date/utils/parse-date.js.map +1 -1
- package/package.json +2 -2
- package/src/date/hooks/useDatepicker.tsx +33 -4
- package/src/date/hooks/useMonthPicker.tsx +33 -5
- package/src/date/hooks/useRangeDatepicker.tsx +34 -9
- package/src/date/utils/__tests__/format-dates.test.ts +11 -1
- package/src/date/utils/__tests__/parse-dates.test.ts +44 -3
- package/src/date/utils/check-dates.ts +1 -1
- package/src/date/utils/parse-date.ts +98 -19
package/_docs.json
CHANGED
|
@@ -9089,6 +9089,27 @@
|
|
|
9089
9089
|
"name": "((val: DateValidationT) => void)"
|
|
9090
9090
|
}
|
|
9091
9091
|
},
|
|
9092
|
+
"allowTwoDigitYear": {
|
|
9093
|
+
"defaultValue": {
|
|
9094
|
+
"value": "true"
|
|
9095
|
+
},
|
|
9096
|
+
"description": "Allows input of with 'yy' year format.\n@Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.\nIn 2023 this equals to 1943 - 2042",
|
|
9097
|
+
"name": "allowTwoDigitYear",
|
|
9098
|
+
"parent": {
|
|
9099
|
+
"fileName": "src/date/hooks/useDatepicker.tsx",
|
|
9100
|
+
"name": "UseDatepickerOptions"
|
|
9101
|
+
},
|
|
9102
|
+
"declarations": [
|
|
9103
|
+
{
|
|
9104
|
+
"fileName": "src/date/hooks/useDatepicker.tsx",
|
|
9105
|
+
"name": "UseDatepickerOptions"
|
|
9106
|
+
}
|
|
9107
|
+
],
|
|
9108
|
+
"required": false,
|
|
9109
|
+
"type": {
|
|
9110
|
+
"name": "boolean"
|
|
9111
|
+
}
|
|
9112
|
+
},
|
|
9092
9113
|
"locale": {
|
|
9093
9114
|
"defaultValue": {
|
|
9094
9115
|
"value": "\"nb\" (norsk bokmål)"
|
|
@@ -9291,6 +9312,27 @@
|
|
|
9291
9312
|
"name": "Date"
|
|
9292
9313
|
}
|
|
9293
9314
|
},
|
|
9315
|
+
"allowTwoDigitYear": {
|
|
9316
|
+
"defaultValue": {
|
|
9317
|
+
"value": "true"
|
|
9318
|
+
},
|
|
9319
|
+
"description": "Allows input of with 'yy' year format.\n@Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.\nIn 2023 this equals to 1943 - 2042",
|
|
9320
|
+
"name": "allowTwoDigitYear",
|
|
9321
|
+
"parent": {
|
|
9322
|
+
"fileName": "src/date/hooks/useMonthPicker.tsx",
|
|
9323
|
+
"name": "UseMonthPickerOptions"
|
|
9324
|
+
},
|
|
9325
|
+
"declarations": [
|
|
9326
|
+
{
|
|
9327
|
+
"fileName": "src/date/hooks/useMonthPicker.tsx",
|
|
9328
|
+
"name": "UseMonthPickerOptions"
|
|
9329
|
+
}
|
|
9330
|
+
],
|
|
9331
|
+
"required": false,
|
|
9332
|
+
"type": {
|
|
9333
|
+
"name": "boolean"
|
|
9334
|
+
}
|
|
9335
|
+
},
|
|
9294
9336
|
"locale": {
|
|
9295
9337
|
"defaultValue": {
|
|
9296
9338
|
"value": "\"nb\" (norsk bokmål)"
|
|
@@ -9608,6 +9650,27 @@
|
|
|
9608
9650
|
"type": {
|
|
9609
9651
|
"name": "string"
|
|
9610
9652
|
}
|
|
9653
|
+
},
|
|
9654
|
+
"allowTwoDigitYear": {
|
|
9655
|
+
"defaultValue": {
|
|
9656
|
+
"value": "true"
|
|
9657
|
+
},
|
|
9658
|
+
"description": "Allows input of with 'yy' year format.\n@Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.\nIn 2023 this equals to 1943 - 2042",
|
|
9659
|
+
"name": "allowTwoDigitYear",
|
|
9660
|
+
"parent": {
|
|
9661
|
+
"fileName": "react/src/date/hooks/useDatepicker.tsx",
|
|
9662
|
+
"name": "UseDatepickerOptions"
|
|
9663
|
+
},
|
|
9664
|
+
"declarations": [
|
|
9665
|
+
{
|
|
9666
|
+
"fileName": "react/src/date/hooks/useDatepicker.tsx",
|
|
9667
|
+
"name": "UseDatepickerOptions"
|
|
9668
|
+
}
|
|
9669
|
+
],
|
|
9670
|
+
"required": false,
|
|
9671
|
+
"type": {
|
|
9672
|
+
"name": "boolean"
|
|
9673
|
+
}
|
|
9611
9674
|
}
|
|
9612
9675
|
}
|
|
9613
9676
|
},
|
|
@@ -12,7 +12,7 @@ const utils_1 = require("../utils");
|
|
|
12
12
|
const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, val));
|
|
13
13
|
const useDatepicker = (opt = {}) => {
|
|
14
14
|
var _a;
|
|
15
|
-
const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, defaultMonth, } = opt;
|
|
15
|
+
const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, } = opt;
|
|
16
16
|
const locale = (0, utils_1.getLocaleFromString)(_locale);
|
|
17
17
|
const inputRef = (0, react_1.useRef)(null);
|
|
18
18
|
const daypickerRef = (0, react_1.useRef)(null);
|
|
@@ -72,14 +72,14 @@ const useDatepicker = (opt = {}) => {
|
|
|
72
72
|
};
|
|
73
73
|
const handleFocus = (e) => {
|
|
74
74
|
!open && setOpen(true);
|
|
75
|
-
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
|
|
75
|
+
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
76
76
|
if ((0, utils_1.isValidDate)(day)) {
|
|
77
77
|
setMonth(day);
|
|
78
78
|
setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
81
|
const handleBlur = (e) => {
|
|
82
|
-
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
|
|
82
|
+
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
83
83
|
(0, utils_1.isValidDate)(day) &&
|
|
84
84
|
setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
|
|
85
85
|
};
|
|
@@ -105,7 +105,7 @@ const useDatepicker = (opt = {}) => {
|
|
|
105
105
|
// the calendar’s month.
|
|
106
106
|
const handleChange = (e) => {
|
|
107
107
|
setInputValue(e.target.value);
|
|
108
|
-
const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
|
|
108
|
+
const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
109
109
|
const isBefore = fromDate && day && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
|
|
110
110
|
const isAfter = toDate && day && (0, differenceInCalendarDays_1.default)(day, toDate) > 0;
|
|
111
111
|
if (!(0, utils_1.isValidDate)(day) ||
|
|
@@ -6,7 +6,7 @@ const utils_1 = require("../utils");
|
|
|
6
6
|
const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidMonth: true }, val));
|
|
7
7
|
const useMonthpicker = (opt = {}) => {
|
|
8
8
|
var _a;
|
|
9
|
-
const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, } = opt;
|
|
9
|
+
const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, allowTwoDigitYear = true, } = opt;
|
|
10
10
|
const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
|
|
11
11
|
const today = new Date();
|
|
12
12
|
const locale = (0, utils_1.getLocaleFromString)(_locale);
|
|
@@ -67,14 +67,14 @@ const useMonthpicker = (opt = {}) => {
|
|
|
67
67
|
};
|
|
68
68
|
const handleFocus = (e) => {
|
|
69
69
|
!open && setOpen(true);
|
|
70
|
-
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
|
|
70
|
+
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
|
|
71
71
|
if ((0, utils_1.isValidDate)(day)) {
|
|
72
72
|
setYear(day);
|
|
73
73
|
setInputValue((0, utils_1.formatDateForInput)(day, locale, "month", inputFormat));
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
const handleBlur = (e) => {
|
|
77
|
-
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
|
|
77
|
+
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
|
|
78
78
|
(0, utils_1.isValidDate)(day) &&
|
|
79
79
|
setInputValue((0, utils_1.formatDateForInput)(day, locale, "month", inputFormat));
|
|
80
80
|
};
|
|
@@ -99,7 +99,7 @@ const useMonthpicker = (opt = {}) => {
|
|
|
99
99
|
// the calendar’s month.
|
|
100
100
|
const handleChange = (e) => {
|
|
101
101
|
setInputValue(e.target.value);
|
|
102
|
-
const month = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
|
|
102
|
+
const month = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
|
|
103
103
|
const isBefore = fromDate &&
|
|
104
104
|
month &&
|
|
105
105
|
(fromDate.getFullYear() > month.getFullYear() ||
|
|
@@ -78,7 +78,7 @@ const initialValidation = (range, opt) => {
|
|
|
78
78
|
return getValidationMessage(Object.assign({}, fromVal), Object.assign({}, toVal));
|
|
79
79
|
};
|
|
80
80
|
const useRangeDatepicker = (opt = {}) => {
|
|
81
|
-
const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, } = opt;
|
|
81
|
+
const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, } = opt;
|
|
82
82
|
const locale = (0, utils_1.getLocaleFromString)(_locale);
|
|
83
83
|
const inputRefTo = (0, react_1.useRef)(null);
|
|
84
84
|
const inputRefFrom = (0, react_1.useRef)(null);
|
|
@@ -154,7 +154,7 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
154
154
|
};
|
|
155
155
|
const handleFocus = (e, src) => {
|
|
156
156
|
!open && setOpen(true);
|
|
157
|
-
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
|
|
157
|
+
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
158
158
|
if ((0, utils_1.isValidDate)(day)) {
|
|
159
159
|
setMonth(day);
|
|
160
160
|
src === RANGE.FROM
|
|
@@ -163,7 +163,7 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
163
163
|
}
|
|
164
164
|
};
|
|
165
165
|
const handleBlur = (e, src) => {
|
|
166
|
-
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
|
|
166
|
+
let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
167
167
|
if (!(0, utils_1.isValidDate)(day)) {
|
|
168
168
|
return;
|
|
169
169
|
}
|
|
@@ -226,7 +226,7 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
226
226
|
return;
|
|
227
227
|
}
|
|
228
228
|
if (toInputValue && !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
|
|
229
|
-
const toDay = (0, utils_1.parseDate)(toInputValue, today, locale, "date");
|
|
229
|
+
const toDay = (0, utils_1.parseDate)(toInputValue, today, locale, "date", allowTwoDigitYear);
|
|
230
230
|
if (validateDay(toDay)) {
|
|
231
231
|
updateRange({ from: day, to: toDay });
|
|
232
232
|
setMonth(day);
|
|
@@ -278,7 +278,7 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
278
278
|
};
|
|
279
279
|
/* live-update datepicker based on changes in inputfields */
|
|
280
280
|
const handleChange = (e, src) => {
|
|
281
|
-
const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
|
|
281
|
+
const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
282
282
|
const isBefore = fromDate && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
|
|
283
283
|
const isAfter = toDate && (0, differenceInCalendarDays_1.default)(day, toDate) > 0;
|
|
284
284
|
return src === RANGE.FROM
|
|
@@ -12,7 +12,7 @@ const dateIsInCurrentMonth = (date, dateToCompare) => {
|
|
|
12
12
|
exports.dateIsInCurrentMonth = dateIsInCurrentMonth;
|
|
13
13
|
/** @private */
|
|
14
14
|
function isValidDate(day) {
|
|
15
|
-
return !isNaN(day.getTime());
|
|
15
|
+
return day && !isNaN(day === null || day === void 0 ? void 0 : day.getTime()) && day.getFullYear() > 999;
|
|
16
16
|
}
|
|
17
17
|
exports.isValidDate = isValidDate;
|
|
18
18
|
const hasNextYear = (year, years, val) => {
|
|
@@ -5,6 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.parseDate = exports.INPUT_DATE_STRING_FORMAT_MONTH = exports.INPUT_DATE_STRING_FORMAT_DATE = void 0;
|
|
7
7
|
const parse_1 = __importDefault(require("date-fns/parse"));
|
|
8
|
+
const isBefore_1 = __importDefault(require("date-fns/isBefore"));
|
|
9
|
+
const sub_1 = __importDefault(require("date-fns/sub"));
|
|
8
10
|
const _1 = require(".");
|
|
9
11
|
exports.INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";
|
|
10
12
|
exports.INPUT_DATE_STRING_FORMAT_MONTH = "MMMM yyyy";
|
|
@@ -23,7 +25,47 @@ const ALLOWED_INPUT_FORMATS_MONTH = [
|
|
|
23
25
|
exports.INPUT_DATE_STRING_FORMAT_MONTH,
|
|
24
26
|
...ALLOWED_INPUT_FORMATS_DATE,
|
|
25
27
|
];
|
|
26
|
-
const
|
|
28
|
+
const parseDate = (date, today, locale, type, allowTwoDigitYear) => {
|
|
29
|
+
let parsed;
|
|
30
|
+
const ALLOWED_FORMATS = type === "date" ? ALLOWED_INPUT_FORMATS_DATE : ALLOWED_INPUT_FORMATS_MONTH;
|
|
31
|
+
if (allowTwoDigitYear) {
|
|
32
|
+
for (const format of ALLOWED_FORMATS) {
|
|
33
|
+
parsed = (0, parse_1.default)(date, format, today, { locale });
|
|
34
|
+
if ((0, _1.isValidDate)(parsed) &&
|
|
35
|
+
!isTwoDigitYear(date, today, locale, ALLOWED_FORMATS)) {
|
|
36
|
+
return parsed;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
for (const format of [
|
|
40
|
+
...ALLOWED_FORMATS.map((x) => x.replace("yyyy", "yy")),
|
|
41
|
+
]) {
|
|
42
|
+
parsed = (0, parse_1.default)(date, format, today, { locale });
|
|
43
|
+
if ((0, _1.isValidDate)(parsed) &&
|
|
44
|
+
isTwoDigitYear(date, today, locale, ALLOWED_FORMATS)) {
|
|
45
|
+
const convertedDate = assignCenturyToDate(date, format, today, locale);
|
|
46
|
+
if ((0, _1.isValidDate)(new Date(convertedDate))) {
|
|
47
|
+
return new Date(convertedDate);
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
return new Date("Invalid date");
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
return new Date("Invalid date");
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
for (const format of ALLOWED_FORMATS) {
|
|
58
|
+
parsed = (0, parse_1.default)(date, format, today, { locale });
|
|
59
|
+
if ((0, _1.isValidDate)(parsed) &&
|
|
60
|
+
!isTwoDigitYear(date, today, locale, ALLOWED_FORMATS)) {
|
|
61
|
+
return parsed;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return new Date("Invalid date");
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
exports.parseDate = parseDate;
|
|
68
|
+
function isTwoDigitYear(dateString, today, locale, formats) {
|
|
27
69
|
let parsed;
|
|
28
70
|
const newFormat = formats.map((x) => x.replace("yyyy", "yy"));
|
|
29
71
|
for (const format of newFormat) {
|
|
@@ -33,17 +75,20 @@ const isTwoDigitYear = (dateString, today, locale, formats) => {
|
|
|
33
75
|
}
|
|
34
76
|
}
|
|
35
77
|
return false;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
78
|
+
}
|
|
79
|
+
function assignCenturyToDate(dateStr, format, today, locale) {
|
|
80
|
+
const date20Century = (0, parse_1.default)(appendCenturyToTwoYearDigitDateString(dateStr, "19"), format.replace("yy", "yyyy"), today, { locale });
|
|
81
|
+
const date21Century = (0, parse_1.default)(appendCenturyToTwoYearDigitDateString(dateStr, "20"), format.replace("yy", "yyyy"), today, { locale });
|
|
82
|
+
if ((0, _1.isValidDate)(date20Century) && (0, _1.isValidDate)(date21Century)) {
|
|
83
|
+
return (0, isBefore_1.default)(date20Century, (0, sub_1.default)(new Date(), {
|
|
84
|
+
years: 80,
|
|
85
|
+
}))
|
|
86
|
+
? date21Century
|
|
87
|
+
: date20Century;
|
|
46
88
|
}
|
|
47
89
|
return new Date("Invalid date");
|
|
48
|
-
}
|
|
49
|
-
|
|
90
|
+
}
|
|
91
|
+
function appendCenturyToTwoYearDigitDateString(dateString, century) {
|
|
92
|
+
const twoDigitYear = dateString.slice(-2);
|
|
93
|
+
return `${dateString.slice(0, dateString.length - 2)}${century}${twoDigitYear}`;
|
|
94
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { DateInputProps } from "../DateInput";
|
|
2
3
|
import { DatePickerProps } from "../datepicker/DatePicker";
|
|
3
4
|
export interface UseDatepickerOptions extends Pick<DatePickerProps, "locale" | "fromDate" | "toDate" | "today" | "toDate" | "fromDate" | "toDate" | "disabled" | "disableWeekends"> {
|
|
@@ -26,6 +27,13 @@ export interface UseDatepickerOptions extends Pick<DatePickerProps, "locale" | "
|
|
|
26
27
|
* validation-callback
|
|
27
28
|
*/
|
|
28
29
|
onValidate?: (val: DateValidationT) => void;
|
|
30
|
+
/**
|
|
31
|
+
* Allows input of with 'yy' year format.
|
|
32
|
+
* @default true
|
|
33
|
+
* @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
|
|
34
|
+
* In 2023 this equals to 1943 - 2042
|
|
35
|
+
*/
|
|
36
|
+
allowTwoDigitYear?: boolean;
|
|
29
37
|
}
|
|
30
38
|
interface UseDatepickerValue {
|
|
31
39
|
/**
|
|
@@ -35,7 +43,9 @@ interface UseDatepickerValue {
|
|
|
35
43
|
/**
|
|
36
44
|
* Use: <DatePicker.Input {...inputProps}/>
|
|
37
45
|
*/
|
|
38
|
-
inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"
|
|
46
|
+
inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
|
|
47
|
+
ref: React.RefObject<HTMLInputElement>;
|
|
48
|
+
};
|
|
39
49
|
/**
|
|
40
50
|
* Resets all states (callback)
|
|
41
51
|
*/
|
|
@@ -6,7 +6,7 @@ import { formatDateForInput, getLocaleFromString, isValidDate, parseDate, } from
|
|
|
6
6
|
const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, val));
|
|
7
7
|
export const useDatepicker = (opt = {}) => {
|
|
8
8
|
var _a;
|
|
9
|
-
const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, defaultMonth, } = opt;
|
|
9
|
+
const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, } = opt;
|
|
10
10
|
const locale = getLocaleFromString(_locale);
|
|
11
11
|
const inputRef = useRef(null);
|
|
12
12
|
const daypickerRef = useRef(null);
|
|
@@ -66,14 +66,14 @@ export const useDatepicker = (opt = {}) => {
|
|
|
66
66
|
};
|
|
67
67
|
const handleFocus = (e) => {
|
|
68
68
|
!open && setOpen(true);
|
|
69
|
-
let day = parseDate(e.target.value, today, locale, "date");
|
|
69
|
+
let day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
70
70
|
if (isValidDate(day)) {
|
|
71
71
|
setMonth(day);
|
|
72
72
|
setInputValue(formatDateForInput(day, locale, "date", inputFormat));
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
75
|
const handleBlur = (e) => {
|
|
76
|
-
let day = parseDate(e.target.value, today, locale, "date");
|
|
76
|
+
let day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
77
77
|
isValidDate(day) &&
|
|
78
78
|
setInputValue(formatDateForInput(day, locale, "date", inputFormat));
|
|
79
79
|
};
|
|
@@ -99,7 +99,7 @@ export const useDatepicker = (opt = {}) => {
|
|
|
99
99
|
// the calendar’s month.
|
|
100
100
|
const handleChange = (e) => {
|
|
101
101
|
setInputValue(e.target.value);
|
|
102
|
-
const day = parseDate(e.target.value, today, locale, "date");
|
|
102
|
+
const day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
103
103
|
const isBefore = fromDate && day && differenceInCalendarDays(fromDate, day) > 0;
|
|
104
104
|
const isAfter = toDate && day && differenceInCalendarDays(day, toDate) > 0;
|
|
105
105
|
if (!isValidDate(day) ||
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDatepicker.js","sourceRoot":"","sources":["../../../src/date/hooks/useDatepicker.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,MAAM,mCAAmC,CAAC;AACzE,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAwB,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGjE,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,WAAW,EACX,SAAS,GACV,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"useDatepicker.js","sourceRoot":"","sources":["../../../src/date/hooks/useDatepicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { DateInputProps } from "../DateInput";
|
|
2
3
|
import { MonthPickerProps } from "../monthpicker/MonthPicker";
|
|
3
4
|
export interface UseMonthPickerOptions extends Pick<MonthPickerProps, "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"> {
|
|
@@ -22,6 +23,13 @@ export interface UseMonthPickerOptions extends Pick<MonthPickerProps, "locale" |
|
|
|
22
23
|
* Default shown year
|
|
23
24
|
*/
|
|
24
25
|
defaultYear?: Date;
|
|
26
|
+
/**
|
|
27
|
+
* Allows input of with 'yy' year format.
|
|
28
|
+
* @default true
|
|
29
|
+
* @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
|
|
30
|
+
* In 2023 this equals to 1943 - 2042
|
|
31
|
+
*/
|
|
32
|
+
allowTwoDigitYear?: boolean;
|
|
25
33
|
}
|
|
26
34
|
interface UseMonthPickerValue {
|
|
27
35
|
/**
|
|
@@ -31,7 +39,9 @@ interface UseMonthPickerValue {
|
|
|
31
39
|
/**
|
|
32
40
|
* Use: <MonthPicker.Input {...inputProps} />
|
|
33
41
|
*/
|
|
34
|
-
inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"
|
|
42
|
+
inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
|
|
43
|
+
ref: React.RefObject<HTMLInputElement>;
|
|
44
|
+
};
|
|
35
45
|
/**
|
|
36
46
|
* Currently selected Date
|
|
37
47
|
* Up to user to validate value and extract month
|
|
@@ -3,7 +3,7 @@ import { formatDateForInput, getLocaleFromString, isMatch, isValidDate, parseDat
|
|
|
3
3
|
const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidMonth: true }, val));
|
|
4
4
|
export const useMonthpicker = (opt = {}) => {
|
|
5
5
|
var _a;
|
|
6
|
-
const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, } = opt;
|
|
6
|
+
const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, allowTwoDigitYear = true, } = opt;
|
|
7
7
|
const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
|
|
8
8
|
const today = new Date();
|
|
9
9
|
const locale = getLocaleFromString(_locale);
|
|
@@ -64,14 +64,14 @@ export const useMonthpicker = (opt = {}) => {
|
|
|
64
64
|
};
|
|
65
65
|
const handleFocus = (e) => {
|
|
66
66
|
!open && setOpen(true);
|
|
67
|
-
let day = parseDate(e.target.value, today, locale, "month");
|
|
67
|
+
let day = parseDate(e.target.value, today, locale, "month", allowTwoDigitYear);
|
|
68
68
|
if (isValidDate(day)) {
|
|
69
69
|
setYear(day);
|
|
70
70
|
setInputValue(formatDateForInput(day, locale, "month", inputFormat));
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
73
|
const handleBlur = (e) => {
|
|
74
|
-
let day = parseDate(e.target.value, today, locale, "month");
|
|
74
|
+
let day = parseDate(e.target.value, today, locale, "month", allowTwoDigitYear);
|
|
75
75
|
isValidDate(day) &&
|
|
76
76
|
setInputValue(formatDateForInput(day, locale, "month", inputFormat));
|
|
77
77
|
};
|
|
@@ -96,7 +96,7 @@ export const useMonthpicker = (opt = {}) => {
|
|
|
96
96
|
// the calendar’s month.
|
|
97
97
|
const handleChange = (e) => {
|
|
98
98
|
setInputValue(e.target.value);
|
|
99
|
-
const month = parseDate(e.target.value, today, locale, "month");
|
|
99
|
+
const month = parseDate(e.target.value, today, locale, "month", allowTwoDigitYear);
|
|
100
100
|
const isBefore = fromDate &&
|
|
101
101
|
month &&
|
|
102
102
|
(fromDate.getFullYear() > month.getFullYear() ||
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMonthPicker.js","sourceRoot":"","sources":["../../../src/date/hooks/useMonthPicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,OAAO,EACP,WAAW,EACX,SAAS,GACV,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"useMonthPicker.js","sourceRoot":"","sources":["../../../src/date/hooks/useMonthPicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { DateRange } from "react-day-picker";
|
|
2
3
|
import { DateInputProps } from "../DateInput";
|
|
3
4
|
import { DatePickerProps } from "../datepicker/DatePicker";
|
|
@@ -30,11 +31,15 @@ interface UseRangeDatepickerValue {
|
|
|
30
31
|
/**
|
|
31
32
|
* Use: <DatePicker.Input label="from" {...fromInputProps}/>
|
|
32
33
|
*/
|
|
33
|
-
fromInputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"
|
|
34
|
+
fromInputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
|
|
35
|
+
ref: React.RefObject<HTMLInputElement>;
|
|
36
|
+
};
|
|
34
37
|
/**
|
|
35
38
|
* Use: <DatePicker.Input label="to" {...toInputProps}/>
|
|
36
39
|
*/
|
|
37
|
-
toInputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"
|
|
40
|
+
toInputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
|
|
41
|
+
ref: React.RefObject<HTMLInputElement>;
|
|
42
|
+
};
|
|
38
43
|
/**
|
|
39
44
|
* Resets all states (callback)
|
|
40
45
|
*/
|
|
@@ -72,7 +72,7 @@ const initialValidation = (range, opt) => {
|
|
|
72
72
|
return getValidationMessage(Object.assign({}, fromVal), Object.assign({}, toVal));
|
|
73
73
|
};
|
|
74
74
|
export const useRangeDatepicker = (opt = {}) => {
|
|
75
|
-
const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, } = opt;
|
|
75
|
+
const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, } = opt;
|
|
76
76
|
const locale = getLocaleFromString(_locale);
|
|
77
77
|
const inputRefTo = useRef(null);
|
|
78
78
|
const inputRefFrom = useRef(null);
|
|
@@ -148,7 +148,7 @@ export const useRangeDatepicker = (opt = {}) => {
|
|
|
148
148
|
};
|
|
149
149
|
const handleFocus = (e, src) => {
|
|
150
150
|
!open && setOpen(true);
|
|
151
|
-
let day = parseDate(e.target.value, today, locale, "date");
|
|
151
|
+
let day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
152
152
|
if (isValidDate(day)) {
|
|
153
153
|
setMonth(day);
|
|
154
154
|
src === RANGE.FROM
|
|
@@ -157,7 +157,7 @@ export const useRangeDatepicker = (opt = {}) => {
|
|
|
157
157
|
}
|
|
158
158
|
};
|
|
159
159
|
const handleBlur = (e, src) => {
|
|
160
|
-
let day = parseDate(e.target.value, today, locale, "date");
|
|
160
|
+
let day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
161
161
|
if (!isValidDate(day)) {
|
|
162
162
|
return;
|
|
163
163
|
}
|
|
@@ -220,7 +220,7 @@ export const useRangeDatepicker = (opt = {}) => {
|
|
|
220
220
|
return;
|
|
221
221
|
}
|
|
222
222
|
if (toInputValue && !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
|
|
223
|
-
const toDay = parseDate(toInputValue, today, locale, "date");
|
|
223
|
+
const toDay = parseDate(toInputValue, today, locale, "date", allowTwoDigitYear);
|
|
224
224
|
if (validateDay(toDay)) {
|
|
225
225
|
updateRange({ from: day, to: toDay });
|
|
226
226
|
setMonth(day);
|
|
@@ -272,7 +272,7 @@ export const useRangeDatepicker = (opt = {}) => {
|
|
|
272
272
|
};
|
|
273
273
|
/* live-update datepicker based on changes in inputfields */
|
|
274
274
|
const handleChange = (e, src) => {
|
|
275
|
-
const day = parseDate(e.target.value, today, locale, "date");
|
|
275
|
+
const day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
|
|
276
276
|
const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
|
|
277
277
|
const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
|
|
278
278
|
return src === RANGE.FROM
|