@instructure/ui-date-time-input 10.13.0 → 10.13.1-pr-snapshot-1741357986437
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [10.13.1-pr-snapshot-1741357986437](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.13.1-pr-snapshot-1741357986437) (2025-03-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-date-time-input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [10.13.0](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.13.0) (2025-03-06)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @instructure/ui-date-time-input
|
|
@@ -7,8 +7,7 @@ var _vitest = require("vitest");
|
|
|
7
7
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
8
8
|
require("@testing-library/jest-dom");
|
|
9
9
|
var _index = require("../index");
|
|
10
|
-
var
|
|
11
|
-
var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
|
|
10
|
+
var _uiI18n = require("@instructure/ui-i18n");
|
|
12
11
|
var _DateTimeInput, _DateTimeInput2, _DateTimeInput3;
|
|
13
12
|
/*
|
|
14
13
|
* The MIT License (MIT)
|
|
@@ -48,7 +47,7 @@ describe('<DateTimeInput />', () => {
|
|
|
48
47
|
it('should use the default value', () => {
|
|
49
48
|
const locale = 'en-US';
|
|
50
49
|
const timezone = 'US/Eastern';
|
|
51
|
-
const dateTime =
|
|
50
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
52
51
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
|
|
53
52
|
description: "date_time",
|
|
54
53
|
prevMonthLabel: "Previous month",
|
|
@@ -69,7 +68,7 @@ describe('<DateTimeInput />', () => {
|
|
|
69
68
|
const onChange = _vitest.vi.fn();
|
|
70
69
|
const locale = 'en-US';
|
|
71
70
|
const timezone = 'US/Eastern';
|
|
72
|
-
const dateTime =
|
|
71
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T23:30Z', locale, timezone);
|
|
73
72
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
|
|
74
73
|
description: "date_time",
|
|
75
74
|
prevMonthLabel: "Previous month",
|
|
@@ -90,8 +89,8 @@ describe('<DateTimeInput />', () => {
|
|
|
90
89
|
it('should prefer value to defaultValue', () => {
|
|
91
90
|
const locale = 'en-US';
|
|
92
91
|
const timezone = 'US/Eastern';
|
|
93
|
-
const value =
|
|
94
|
-
const defaultValue =
|
|
92
|
+
const value = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
93
|
+
const defaultValue = _uiI18n.DateTime.parse('2016-04-01T17:00Z', locale, timezone);
|
|
95
94
|
const onChange = _vitest.vi.fn();
|
|
96
95
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
|
|
97
96
|
description: "date_time",
|
|
@@ -114,7 +113,7 @@ describe('<DateTimeInput />', () => {
|
|
|
114
113
|
it('should set time to local midnight when only date is set', () => {
|
|
115
114
|
const locale = 'en-US';
|
|
116
115
|
const timezone = 'US/Eastern';
|
|
117
|
-
const dateObj =
|
|
116
|
+
const dateObj = _uiI18n.DateTime.parse('2017-04-01T18:30Z', locale, timezone);
|
|
118
117
|
const date = dateObj.toISOString().split('T')[0];
|
|
119
118
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
|
|
120
119
|
description: "date_time",
|
|
@@ -178,7 +177,7 @@ describe('<DateTimeInput />', () => {
|
|
|
178
177
|
const onChange = _vitest.vi.fn();
|
|
179
178
|
const locale = 'en-US';
|
|
180
179
|
const timezone = 'US/Eastern';
|
|
181
|
-
const defaultValue =
|
|
180
|
+
const defaultValue = _uiI18n.DateTime.parse('2017-05-01T17:00', locale, timezone);
|
|
182
181
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
|
|
183
182
|
description: "date_time",
|
|
184
183
|
dateRenderLabel: "date-input",
|
|
@@ -236,7 +235,7 @@ describe('<DateTimeInput />', () => {
|
|
|
236
235
|
it('should show the formatted date-time message', () => {
|
|
237
236
|
const locale = 'en-US';
|
|
238
237
|
const timezone = 'US/Eastern';
|
|
239
|
-
const defaultValue =
|
|
238
|
+
const defaultValue = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
240
239
|
const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
|
|
241
240
|
description: "date_time",
|
|
242
241
|
dateRenderLabel: "date-input",
|
|
@@ -254,7 +253,7 @@ describe('<DateTimeInput />', () => {
|
|
|
254
253
|
it('should show the formatted date-time message in the proper locale', () => {
|
|
255
254
|
const timezone = 'US/Eastern';
|
|
256
255
|
const locale = 'fr';
|
|
257
|
-
const defaultValue =
|
|
256
|
+
const defaultValue = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
258
257
|
const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
|
|
259
258
|
description: "date_time",
|
|
260
259
|
dateRenderLabel: "date-input",
|
|
@@ -297,7 +296,7 @@ describe('<DateTimeInput />', () => {
|
|
|
297
296
|
const onChange = _vitest.vi.fn();
|
|
298
297
|
const locale = 'en-US';
|
|
299
298
|
const timezone = 'US/Eastern';
|
|
300
|
-
const dateTime =
|
|
299
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
301
300
|
const props = {
|
|
302
301
|
description: 'date_time',
|
|
303
302
|
prevMonthLabel: 'Previous month',
|
|
@@ -323,7 +322,7 @@ describe('<DateTimeInput />', () => {
|
|
|
323
322
|
const onChange = _vitest.vi.fn();
|
|
324
323
|
const locale = 'en-US';
|
|
325
324
|
const timezone = 'US/Eastern';
|
|
326
|
-
const dateTime =
|
|
325
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
327
326
|
const props = {
|
|
328
327
|
description: 'date_time',
|
|
329
328
|
dateRenderLabel: 'date-input',
|
|
@@ -349,7 +348,7 @@ describe('<DateTimeInput />', () => {
|
|
|
349
348
|
const onChange = _vitest.vi.fn();
|
|
350
349
|
const locale = 'en-US';
|
|
351
350
|
const timezone = 'US/Eastern';
|
|
352
|
-
const dateTime =
|
|
351
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
353
352
|
const props = {
|
|
354
353
|
description: 'date_time',
|
|
355
354
|
dateRenderLabel: 'date-input',
|
|
@@ -408,7 +407,7 @@ describe('<DateTimeInput />', () => {
|
|
|
408
407
|
it('should update error message when value is invalid', async () => {
|
|
409
408
|
const locale = 'en-US';
|
|
410
409
|
const timezone = 'US/Eastern';
|
|
411
|
-
const dateTime =
|
|
410
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
412
411
|
const props = {
|
|
413
412
|
description: 'date_time',
|
|
414
413
|
dateRenderLabel: 'date-input',
|
|
@@ -436,7 +435,7 @@ describe('<DateTimeInput />', () => {
|
|
|
436
435
|
it('should show supplied message', async () => {
|
|
437
436
|
const locale = 'en-US';
|
|
438
437
|
const timezone = 'US/Eastern';
|
|
439
|
-
const dateTime =
|
|
438
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
440
439
|
const props = {
|
|
441
440
|
description: 'date_time',
|
|
442
441
|
dateRenderLabel: 'date-input',
|
|
@@ -468,7 +467,7 @@ describe('<DateTimeInput />', () => {
|
|
|
468
467
|
it('should not show built in message when `showMessages` is false', async () => {
|
|
469
468
|
const locale = 'en-US';
|
|
470
469
|
const timezone = 'US/Eastern';
|
|
471
|
-
const dateTime =
|
|
470
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
472
471
|
const props = {
|
|
473
472
|
description: 'date_time',
|
|
474
473
|
dateRenderLabel: 'date-input',
|
|
@@ -514,11 +513,11 @@ describe('<DateTimeInput />', () => {
|
|
|
514
513
|
});
|
|
515
514
|
it('should read locale and timezone from context', () => {
|
|
516
515
|
const onChange = _vitest.vi.fn();
|
|
517
|
-
const dateTime =
|
|
516
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
|
|
518
517
|
const _render13 = (0, _react2.render)(
|
|
519
518
|
/*#__PURE__*/
|
|
520
519
|
// Africa/Nairobi is GMT +3
|
|
521
|
-
_react.default.createElement(
|
|
520
|
+
_react.default.createElement(_uiI18n.ApplyLocale, {
|
|
522
521
|
locale: "fr",
|
|
523
522
|
timezone: "Africa/Nairobi"
|
|
524
523
|
}, /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
|
|
@@ -536,7 +535,7 @@ describe('<DateTimeInput />', () => {
|
|
|
536
535
|
});
|
|
537
536
|
it('should format date according to dateFormat', async () => {
|
|
538
537
|
const onChange = _vitest.vi.fn();
|
|
539
|
-
const dateTime =
|
|
538
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
|
|
540
539
|
const props = {
|
|
541
540
|
description: 'date_time',
|
|
542
541
|
dateRenderLabel: 'date-input',
|
|
@@ -563,7 +562,7 @@ describe('<DateTimeInput />', () => {
|
|
|
563
562
|
});
|
|
564
563
|
it('should format bottom message according to messageFormat', async () => {
|
|
565
564
|
const onChange = _vitest.vi.fn();
|
|
566
|
-
const dateTime =
|
|
565
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
|
|
567
566
|
const props = {
|
|
568
567
|
description: 'date_time',
|
|
569
568
|
dateRenderLabel: 'date-input',
|
|
@@ -591,7 +590,7 @@ describe('<DateTimeInput />', () => {
|
|
|
591
590
|
it('should update Date and Time inputs when value prop changes', async () => {
|
|
592
591
|
const locale = 'en-US';
|
|
593
592
|
const timezone = 'US/Eastern';
|
|
594
|
-
const dateTime =
|
|
593
|
+
const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
|
|
595
594
|
const props = {
|
|
596
595
|
description: 'date_time',
|
|
597
596
|
dateRenderLabel: 'date-input',
|
|
@@ -608,7 +607,7 @@ describe('<DateTimeInput />', () => {
|
|
|
608
607
|
rerender = _render16.rerender;
|
|
609
608
|
expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
|
|
610
609
|
const newDateStr = '2022-03-29T19:00Z';
|
|
611
|
-
const newDateTime =
|
|
610
|
+
const newDateTime = _uiI18n.DateTime.parse(newDateStr, locale, timezone);
|
|
612
611
|
rerender(/*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
|
|
613
612
|
value: newDateStr
|
|
614
613
|
})));
|
|
@@ -6,18 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.DateTimeInput = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
|
|
19
|
-
var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
|
|
20
|
-
var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
|
|
9
|
+
var _uiI18n = require("@instructure/ui-i18n");
|
|
10
|
+
var _uiFormField = require("@instructure/ui-form-field");
|
|
11
|
+
var _uiDateInput = require("@instructure/ui-date-input");
|
|
12
|
+
var _uiTimeSelect = require("@instructure/ui-time-select");
|
|
13
|
+
var _uiCalendar = require("@instructure/ui-calendar");
|
|
14
|
+
var _uiTestable = require("@instructure/ui-testable");
|
|
15
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
16
|
+
var _uiButtons = require("@instructure/ui-buttons");
|
|
17
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
21
18
|
var _props = require("./props");
|
|
22
19
|
var _console = require("@instructure/console");
|
|
23
20
|
var _dec, _class, _DateTimeInput, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
|
|
@@ -49,7 +46,7 @@ var _dec, _class, _DateTimeInput, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
|
|
|
49
46
|
category: components
|
|
50
47
|
---
|
|
51
48
|
**/
|
|
52
|
-
let DateTimeInput = exports.DateTimeInput = (_dec = (0,
|
|
49
|
+
let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(), _dec(_class = (_DateTimeInput = class DateTimeInput extends _react.Component {
|
|
53
50
|
constructor(props) {
|
|
54
51
|
super(props);
|
|
55
52
|
// State needs to be calculated because render could be called before
|
|
@@ -67,14 +64,14 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
67
64
|
dateInputText: date.value,
|
|
68
65
|
dateInputTextChanged: true,
|
|
69
66
|
calendarSelectedDate: dateParsed ? dateParsed : void 0,
|
|
70
|
-
renderedDate: dateParsed ? dateParsed.clone() :
|
|
67
|
+
renderedDate: dateParsed ? dateParsed.clone() : _uiI18n.DateTime.now(this.locale(), this.timezone())
|
|
71
68
|
});
|
|
72
69
|
};
|
|
73
70
|
// date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
|
|
74
71
|
this.handleDayClick = (event, {
|
|
75
72
|
date
|
|
76
73
|
}) => {
|
|
77
|
-
const dateParsed =
|
|
74
|
+
const dateParsed = _uiI18n.DateTime.parse(date, this.locale(), this.timezone());
|
|
78
75
|
this.updateStateBasedOnDateInput(dateParsed, event);
|
|
79
76
|
};
|
|
80
77
|
this.handleHideCalendar = event => {
|
|
@@ -162,7 +159,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
162
159
|
} else if (this.state.iso) {
|
|
163
160
|
toAlter = this.state.iso.clone();
|
|
164
161
|
} else {
|
|
165
|
-
toAlter =
|
|
162
|
+
toAlter = _uiI18n.DateTime.now(this.locale(), this.timezone());
|
|
166
163
|
}
|
|
167
164
|
toAlter.add({
|
|
168
165
|
days: 1
|
|
@@ -179,7 +176,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
179
176
|
} else if (this.state.iso) {
|
|
180
177
|
toAlter = this.state.iso.clone();
|
|
181
178
|
} else {
|
|
182
|
-
toAlter =
|
|
179
|
+
toAlter = _uiI18n.DateTime.now(this.locale(), this.timezone());
|
|
183
180
|
}
|
|
184
181
|
toAlter.subtract({
|
|
185
182
|
days: 1
|
|
@@ -227,12 +224,12 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
227
224
|
recalculateState(dateStr, doNotChangeDate = false, doNotChangeTime = false) {
|
|
228
225
|
let errorMsg;
|
|
229
226
|
if (dateStr) {
|
|
230
|
-
const parsed =
|
|
227
|
+
const parsed = _uiI18n.DateTime.parse(dateStr, this.locale(), this.timezone());
|
|
231
228
|
if (parsed.isValid()) {
|
|
232
229
|
var _this$state;
|
|
233
230
|
if (doNotChangeTime && this.state.timeSelectValue) {
|
|
234
231
|
// There is a selected time, adjust the parsed date to its value
|
|
235
|
-
const timeParsed =
|
|
232
|
+
const timeParsed = _uiI18n.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
|
|
236
233
|
parsed.hour(timeParsed.hour()).minute(timeParsed.minute());
|
|
237
234
|
}
|
|
238
235
|
if (doNotChangeDate && this.state.iso) {
|
|
@@ -292,7 +289,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
292
289
|
iso: void 0,
|
|
293
290
|
calendarSelectedDate: void 0,
|
|
294
291
|
dateInputText: dateStr ? dateStr : '',
|
|
295
|
-
renderedDate:
|
|
292
|
+
renderedDate: _uiI18n.DateTime.now(this.locale(), this.timezone()),
|
|
296
293
|
dateInputTextChanged: false,
|
|
297
294
|
...clearTimeSelect
|
|
298
295
|
};
|
|
@@ -303,7 +300,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
303
300
|
} else if (this.context && this.context.locale) {
|
|
304
301
|
return this.context.locale;
|
|
305
302
|
}
|
|
306
|
-
return
|
|
303
|
+
return _uiI18n.Locale.browserLocale();
|
|
307
304
|
}
|
|
308
305
|
timezone() {
|
|
309
306
|
if (this.props.timezone) {
|
|
@@ -311,7 +308,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
311
308
|
} else if (this.context && this.context.timezone) {
|
|
312
309
|
return this.context.timezone;
|
|
313
310
|
}
|
|
314
|
-
return
|
|
311
|
+
return _uiI18n.DateTime.browserTimeZone();
|
|
315
312
|
}
|
|
316
313
|
get dateFormat() {
|
|
317
314
|
return this.props.dateFormat;
|
|
@@ -332,14 +329,14 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
332
329
|
return disabledDates(date.toISOString());
|
|
333
330
|
}
|
|
334
331
|
tryParseDate(val) {
|
|
335
|
-
const parsed =
|
|
332
|
+
const parsed = _uiI18n.DateTime.parse(val, this.locale(), this.timezone());
|
|
336
333
|
return parsed.isValid() ? parsed : null;
|
|
337
334
|
}
|
|
338
335
|
updateStateBasedOnDateInput(dateParsed, event) {
|
|
339
336
|
let newState;
|
|
340
337
|
if (dateParsed && this.state.timeSelectValue && (!this.state.dateInputText || this.state.dateInputText == '')) {
|
|
341
338
|
// There is already a selected time, but no date. Adjust the time too
|
|
342
|
-
const timeParsed =
|
|
339
|
+
const timeParsed = _uiI18n.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
|
|
343
340
|
const dateParsedAdjusted = dateParsed.set({
|
|
344
341
|
hour: timeParsed.hour(),
|
|
345
342
|
minute: timeParsed.minute()
|
|
@@ -358,9 +355,9 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
358
355
|
// Sets it to the first local day of the week counting back from the start of the month.
|
|
359
356
|
// Note that first day depends on the locale, e.g. it's Sunday in the US and
|
|
360
357
|
// Monday in most of the EU.
|
|
361
|
-
const currDate =
|
|
358
|
+
const currDate = _uiI18n.DateTime.getFirstDayOfWeek(renderedDate.startOf('month'));
|
|
362
359
|
const arr = [];
|
|
363
|
-
for (let i = 0; i <
|
|
360
|
+
for (let i = 0; i < _uiCalendar.Calendar.DAY_COUNT; i++) {
|
|
364
361
|
// This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
|
|
365
362
|
// in these cases adding 1 day results in 23 hours added instead,
|
|
366
363
|
// so `moment.tz('2024-09-07T00:00:00', 'America/Santiago').add({days: 1})` results
|
|
@@ -382,11 +379,11 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
382
379
|
}
|
|
383
380
|
return arr.map(date => {
|
|
384
381
|
const dateStr = date.toISOString();
|
|
385
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
382
|
+
return /*#__PURE__*/_react.default.createElement(_uiDateInput.DateInput.Day, {
|
|
386
383
|
key: dateStr,
|
|
387
384
|
date: dateStr,
|
|
388
385
|
isSelected: this.state.calendarSelectedDate ? date.isSame(this.state.calendarSelectedDate, 'day') : false,
|
|
389
|
-
isToday: date.isSame(
|
|
386
|
+
isToday: date.isSame(_uiI18n.DateTime.now(this.locale(), this.timezone()), 'day'),
|
|
390
387
|
isOutsideMonth: !date.isSame(renderedDate, 'month'),
|
|
391
388
|
label: date.format('D MMMM YYYY') // used by screen readers
|
|
392
389
|
,
|
|
@@ -402,27 +399,27 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
402
399
|
// this is an expensive function, only execute if the calendar is open
|
|
403
400
|
return [];
|
|
404
401
|
}
|
|
405
|
-
const shortDayNames =
|
|
406
|
-
const longDayNames =
|
|
407
|
-
return [/*#__PURE__*/_react.default.createElement(
|
|
402
|
+
const shortDayNames = _uiI18n.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
|
|
403
|
+
const longDayNames = _uiI18n.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
|
|
404
|
+
return [/*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
|
|
408
405
|
key: 1,
|
|
409
406
|
alt: longDayNames[0]
|
|
410
|
-
}, shortDayNames[0]), /*#__PURE__*/_react.default.createElement(
|
|
407
|
+
}, shortDayNames[0]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
|
|
411
408
|
key: 2,
|
|
412
409
|
alt: longDayNames[1]
|
|
413
|
-
}, shortDayNames[1]), /*#__PURE__*/_react.default.createElement(
|
|
410
|
+
}, shortDayNames[1]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
|
|
414
411
|
key: 3,
|
|
415
412
|
alt: longDayNames[2]
|
|
416
|
-
}, shortDayNames[2]), /*#__PURE__*/_react.default.createElement(
|
|
413
|
+
}, shortDayNames[2]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
|
|
417
414
|
key: 4,
|
|
418
415
|
alt: longDayNames[3]
|
|
419
|
-
}, shortDayNames[3]), /*#__PURE__*/_react.default.createElement(
|
|
416
|
+
}, shortDayNames[3]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
|
|
420
417
|
key: 5,
|
|
421
418
|
alt: longDayNames[4]
|
|
422
|
-
}, shortDayNames[4]), /*#__PURE__*/_react.default.createElement(
|
|
419
|
+
}, shortDayNames[4]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
|
|
423
420
|
key: 6,
|
|
424
421
|
alt: longDayNames[5]
|
|
425
|
-
}, shortDayNames[5]), /*#__PURE__*/_react.default.createElement(
|
|
422
|
+
}, shortDayNames[5]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
|
|
426
423
|
key: 7,
|
|
427
424
|
alt: longDayNames[6]
|
|
428
425
|
}, shortDayNames[6])];
|
|
@@ -431,13 +428,13 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
431
428
|
if (!this.state.isShowingCalendar) {
|
|
432
429
|
return;
|
|
433
430
|
}
|
|
434
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
431
|
+
return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
|
|
435
432
|
size: "small",
|
|
436
433
|
withBackground: false,
|
|
437
434
|
withBorder: false,
|
|
438
|
-
renderIcon: type === 'prev' ? _IconArrowOpenStartSo || (_IconArrowOpenStartSo = /*#__PURE__*/_react.default.createElement(
|
|
435
|
+
renderIcon: type === 'prev' ? _IconArrowOpenStartSo || (_IconArrowOpenStartSo = /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenStartSolid, {
|
|
439
436
|
color: "primary"
|
|
440
|
-
})) : _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = /*#__PURE__*/_react.default.createElement(
|
|
437
|
+
})) : _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenEndSolid, {
|
|
441
438
|
color: "primary"
|
|
442
439
|
})),
|
|
443
440
|
screenReaderLabel: type === 'prev' ? this.props.prevMonthLabel : this.props.nextMonthLabel
|
|
@@ -472,7 +469,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
472
469
|
type: 'newError',
|
|
473
470
|
text: ''
|
|
474
471
|
}] : [];
|
|
475
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
472
|
+
return /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
|
|
476
473
|
description: description,
|
|
477
474
|
layout: layout,
|
|
478
475
|
rowSpacing: rowSpacing,
|
|
@@ -481,7 +478,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
481
478
|
elementRef: this.handleRef,
|
|
482
479
|
isGroup: false,
|
|
483
480
|
messages: [...(showMessages && this.state.message ? [this.state.message] : []), ...(messages || [])]
|
|
484
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
481
|
+
}, /*#__PURE__*/_react.default.createElement(_uiDateInput.DateInput, {
|
|
485
482
|
display: "block",
|
|
486
483
|
value: this.state.dateInputText,
|
|
487
484
|
onChange: this.handleDateTextChange,
|
|
@@ -503,7 +500,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
503
500
|
messages: subComponentMessages,
|
|
504
501
|
interaction: interaction,
|
|
505
502
|
renderNavigationLabel: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("div", null, this.state.renderedDate.format('MMMM')), /*#__PURE__*/_react.default.createElement("div", null, this.state.renderedDate.format('y')))
|
|
506
|
-
}, this.renderDays()), /*#__PURE__*/_react.default.createElement(
|
|
503
|
+
}, this.renderDays()), /*#__PURE__*/_react.default.createElement(_uiTimeSelect.TimeSelect, {
|
|
507
504
|
value: this.state.timeSelectValue,
|
|
508
505
|
onChange: this.updateStateBasedOnTimeSelect,
|
|
509
506
|
placeholder: timePlaceholder,
|
|
@@ -531,5 +528,5 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
|
|
|
531
528
|
dateFormat: 'LL',
|
|
532
529
|
// Localized date with full month, e.g. "August 6, 2014"
|
|
533
530
|
allowNonStepInput: false
|
|
534
|
-
}, _DateTimeInput.contextType =
|
|
531
|
+
}, _DateTimeInput.contextType = _uiI18n.ApplyLocaleContext, _DateTimeInput)) || _class);
|
|
535
532
|
var _default = exports.default = DateTimeInput;
|
|
@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
8
|
-
var
|
|
9
|
-
var
|
|
8
|
+
var _uiFormField = require("@instructure/ui-form-field");
|
|
9
|
+
var _uiI18n = require("@instructure/ui-i18n");
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
var
|
|
11
|
+
var _uiPropTypes = require("@instructure/ui-prop-types");
|
|
12
12
|
/*
|
|
13
13
|
* The MIT License (MIT)
|
|
14
14
|
*
|
|
@@ -58,13 +58,13 @@ const propTypes = exports.propTypes = {
|
|
|
58
58
|
timezone: _propTypes.default.string,
|
|
59
59
|
invalidDateTimeMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
|
|
60
60
|
showMessages: _propTypes.default.bool,
|
|
61
|
-
messages: _propTypes.default.arrayOf(
|
|
61
|
+
messages: _propTypes.default.arrayOf(_uiFormField.FormPropTypes.message),
|
|
62
62
|
messageFormat: _propTypes.default.string,
|
|
63
63
|
layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline']),
|
|
64
64
|
rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
|
|
65
65
|
colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
|
|
66
|
-
value: (0,
|
|
67
|
-
defaultValue:
|
|
66
|
+
value: (0, _uiPropTypes.controllable)(_uiI18n.I18nPropTypes.iso8601, 'onChange'),
|
|
67
|
+
defaultValue: _uiI18n.I18nPropTypes.iso8601,
|
|
68
68
|
renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])),
|
|
69
69
|
isRequired: _propTypes.default.bool,
|
|
70
70
|
onChange: _propTypes.default.func,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-date-time-input",
|
|
3
|
-
"version": "10.13.
|
|
3
|
+
"version": "10.13.1-pr-snapshot-1741357986437",
|
|
4
4
|
"description": "A UI component that allows to select date and time.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-babel-preset": "10.13.
|
|
27
|
-
"@instructure/ui-test-utils": "10.13.
|
|
26
|
+
"@instructure/ui-babel-preset": "10.13.1-pr-snapshot-1741357986437",
|
|
27
|
+
"@instructure/ui-test-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
28
28
|
"@testing-library/jest-dom": "^6.6.3",
|
|
29
29
|
"@testing-library/react": "^16.0.1",
|
|
30
30
|
"@testing-library/user-event": "^14.5.2",
|
|
@@ -32,20 +32,20 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.26.0",
|
|
35
|
-
"@instructure/console": "10.13.
|
|
36
|
-
"@instructure/shared-types": "10.13.
|
|
37
|
-
"@instructure/ui-a11y-content": "10.13.
|
|
38
|
-
"@instructure/ui-buttons": "10.13.
|
|
39
|
-
"@instructure/ui-calendar": "10.13.
|
|
40
|
-
"@instructure/ui-date-input": "10.13.
|
|
41
|
-
"@instructure/ui-form-field": "10.13.
|
|
42
|
-
"@instructure/ui-i18n": "10.13.
|
|
43
|
-
"@instructure/ui-icons": "10.13.
|
|
44
|
-
"@instructure/ui-prop-types": "10.13.
|
|
45
|
-
"@instructure/ui-react-utils": "10.13.
|
|
46
|
-
"@instructure/ui-testable": "10.13.
|
|
47
|
-
"@instructure/ui-time-select": "10.13.
|
|
48
|
-
"@instructure/ui-utils": "10.13.
|
|
35
|
+
"@instructure/console": "10.13.1-pr-snapshot-1741357986437",
|
|
36
|
+
"@instructure/shared-types": "10.13.1-pr-snapshot-1741357986437",
|
|
37
|
+
"@instructure/ui-a11y-content": "10.13.1-pr-snapshot-1741357986437",
|
|
38
|
+
"@instructure/ui-buttons": "10.13.1-pr-snapshot-1741357986437",
|
|
39
|
+
"@instructure/ui-calendar": "10.13.1-pr-snapshot-1741357986437",
|
|
40
|
+
"@instructure/ui-date-input": "10.13.1-pr-snapshot-1741357986437",
|
|
41
|
+
"@instructure/ui-form-field": "10.13.1-pr-snapshot-1741357986437",
|
|
42
|
+
"@instructure/ui-i18n": "10.13.1-pr-snapshot-1741357986437",
|
|
43
|
+
"@instructure/ui-icons": "10.13.1-pr-snapshot-1741357986437",
|
|
44
|
+
"@instructure/ui-prop-types": "10.13.1-pr-snapshot-1741357986437",
|
|
45
|
+
"@instructure/ui-react-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
46
|
+
"@instructure/ui-testable": "10.13.1-pr-snapshot-1741357986437",
|
|
47
|
+
"@instructure/ui-time-select": "10.13.1-pr-snapshot-1741357986437",
|
|
48
|
+
"@instructure/ui-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
49
49
|
"prop-types": "^15.8.1"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|