@entur/datepicker 8.1.7 → 9.0.0

package/dist/DatePicker/Calendar.d.ts

@@ -7,6 +7,20 @@ type CalendarProps = {
     navigationDescription?: string;
     style?: React.CSSProperties;
     onSelectedCellClick?: () => void;
+    /** Tidligste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig fra og med den tiden som legges inn som minDate.
+     * Dato uten tid vil være gyldig hele minDate-dagen */
+    minDate?: DateValue;
+    /** Seneste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()).add({days: 1}) == i morgen i lokal tidssone
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig til og med den tiden som legges inn som maxDate.
+     * Dato uten tid vil være gyldig hele maxDate-dagen */
+    maxDate?: DateValue;
     [key: string]: any;
 };
 export declare const Calendar: React.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/DatePicker/DateField.d.ts

@@ -19,9 +19,18 @@ export type DateFieldProps = {
     showTimeZone?: boolean;
     showTime?: boolean;
     /** Tidligste gyldige datovalg.
-     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone */
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig fra og med den tiden som legges inn som minDate.
+     * Dato uten tid vil være gyldig hele minDate-dagen */
     minDate?: DateValue;
-    /** Seneste gyldige datovalg. (se minValue) */
+    /** Seneste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()).add({days: 1}) == i morgen i lokal tidssone
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig til og med den tiden som legges inn som maxDate.
+     * Dato uten tid vil være gyldig hele maxDate-dagen */
     maxDate?: DateValue;
     /** Varselmelding, som vil komme under TimePicker */
     feedback?: string;

package/dist/DatePicker/DatePicker.d.ts

@@ -22,12 +22,18 @@ export type DatePickerProps<DateType extends DateValue> = {
      */
     showTime?: boolean;
     /** Tidligste gyldige datovalg.
-     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone. */
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig fra og med den tiden som legges inn som minDate.
+     * Dato uten tid vil være gyldig hele minDate-dagen */
     minDate?: DateValue;
     /** Seneste gyldige datovalg.
-     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone
+     * Eks: today(getLocalTimeZone()).add({days: 1}) == i morgen i lokal tidssone
      *
-     * OBS: Hvis du bruker dato med tid vil det være til, men ikke med denne datoen */
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig til og med den tiden som legges inn som maxDate.
+     * Dato uten tid vil være gyldig hele maxDate-dagen */
     maxDate?: DateValue;
     /** Funksjon som tar inn en dato og sier om den er utilgjengelig.
      * Eks. (date) => isWeekend(date, 'no-NO') == helgedager er ikke tilgjengelig */
@@ -62,4 +68,4 @@ export type DatePickerProps<DateType extends DateValue> = {
     className?: string;
     style?: React.CSSProperties;
 } & Omit<AriaDatePickerProps<DateType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-export declare const DatePicker: <DateType extends DateValue>({ selectedDate: value, onChange, locale, disabled: isDisabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate: minValue, maxDate: maxValue, modalTreshold, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
+export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;

package/dist/datepicker.cjs.development.js

@@ -54,15 +54,6 @@ var FieldSegment = function FieldSegment(_ref) {
   var ref = React.useRef(null);
   var _useDateSegment = datepicker.useDateSegment(segment, state, ref),
     segmentProps = _useDateSegment.segmentProps;
-  var is12HourFormatted = state.segments.some(function (segment) {
-    return segment.text === 'AM' || segment.text === 'PM';
-  });
-  var segmentDisplayText = function segmentDisplayText() {
-    if (is12HourFormatted) return segment.text;
-    // if number add '0' padding to start when one digit
-    if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
-    return segment.text;
-  };
   return React.createElement("div", _extends({}, segmentProps, {
     ref: ref,
     className: classNames('eds-date-and-time-field__segment', {
@@ -70,7 +61,7 @@ var FieldSegment = function FieldSegment(_ref) {
       'eds-date-and-time-field__segment--dot-separator': segment.text === '.'
     }),
     tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
-  }), segmentDisplayText());
+  }), segment.text);
 };
 
 var nativeDateToDateTime = function nativeDateToDateTime(date$1, timeZone, offset) {
@@ -84,83 +75,64 @@ var nativeDateToDateTime = function nativeDateToDateTime(date$1, timeZone, offse
 };
 /**
  * Tar inn et JS Date-objekt og returnerer et av DateValue-objektene fra @internationalized/date-pakken
- * @param {Date} date JS Date-objekt som ønskes konvertert til et DateValue-objekt
+ * @param {Date | null} date JS Date-objekt som ønskes konvertert til et DateValue-objekt
  * @param {boolean} noTimeOnlyDate Hvis tidspunktet er irrelevant kan denne settes til true, da får man et CalendarDate-objekt uten tidspunkt tilbake
  * @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
  * @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
- * @returns {CalendarDateTime | ZonedDateTime | CalendarDate} et av DateValue-objektene med verdier fra date
+ * @returns {CalendarDateTime | ZonedDateTime | CalendarDate | null} et av DateValue-objektene med verdier fra date eller null
  */
-var nativeDateToDateValue = function nativeDateToDateValue(date$1, noTimeOnlyDate, timeZone, offset) {
+function nativeDateToDateValue(date$1, noTimeOnlyDate, timeZone, offset) {
   if (noTimeOnlyDate === void 0) {
     noTimeOnlyDate = false;
   }
+  if (date$1 === null) return null;
   if (noTimeOnlyDate) return new date.CalendarDate(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate());
   return nativeDateToDateTime(date$1, timeZone, offset);
-};
+}
 /**
  * Tar inn et JS Date-objekt og returnerer et av TimeValue-objektene fra @internationalized/date-pakken
- * @param {Date} date JS Date-objekt som ønskes konvertert til et TimeValue-objekt
+ * @param {Date | null} date JS Date-objekt som ønskes konvertert til et TimeValue-objekt
  * @param {boolean} noDateOnlyTime Hvis datoen er irrelevant kan denne settes til true, da får man et Time-objekt uten dato tilbake
  * @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
  * @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
- * @returns {Time | CalendarDateTime | ZonedDateTime} et av TimeValue-objektene med verdier fra date
+ * @returns {Time | CalendarDateTime | ZonedDateTime | null} et av TimeValue-objektene med verdier fra date eller null
  */
-var nativeDateToTimeValue = function nativeDateToTimeValue(date$1, noDateOnlyTime, timeZone, offset) {
+function nativeDateToTimeValue(date$1, noDateOnlyTime, timeZone, offset) {
   if (noDateOnlyTime === void 0) {
     noDateOnlyTime = false;
   }
+  if (date$1 === null) return null;
   if (noDateOnlyTime) return new date.Time(date$1.getHours(), date$1.getMinutes(), date$1.getSeconds(), 0);
   return nativeDateToDateTime(date$1, timeZone, offset);
-};
+}
 /**
- * Tar inn et av Date- eller TimeValue-objektene fra @internationalized/date-pakken og returnerer et JS Date-objekt
- * @param {DateValue | TimeValue} value En dato eller et tidspunkt på Date- eller TimeValue-formatet som ønskes konvertert til et JS Date-objekt
+ * Tar inn et av Date- eller TimeValue-objektene fra \@internationalized/date-pakken og returnerer et JS Date-objekt
+ * @param {DateValue | TimeValue | null} value En dato eller et tidspunkt på Date- eller TimeValue-formatet som ønskes konvertert til et JS Date-objekt
  * @param {string} timeZoneForCalendarDateTime Tidssonen value er i. Fungerer kun med typen er CalendarDateTime
- * @returns {Date} et Date-objekt med verdier fra time
+ * @returns {Date | null} et Date-objekt med verdier fra time eller null
  */
-// This function uses a lot of @ts-expect-error to make it work with all Date- and TimeValue types. Sorry ...
-var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
-  // @ts-expect-error .day does not exist on Time-object
-  if (!value.day) {
-    // type is Time
+function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
+  if (value === null) return null;
+  // type is Time
+  if (!('day' in value)) {
     var date$1 = new Date();
-    // @ts-expect-error hour does not exist on CalendarDate
     date$1.setHours(value.hour);
-    // @ts-expect-error minute does not exist on CalendarDate
     date$1.setMinutes(value.minute);
-    // @ts-expect-error second does not exist on CalendarDate
     date$1.setSeconds(value.second);
     return date$1;
   }
-  // @ts-expect-error .day does not exist on Time-object
-  if (!value.hour) {
-    // type is CalendarDate
-    // @ts-expect-error .toDate(timeZone) does not exist in type Time
+  // type is CalendarDate
+  if (!('hour' in value)) {
     return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : date.getLocalTimeZone());
   }
-  // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
-  if (!value.timeZone) {
-    // type is CalendarDateTime
-    if (timeZoneForCalendarDateTime)
-      // @ts-expect-error .toDate(timeZone) does not exist in type Time
-      return value.toDate(timeZoneForCalendarDateTime);
-    return new Date(
-    // @ts-expect-error not in type Time
-    value.year,
-    // @ts-expect-error not in type Time
-    value.month - 1,
-    // @ts-expect-error not in type Time
-    value.day,
-    // @ts-expect-error not in type CalendarDate
-    value.hour,
-    // @ts-expect-error not in type CalendarDate
-    value.minute,
-    // @ts-expect-error not in type CalendarDate
-    value.second);
+  // type is CalendarDateTime
+  if (!('timeZone' in value)) {
+    if (timeZoneForCalendarDateTime) return value.toDate(timeZoneForCalendarDateTime);
+    return new Date(value.year, value.month - 1, value.day, value.hour, value.minute, value.second);
   }
-  // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
+  // type is ZonedDateTime
   return value.toDate();
-};
+}
 var createCalendar = function createCalendar(identifier) {
   if (identifier === void 0) {
     identifier = 'gregory';
@@ -176,10 +148,18 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
   if (locale.toLowerCase() !== 'no-no') return propsCollection['aria-label'];
   return norwegianAriaLabel;
 };
+var lastMillisecondOfDay = function lastMillisecondOfDay(dateValue) {
+  return date.toCalendarDateTime(dateValue.add({
+    days: 1
+  })).add({
+    milliseconds: -1
+  });
+};
 
-var _excluded$9 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
+var _excluded$9 = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var value = _ref.selectedDate,
+  var selectedDate = _ref.selectedDate,
+    onChange = _ref.onChange,
     label = _ref.label,
     customLocale = _ref.locale,
     showTimeZone = _ref.showTimeZone,
@@ -187,6 +167,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$granularity = _ref.granularity,
     granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
     disabled = _ref.disabled,
+    isDisabled = _ref.isDisabled,
     variant = _ref.variant,
     feedback = _ref.feedback,
     _ref$validationVarian = _ref.validationVariant,
@@ -194,8 +175,8 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$validationFeedba = _ref.validationFeedback,
     validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
     labelTooltip = _ref.labelTooltip,
-    minValue = _ref.minDate,
-    maxValue = _ref.maxDate,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     style = _ref.style,
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
@@ -206,16 +187,19 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var state = datepicker$1.useDateFieldState(_extends({}, rest, {
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
-    value: value === null ? undefined : value,
+    value: selectedDate,
+    onChange: onChange,
     hideTimeZone: !showTimeZone,
     granularity: showTime ? 'minute' : granularity,
-    minValue: minValue,
-    maxValue: maxValue
+    minValue: minDate,
+    // this weird logic makes sure the entire day is included if no time is provided in maxDate
+    maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
+    isDisabled: isDisabled || disabled,
+    shouldForceLeadingZeros: true
   }));
   var dateFieldRef = React.useRef(null);
   var _useDateField = datepicker.useDateField(_extends({}, rest, {
-      label: label,
-      isDisabled: disabled || rest.isDisabled
+      label: label
     }), state, dateFieldRef),
     labelProps = _useDateField.labelProps,
     fieldProps = _useDateField.fieldProps;
@@ -232,7 +216,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: classNames('eds-datefield', className),
     labelId: id,
     ref: utils.mergeRefs(dateFieldRef, ref),
-    disabled: state.isDisabled,
+    disabled: isDisabled || disabled,
     disableLabelAnimation: true,
     label: label,
     labelTooltip: labelTooltip,
@@ -370,10 +354,13 @@ var CalendarGrid = function CalendarGrid(_ref) {
   }, getNavigationDescription()));
 };
 
-var _excluded$5 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
+var _excluded$5 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "children", "navigationDescription", "onSelectedCellClick"];
 var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var onChange = _ref.onChange,
+  var selectedDate = _ref.selectedDate,
+    onChange = _ref.onChange,
     customLocale = _ref.locale,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     style = _ref.style,
     navigationDescription = _ref.navigationDescription,
     _ref$onSelectedCellCl = _ref.onSelectedCellClick,
@@ -384,9 +371,12 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
   var state = calendar$1.useCalendarState(_extends({}, rest, {
+    value: selectedDate,
     onChange: onChange,
     locale: customLocale != null ? customLocale : locale,
-    createCalendar: createCalendar
+    createCalendar: createCalendar,
+    minValue: minDate,
+    maxValue: maxDate
   }));
   var _useCalendar = calendar.useCalendar(rest, state),
     calendarProps = _useCalendar.calendarProps,
@@ -423,10 +413,10 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var _excluded$4 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold"];
 var DatePicker = function DatePicker(_ref) {
-  var value = _ref.selectedDate,
+  var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
     locale = _ref.locale,
-    isDisabled = _ref.disabled,
+    disabled = _ref.disabled,
     showTime = _ref.showTime,
     _ref$showTimeZone = _ref.showTimeZone,
     showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
@@ -439,8 +429,8 @@ var DatePicker = function DatePicker(_ref) {
     disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
     labelTooltip = _ref.labelTooltip,
     navigationDescription = _ref.navigationDescription,
-    minValue = _ref.minDate,
-    maxValue = _ref.maxDate,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
@@ -451,17 +441,15 @@ var DatePicker = function DatePicker(_ref) {
   var _useWindowDimensions = utils.useWindowDimensions(),
     width = _useWindowDimensions.width;
   var state = datepicker$1.useDatePickerState(_extends({}, rest, {
-    minValue: minValue,
-    maxValue: maxValue,
-    value: value === null ? undefined : value,
+    minValue: minDate,
+    // this weird logic makes sure the entire day is included if no time is provided in maxDate
+    maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
+    value: selectedDate,
     onChange: onChange,
-    granularity: showTime ? 'minute' : rest.granularity
+    granularity: showTime ? 'minute' : rest.granularity,
+    isDisabled: disabled
   }));
-  var _useDatePicker = datepicker.useDatePicker(_extends({
-      isDisabled: isDisabled,
-      minValue: minValue,
-      maxValue: maxValue
-    }, rest), state, datePickerRef),
+  var _useDatePicker = datepicker.useDatePicker(_extends({}, rest), state, datePickerRef),
     groupProps = _useDatePicker.groupProps,
     labelProps = _useDatePicker.labelProps,
     fieldProps = _useDatePicker.fieldProps,
@@ -481,12 +469,6 @@ var DatePicker = function DatePicker(_ref) {
     reference = _useFloating.reference,
     floating = _useFloating.floating,
     strategy = _useFloating.strategy;
-  var onChangeCalendar = function onChangeCalendar(newSelectedDate) {
-    // Necessary to avoid state update on unmounted component
-    requestAnimationFrame(function () {
-      calendarProps.onChange && calendarProps.onChange(newSelectedDate);
-    });
-  };
   utils.useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
   });
@@ -494,13 +476,17 @@ var DatePicker = function DatePicker(_ref) {
     state.setOpen(false);
   });
   var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
-    disabled: calendarProps.isDisabled,
+    disabled: disabled,
     navigationDescription: navigationDescription,
     onSelectedCellClick: function onSelectedCellClick() {
       return state.setOpen(false);
     },
-    onChange: onChangeCalendar,
-    granularity: showTime ? 'minute' : rest.granularity
+    selectedDate: selectedDate,
+    onChange: onChange,
+    minDate: minDate,
+    maxDate: maxDate,
+    granularity: showTime ? 'minute' : rest.granularity,
+    ref: calendarRef
   });
   var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
@@ -517,9 +503,7 @@ var DatePicker = function DatePicker(_ref) {
   }, React.createElement(FocusLock, {
     disabled: !state.isOpen || useModal,
     returnFocus: true
-  }, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps, {
-    ref: calendarRef
-  }))));
+  }, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps))));
   var modalCalendar = React.createElement(modal.Modal, {
     size: "small",
     title: "",
@@ -527,7 +511,6 @@ var DatePicker = function DatePicker(_ref) {
     onDismiss: function onDismiss() {
       return state.setOpen(false);
     },
-    closeOnClickOutside: true,
     className: "eds-datepicker__calendar-modal"
   }, React.createElement(Calendar, _extends({}, calendarSharedProps)));
   return React.createElement(utils.ConditionalWrapper, {
@@ -547,9 +530,13 @@ var DatePicker = function DatePicker(_ref) {
     id: undefined,
     className: "eds-datepicker__datefield__wrapper"
   }), React.createElement(DateField, _extends({}, fieldProps, {
-    selectedDate: state.value,
+    selectedDate: selectedDate,
+    onChange: onChange,
     label: rest.label,
     labelProps: labelProps,
+    disabled: disabled,
+    minDate: minDate,
+    maxDate: maxDate,
     showTime: showTime,
     showTimeZone: showTimeZone,
     ref: dateFieldRef,
@@ -559,9 +546,9 @@ var DatePicker = function DatePicker(_ref) {
     validationFeedback: validationFeedback,
     labelTooltip: labelTooltip,
     className: classNames('eds-datepicker__datefield', {
-      'eds-datepicker__datefield--disabled': fieldProps.isDisabled
+      'eds-datepicker__datefield--disabled': disabled
     })
-  })), !fieldProps.isDisabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
+  })), !disabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
     onPress: function onPress() {
       return state.setOpen(!state.isOpen);
     },
@@ -687,9 +674,10 @@ var TimePicker = function TimePicker(_ref) {
     onChange: onChange,
     label: label,
     locale: locale,
-    value: selectedTime === null ? undefined : selectedTime,
+    value: selectedTime,
     hideTimeZone: !showTimeZone,
-    isDisabled: disabled
+    isDisabled: disabled,
+    shouldForceLeadingZeros: true
   }, rest));
   var timeFieldRef = React.useRef(null);
   var _useTimeField = datepicker.useTimeField(_extends({}, rest, {
@@ -720,8 +708,7 @@ var TimePicker = function TimePicker(_ref) {
     onChange(newTime);
   };
   var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
-    var _state$value;
-    state.value && state.setValue((_state$value = state.value) == null ? void 0 : _state$value.add({
+    selectedTime !== null && onChange(selectedTime.add({
       minutes: minutes
     }));
   };
@@ -870,7 +857,7 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
     onChange: onChange,
     label: label,
     locale: locale,
-    value: selectedTime === null ? undefined : selectedTime,
+    value: selectedTime,
     hideTimeZone: true,
     isDisabled: disabled,
     isReadOnly: readOnly
@@ -1050,6 +1037,7 @@ exports.SimpleTimePicker = SimpleTimePicker;
 exports.TimePicker = TimePicker;
 exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
 exports.createCalendar = createCalendar;
+exports.lastMillisecondOfDay = lastMillisecondOfDay;
 exports.nativeDateToDateValue = nativeDateToDateValue;
 exports.nativeDateToTimeValue = nativeDateToTimeValue;
 exports.timeOrDateValueToNativeDate = timeOrDateValueToNativeDate;