@contentful/field-editor-date 2.0.8-canary.2 → 2.0.9

package/dist/cjs/DatepickerInput.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "DatepickerInput", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _css = require("@emotion/css");
+const _moment = /*#__PURE__*/ _interop_require_default(require("moment"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -69,12 +75,14 @@ const DatepickerInput = (props)=>{
             toDate
         ];
     }, []);
-    const selectedDate = props.value;
+    const dateObj = props.value?.toObject();
+    const selectedDate = dateObj ? new Date(dateObj.years, dateObj.months, dateObj.date) : undefined;
     return /*#__PURE__*/ _react.default.createElement(_f36components.Datepicker, {
         className: styles.root,
         selected: selectedDate,
         onSelect: (day)=>{
-            props.onChange(day ?? undefined);
+            const momentDay = day ? (0, _moment.default)(day) : undefined;
+            props.onChange(momentDay);
         },
         inputProps: {
             isDisabled: props.disabled,

package/dist/cjs/TimepickerInput.js

@@ -11,7 +11,12 @@ Object.defineProperty(exports, "TimepickerInput", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _css = require("@emotion/css");
-const _datefns = require("date-fns");
+const _moment = /*#__PURE__*/ _interop_require_default(require("moment"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -55,52 +60,76 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const validInputFormats = [
     'hh:mm a',
+    'hh:mm A',
     'h:mm a',
+    'h:mm A',
     'hh:mm',
-    'kk:mm',
     'k:mm',
+    'kk:mm',
     'h a',
-    'HH',
-    'H:mm',
-    'h'
+    'h A',
+    'h',
+    'hh',
+    'HH'
 ];
-const REF_DATE = new Date(2000, 0, 1);
 function parseRawInput(raw) {
-    for (const fmt of validInputFormats){
-        const parsed = (0, _datefns.parse)(raw, fmt, REF_DATE);
-        if ((0, _datefns.isValid)(parsed)) return parsed;
+    let time = null;
+    for(let i = 0; i < validInputFormats.length; i++){
+        const date = (0, _moment.default)(raw, validInputFormats[i]);
+        if (date.isValid()) {
+            time = date;
+            break;
+        }
     }
-    return null;
+    return time;
 }
-const getDefaultTime = ()=>(0, _datefns.parse)('12:00 AM', 'hh:mm a', REF_DATE);
-const formatToString = (uses12hClock, value)=>(0, _datefns.format)(value, uses12hClock ? 'hh:mm a' : 'HH:mm');
+const getDefaultTime = ()=>{
+    return (0, _moment.default)(`12:00 AM`, 'hh:mm A');
+};
+const formatToString = (uses12hClock, value)=>{
+    return uses12hClock ? value.format('hh:mm A') : value.format('HH:mm');
+};
 const TimepickerInput = ({ disabled, uses12hClock, time = '12:00', ampm = 'AM', onChange })=>{
     const [selectedTime, setSelectedTime] = (0, _react.useState)(()=>{
         return formatToString(uses12hClock, getDefaultTime());
     });
     (0, _react.useEffect)(()=>{
-        setSelectedTime(formatToString(uses12hClock, (0, _datefns.parse)(`${time} ${ampm}`, 'hh:mm a', REF_DATE)));
+        setSelectedTime(formatToString(uses12hClock, (0, _moment.default)(`${time} ${ampm}`, 'hh:mm A')));
     }, [
         time,
         ampm,
         uses12hClock
     ]);
     const handleChange = (0, _react.useCallback)((e)=>{
-        setSelectedTime(e.currentTarget.value);
-    }, []);
+        const raw = e.currentTarget.value;
+        setSelectedTime(raw);
+        const parsedTime = parseRawInput(raw);
+        if (parsedTime) {
+            onChange({
+                time: parsedTime.format('hh:mm'),
+                ampm: parsedTime.format('A')
+            });
+        }
+    }, [
+        onChange
+    ]);
     const handleFocus = (0, _react.useCallback)((e)=>{
         e.preventDefault();
         e.target.select();
     }, []);
-    const handleBlur = ()=>{
+    const handleBlur = (0, _react.useCallback)(()=>{
         const parsedTime = parseRawInput(selectedTime);
         const value = parsedTime ?? getDefaultTime();
         setSelectedTime(formatToString(uses12hClock, value));
         onChange({
-            time: (0, _datefns.format)(value, 'hh:mm'),
-            ampm: (0, _datefns.format)(value, 'a').toUpperCase()
+            time: value.format('hh:mm'),
+            ampm: value.format('A')
         });
-    };
+    }, [
+        selectedTime,
+        uses12hClock,
+        onChange
+    ]);
     return /*#__PURE__*/ _react.default.createElement(_f36components.Flex, {
         className: (0, _css.css)({
             width: '145px'

package/dist/cjs/utils/data.spec.js

@@ -2,13 +2,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _moment = /*#__PURE__*/ _interop_require_default(require("moment"));
 const _date = require("./date");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 describe('date utils', ()=>{
     describe('buildFieldValue', ()=>{
         it('should work properly', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2018-02-02'),
+                    date: (0, _moment.default)('2018-02-02'),
                     time: '05:00',
                     ampm: 'PM',
                     utcOffset: '+03:00'
@@ -21,7 +27,7 @@ describe('date utils', ()=>{
             });
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2015-01-14'),
+                    date: (0, _moment.default)('2015-01-14'),
                     time: '05:00',
                     ampm: 'AM',
                     utcOffset: '-05:00'
@@ -34,7 +40,7 @@ describe('date utils', ()=>{
             });
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2015-01-14'),
+                    date: (0, _moment.default)('2015-01-14'),
                     time: '17:00',
                     ampm: 'PM',
                     utcOffset: '-05:00'
@@ -49,7 +55,7 @@ describe('date utils', ()=>{
         it('returns date-only format when usesTime and usesTimezone are false', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2020-06-15'),
+                    date: (0, _moment.default)('2020-06-15'),
                     time: '10:30',
                     ampm: 'AM',
                     utcOffset: '+00:00'
@@ -64,7 +70,7 @@ describe('date utils', ()=>{
         it('returns datetime without timezone when usesTime=true, usesTimezone=false', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2020-06-15'),
+                    date: (0, _moment.default)('2020-06-15'),
                     time: '14:30',
                     ampm: 'PM',
                     utcOffset: '+00:00'
@@ -93,7 +99,7 @@ describe('date utils', ()=>{
         it('handles midnight (12:00 AM) correctly', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2021-03-01'),
+                    date: (0, _moment.default)('2021-03-01'),
                     time: '12:00',
                     ampm: 'AM',
                     utcOffset: '+00:00'
@@ -108,7 +114,7 @@ describe('date utils', ()=>{
         it('handles noon (12:00 PM) correctly', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2021-03-01'),
+                    date: (0, _moment.default)('2021-03-01'),
                     time: '12:00',
                     ampm: 'PM',
                     utcOffset: '+00:00'
@@ -123,7 +129,7 @@ describe('date utils', ()=>{
         it('preserves half-hour offset +05:30 (India)', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2023-08-15'),
+                    date: (0, _moment.default)('2023-08-15'),
                     time: '10:00',
                     ampm: 'AM',
                     utcOffset: '+05:30'
@@ -138,7 +144,7 @@ describe('date utils', ()=>{
         it('preserves negative half-hour offset -09:30', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2023-08-15'),
+                    date: (0, _moment.default)('2023-08-15'),
                     time: '03:30',
                     ampm: 'AM',
                     utcOffset: '-09:30'
@@ -153,7 +159,7 @@ describe('date utils', ()=>{
         it('preserves quarter-hour offset +05:45 (Nepal)', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2023-08-15'),
+                    date: (0, _moment.default)('2023-08-15'),
                     time: '05:45',
                     ampm: 'AM',
                     utcOffset: '+05:45'
@@ -168,7 +174,7 @@ describe('date utils', ()=>{
         it('preserves UTC +00:00 offset', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2023-01-01'),
+                    date: (0, _moment.default)('2023-01-01'),
                     time: '00:00',
                     ampm: 'AM',
                     utcOffset: '+00:00'
@@ -183,7 +189,7 @@ describe('date utils', ()=>{
         it('preserves far-west offset -12:00', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2023-01-01'),
+                    date: (0, _moment.default)('2023-01-01'),
                     time: '23:59',
                     ampm: 'PM',
                     utcOffset: '-12:00'
@@ -198,7 +204,7 @@ describe('date utils', ()=>{
         it('preserves far-east offset +14:00', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2023-01-01'),
+                    date: (0, _moment.default)('2023-01-01'),
                     time: '01:00',
                     ampm: 'AM',
                     utcOffset: '+14:00'
@@ -213,7 +219,7 @@ describe('date utils', ()=>{
         it('11:59 PM → 23:59', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2023-06-01'),
+                    date: (0, _moment.default)('2023-06-01'),
                     time: '11:59',
                     ampm: 'PM',
                     utcOffset: '+00:00'
@@ -228,7 +234,7 @@ describe('date utils', ()=>{
         it('01:00 AM → 01:00 (no shift)', ()=>{
             expect((0, _date.buildFieldValue)({
                 data: {
-                    date: new Date('2023-06-01'),
+                    date: (0, _moment.default)('2023-06-01'),
                     time: '01:00',
                     ampm: 'AM',
                     utcOffset: '+00:00'
@@ -284,12 +290,12 @@ describe('date utils', ()=>{
             });
             expect(result.date).toBeUndefined();
         });
-        it('parses a date-only string', ()=>{
+        it('parses a date-only string — utcOffset is the local system offset', ()=>{
             const result = (0, _date.userInputFromDatetime)({
                 value: '2022-09-16',
                 uses12hClock: false
             });
-            expect(result.utcOffset).toBe('+00:00');
+            expect(result.utcOffset).toMatch(/^[+-]\d{2}:\d{2}$/);
         });
         it('preserves raw time and does not shift by system timezone (positive offset)', ()=>{
             const result = (0, _date.userInputFromDatetime)({
@@ -309,14 +315,14 @@ describe('date utils', ()=>{
             expect(result.ampm).toBe('AM');
             expect(result.utcOffset).toBe('-05:30');
         });
-        it('handles UTC "Z" suffix — offset is +00:00, time is not shifted', ()=>{
+        it('handles UTC "Z" suffix — moment normalizes offset to +00:00', ()=>{
             const result = (0, _date.userInputFromDatetime)({
                 value: '2021-06-01T12:00Z',
                 uses12hClock: false
             });
             expect(result.time).toBe('12:00');
             expect(result.ampm).toBe('PM');
-            expect(result.utcOffset).toBe('Z');
+            expect(result.utcOffset).toBe('+00:00');
         });
         it('handles midnight UTC correctly', ()=>{
             const result = (0, _date.userInputFromDatetime)({

package/dist/cjs/utils/date.js

@@ -22,36 +22,32 @@ _export(exports, {
         return userInputFromDatetime;
     }
 });
-const _datefns = require("date-fns");
-const ZONE_RX = /(Z|[+-]\d{2}[:+]?\d{2})$/;
-function startOfTodayOffset() {
-    return (0, _datefns.format)(new Date(), 'xxx');
+const _moment = /*#__PURE__*/ _interop_require_default(require("moment"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
 }
-function parseUtcOffset(datetimeString) {
-    const match = datetimeString.match(ZONE_RX);
-    return match ? match[1] : '+00:00';
+const ZONE_RX = /(Z|[+-]\d{2}[:+]?\d{2})$/;
+function startOfToday(format) {
+    return (0, _moment.default)().set({
+        hours: 0,
+        minutes: 0
+    }).format(format);
 }
-function fieldValueToDate(datetimeString) {
+function fieldValueToMoment(datetimeString) {
     if (!datetimeString) {
         return null;
     }
-    const date = (0, _datefns.parseISO)(datetimeString);
-    return (0, _datefns.isValid)(date) ? date : null;
+    const datetime = (0, _moment.default)(datetimeString);
+    if (ZONE_RX.test(datetimeString)) {
+        datetime.utcOffset(datetimeString);
+    }
+    return datetime;
 }
 function timeFromUserInput(input) {
     const timeInput = input.time || '00:00';
-    const parsed = (0, _datefns.parse)(timeInput, 'HH:mm', new Date(0));
-    let hours = (0, _datefns.getHours)(parsed);
-    const minutes = (0, _datefns.getMinutes)(parsed);
-    if (input.ampm === 'PM' && hours < 12) {
-        hours += 12;
-    } else if (input.ampm === 'AM' && hours === 12) {
-        hours = 0;
-    }
-    return {
-        hours,
-        minutes
-    };
+    return _moment.default.utc(timeInput + '!' + input.ampm, 'HH:mm!A');
 }
 function datetimeFromUserInput(input) {
     if (!input.date) {
@@ -59,14 +55,12 @@ function datetimeFromUserInput(input) {
             valid: null
         };
     }
-    const { hours, minutes } = timeFromUserInput(input);
-    const date = (0, _datefns.set)(input.date, {
-        hours,
-        minutes,
-        seconds: 0,
-        milliseconds: 0
+    const time = timeFromUserInput(input);
+    const date = _moment.default.parseZone(input.utcOffset, 'Z').set(input.date.toObject()).set({
+        hours: time.hours(),
+        minutes: time.minutes()
     });
-    if ((0, _datefns.isValid)(date)) {
+    if (date.isValid()) {
         return {
             valid: date
         };
@@ -84,58 +78,34 @@ function buildFieldValue({ data, usesTime, usesTimezone }) {
             invalid: true
         };
     }
-    if (!date.valid) {
-        return {
-            valid: null,
-            invalid: false
-        };
-    }
+    let format;
     if (usesTimezone) {
-        return {
-            valid: (0, _datefns.format)(date.valid, "yyyy-MM-dd'T'HH:mm") + data.utcOffset,
-            invalid: false
-        };
+        format = 'YYYY-MM-DDTHH:mmZ';
     } else if (usesTime) {
-        return {
-            valid: (0, _datefns.format)(date.valid, "yyyy-MM-dd'T'HH:mm"),
-            invalid: false
-        };
+        format = 'YYYY-MM-DDTHH:mm';
     } else {
-        return {
-            valid: (0, _datefns.format)(date.valid, 'yyyy-MM-dd'),
-            invalid: false
-        };
+        format = 'YYYY-MM-DD';
     }
+    return {
+        valid: date?.valid ? date.valid.format(format) : null,
+        invalid: false
+    };
 }
 function getDefaultAMPM() {
     return 'AM';
 }
 function getDefaultUtcOffset() {
-    return startOfTodayOffset();
-}
-function extractTimeFromIso(value) {
-    const match = value.match(/T(\d{2}:\d{2})/);
-    return match ? match[1] : undefined;
+    return startOfToday('Z');
 }
 function userInputFromDatetime({ value, uses12hClock }) {
-    const datetime = fieldValueToDate(value);
-    if (datetime && value) {
-        const rawTime = extractTimeFromIso(value);
-        const timeDate = rawTime ? (0, _datefns.parse)(rawTime, 'HH:mm', new Date(0)) : datetime;
-        const hours = (0, _datefns.getHours)(timeDate);
-        const ampm = hours < 12 ? 'AM' : 'PM';
-        let time;
-        if (uses12hClock) {
-            const h12 = hours % 12 || 12;
-            time = `${String(h12).padStart(2, '0')}:${String((0, _datefns.getMinutes)(timeDate)).padStart(2, '0')}`;
-        } else {
-            time = rawTime ?? (0, _datefns.format)(datetime, 'HH:mm');
-        }
+    const datetime = fieldValueToMoment(value);
+    if (datetime) {
+        const timeFormat = uses12hClock ? 'hh:mm' : 'HH:mm';
         return {
             date: datetime,
-            time,
-            ampm,
-            utcOffset: parseUtcOffset(value)
+            time: datetime.format(timeFormat),
+            ampm: datetime.format('A'),
+            utcOffset: datetime.format('Z')
         };
     } else {
         return {

package/dist/esm/DatepickerInput.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Datepicker } from '@contentful/f36-components';
 import { css } from '@emotion/css';
+import moment from 'moment';
 const YEARS_INTO_FUTURE = 100;
 const MIN_YEAR = '1000';
 const styles = {
@@ -18,12 +19,14 @@ export const DatepickerInput = (props)=>{
             toDate
         ];
     }, []);
-    const selectedDate = props.value;
+    const dateObj = props.value?.toObject();
+    const selectedDate = dateObj ? new Date(dateObj.years, dateObj.months, dateObj.date) : undefined;
     return /*#__PURE__*/ React.createElement(Datepicker, {
         className: styles.root,
         selected: selectedDate,
         onSelect: (day)=>{
-            props.onChange(day ?? undefined);
+            const momentDay = day ? moment(day) : undefined;
+            props.onChange(momentDay);
         },
         inputProps: {
             isDisabled: props.disabled,

package/dist/esm/TimepickerInput.js

@@ -1,55 +1,79 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { TextInput, Flex } from '@contentful/f36-components';
 import { css } from '@emotion/css';
-import { parse, format, isValid } from 'date-fns';
+import moment from 'moment';
 const validInputFormats = [
     'hh:mm a',
+    'hh:mm A',
     'h:mm a',
+    'h:mm A',
     'hh:mm',
-    'kk:mm',
     'k:mm',
+    'kk:mm',
     'h a',
-    'HH',
-    'H:mm',
-    'h'
+    'h A',
+    'h',
+    'hh',
+    'HH'
 ];
-const REF_DATE = new Date(2000, 0, 1);
 function parseRawInput(raw) {
-    for (const fmt of validInputFormats){
-        const parsed = parse(raw, fmt, REF_DATE);
-        if (isValid(parsed)) return parsed;
+    let time = null;
+    for(let i = 0; i < validInputFormats.length; i++){
+        const date = moment(raw, validInputFormats[i]);
+        if (date.isValid()) {
+            time = date;
+            break;
+        }
     }
-    return null;
+    return time;
 }
-const getDefaultTime = ()=>parse('12:00 AM', 'hh:mm a', REF_DATE);
-const formatToString = (uses12hClock, value)=>format(value, uses12hClock ? 'hh:mm a' : 'HH:mm');
+const getDefaultTime = ()=>{
+    return moment(`12:00 AM`, 'hh:mm A');
+};
+const formatToString = (uses12hClock, value)=>{
+    return uses12hClock ? value.format('hh:mm A') : value.format('HH:mm');
+};
 export const TimepickerInput = ({ disabled, uses12hClock, time = '12:00', ampm = 'AM', onChange })=>{
     const [selectedTime, setSelectedTime] = useState(()=>{
         return formatToString(uses12hClock, getDefaultTime());
     });
     useEffect(()=>{
-        setSelectedTime(formatToString(uses12hClock, parse(`${time} ${ampm}`, 'hh:mm a', REF_DATE)));
+        setSelectedTime(formatToString(uses12hClock, moment(`${time} ${ampm}`, 'hh:mm A')));
     }, [
         time,
         ampm,
         uses12hClock
     ]);
     const handleChange = useCallback((e)=>{
-        setSelectedTime(e.currentTarget.value);
-    }, []);
+        const raw = e.currentTarget.value;
+        setSelectedTime(raw);
+        const parsedTime = parseRawInput(raw);
+        if (parsedTime) {
+            onChange({
+                time: parsedTime.format('hh:mm'),
+                ampm: parsedTime.format('A')
+            });
+        }
+    }, [
+        onChange
+    ]);
     const handleFocus = useCallback((e)=>{
         e.preventDefault();
         e.target.select();
     }, []);
-    const handleBlur = ()=>{
+    const handleBlur = useCallback(()=>{
         const parsedTime = parseRawInput(selectedTime);
         const value = parsedTime ?? getDefaultTime();
         setSelectedTime(formatToString(uses12hClock, value));
         onChange({
-            time: format(value, 'hh:mm'),
-            ampm: format(value, 'a').toUpperCase()
+            time: value.format('hh:mm'),
+            ampm: value.format('A')
         });
-    };
+    }, [
+        selectedTime,
+        uses12hClock,
+        onChange
+    ]);
     return /*#__PURE__*/ React.createElement(Flex, {
         className: css({
             width: '145px'

package/dist/esm/utils/data.spec.js

@@ -1,10 +1,11 @@
+import moment from 'moment';
 import { buildFieldValue, userInputFromDatetime, getDefaultAMPM, getDefaultUtcOffset } from './date';
 describe('date utils', ()=>{
     describe('buildFieldValue', ()=>{
         it('should work properly', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2018-02-02'),
+                    date: moment('2018-02-02'),
                     time: '05:00',
                     ampm: 'PM',
                     utcOffset: '+03:00'
@@ -17,7 +18,7 @@ describe('date utils', ()=>{
             });
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2015-01-14'),
+                    date: moment('2015-01-14'),
                     time: '05:00',
                     ampm: 'AM',
                     utcOffset: '-05:00'
@@ -30,7 +31,7 @@ describe('date utils', ()=>{
             });
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2015-01-14'),
+                    date: moment('2015-01-14'),
                     time: '17:00',
                     ampm: 'PM',
                     utcOffset: '-05:00'
@@ -45,7 +46,7 @@ describe('date utils', ()=>{
         it('returns date-only format when usesTime and usesTimezone are false', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2020-06-15'),
+                    date: moment('2020-06-15'),
                     time: '10:30',
                     ampm: 'AM',
                     utcOffset: '+00:00'
@@ -60,7 +61,7 @@ describe('date utils', ()=>{
         it('returns datetime without timezone when usesTime=true, usesTimezone=false', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2020-06-15'),
+                    date: moment('2020-06-15'),
                     time: '14:30',
                     ampm: 'PM',
                     utcOffset: '+00:00'
@@ -89,7 +90,7 @@ describe('date utils', ()=>{
         it('handles midnight (12:00 AM) correctly', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2021-03-01'),
+                    date: moment('2021-03-01'),
                     time: '12:00',
                     ampm: 'AM',
                     utcOffset: '+00:00'
@@ -104,7 +105,7 @@ describe('date utils', ()=>{
         it('handles noon (12:00 PM) correctly', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2021-03-01'),
+                    date: moment('2021-03-01'),
                     time: '12:00',
                     ampm: 'PM',
                     utcOffset: '+00:00'
@@ -119,7 +120,7 @@ describe('date utils', ()=>{
         it('preserves half-hour offset +05:30 (India)', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2023-08-15'),
+                    date: moment('2023-08-15'),
                     time: '10:00',
                     ampm: 'AM',
                     utcOffset: '+05:30'
@@ -134,7 +135,7 @@ describe('date utils', ()=>{
         it('preserves negative half-hour offset -09:30', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2023-08-15'),
+                    date: moment('2023-08-15'),
                     time: '03:30',
                     ampm: 'AM',
                     utcOffset: '-09:30'
@@ -149,7 +150,7 @@ describe('date utils', ()=>{
         it('preserves quarter-hour offset +05:45 (Nepal)', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2023-08-15'),
+                    date: moment('2023-08-15'),
                     time: '05:45',
                     ampm: 'AM',
                     utcOffset: '+05:45'
@@ -164,7 +165,7 @@ describe('date utils', ()=>{
         it('preserves UTC +00:00 offset', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2023-01-01'),
+                    date: moment('2023-01-01'),
                     time: '00:00',
                     ampm: 'AM',
                     utcOffset: '+00:00'
@@ -179,7 +180,7 @@ describe('date utils', ()=>{
         it('preserves far-west offset -12:00', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2023-01-01'),
+                    date: moment('2023-01-01'),
                     time: '23:59',
                     ampm: 'PM',
                     utcOffset: '-12:00'
@@ -194,7 +195,7 @@ describe('date utils', ()=>{
         it('preserves far-east offset +14:00', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2023-01-01'),
+                    date: moment('2023-01-01'),
                     time: '01:00',
                     ampm: 'AM',
                     utcOffset: '+14:00'
@@ -209,7 +210,7 @@ describe('date utils', ()=>{
         it('11:59 PM → 23:59', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2023-06-01'),
+                    date: moment('2023-06-01'),
                     time: '11:59',
                     ampm: 'PM',
                     utcOffset: '+00:00'
@@ -224,7 +225,7 @@ describe('date utils', ()=>{
         it('01:00 AM → 01:00 (no shift)', ()=>{
             expect(buildFieldValue({
                 data: {
-                    date: new Date('2023-06-01'),
+                    date: moment('2023-06-01'),
                     time: '01:00',
                     ampm: 'AM',
                     utcOffset: '+00:00'
@@ -280,12 +281,12 @@ describe('date utils', ()=>{
             });
             expect(result.date).toBeUndefined();
         });
-        it('parses a date-only string', ()=>{
+        it('parses a date-only string — utcOffset is the local system offset', ()=>{
             const result = userInputFromDatetime({
                 value: '2022-09-16',
                 uses12hClock: false
             });
-            expect(result.utcOffset).toBe('+00:00');
+            expect(result.utcOffset).toMatch(/^[+-]\d{2}:\d{2}$/);
         });
         it('preserves raw time and does not shift by system timezone (positive offset)', ()=>{
             const result = userInputFromDatetime({
@@ -305,14 +306,14 @@ describe('date utils', ()=>{
             expect(result.ampm).toBe('AM');
             expect(result.utcOffset).toBe('-05:30');
         });
-        it('handles UTC "Z" suffix — offset is +00:00, time is not shifted', ()=>{
+        it('handles UTC "Z" suffix — moment normalizes offset to +00:00', ()=>{
             const result = userInputFromDatetime({
                 value: '2021-06-01T12:00Z',
                 uses12hClock: false
             });
             expect(result.time).toBe('12:00');
             expect(result.ampm).toBe('PM');
-            expect(result.utcOffset).toBe('Z');
+            expect(result.utcOffset).toBe('+00:00');
         });
         it('handles midnight UTC correctly', ()=>{
             const result = userInputFromDatetime({

package/dist/esm/utils/date.js

@@ -1,33 +1,24 @@
-import { format, getHours, getMinutes, isValid, parse, parseISO, set } from 'date-fns';
+import moment from 'moment';
 const ZONE_RX = /(Z|[+-]\d{2}[:+]?\d{2})$/;
-function startOfTodayOffset() {
-    return format(new Date(), 'xxx');
+function startOfToday(format) {
+    return moment().set({
+        hours: 0,
+        minutes: 0
+    }).format(format);
 }
-function parseUtcOffset(datetimeString) {
-    const match = datetimeString.match(ZONE_RX);
-    return match ? match[1] : '+00:00';
-}
-function fieldValueToDate(datetimeString) {
+function fieldValueToMoment(datetimeString) {
     if (!datetimeString) {
         return null;
     }
-    const date = parseISO(datetimeString);
-    return isValid(date) ? date : null;
+    const datetime = moment(datetimeString);
+    if (ZONE_RX.test(datetimeString)) {
+        datetime.utcOffset(datetimeString);
+    }
+    return datetime;
 }
 function timeFromUserInput(input) {
     const timeInput = input.time || '00:00';
-    const parsed = parse(timeInput, 'HH:mm', new Date(0));
-    let hours = getHours(parsed);
-    const minutes = getMinutes(parsed);
-    if (input.ampm === 'PM' && hours < 12) {
-        hours += 12;
-    } else if (input.ampm === 'AM' && hours === 12) {
-        hours = 0;
-    }
-    return {
-        hours,
-        minutes
-    };
+    return moment.utc(timeInput + '!' + input.ampm, 'HH:mm!A');
 }
 function datetimeFromUserInput(input) {
     if (!input.date) {
@@ -35,14 +26,12 @@ function datetimeFromUserInput(input) {
             valid: null
         };
     }
-    const { hours, minutes } = timeFromUserInput(input);
-    const date = set(input.date, {
-        hours,
-        minutes,
-        seconds: 0,
-        milliseconds: 0
+    const time = timeFromUserInput(input);
+    const date = moment.parseZone(input.utcOffset, 'Z').set(input.date.toObject()).set({
+        hours: time.hours(),
+        minutes: time.minutes()
     });
-    if (isValid(date)) {
+    if (date.isValid()) {
         return {
             valid: date
         };
@@ -60,58 +49,34 @@ export function buildFieldValue({ data, usesTime, usesTimezone }) {
             invalid: true
         };
     }
-    if (!date.valid) {
-        return {
-            valid: null,
-            invalid: false
-        };
-    }
+    let format;
     if (usesTimezone) {
-        return {
-            valid: format(date.valid, "yyyy-MM-dd'T'HH:mm") + data.utcOffset,
-            invalid: false
-        };
+        format = 'YYYY-MM-DDTHH:mmZ';
     } else if (usesTime) {
-        return {
-            valid: format(date.valid, "yyyy-MM-dd'T'HH:mm"),
-            invalid: false
-        };
+        format = 'YYYY-MM-DDTHH:mm';
     } else {
-        return {
-            valid: format(date.valid, 'yyyy-MM-dd'),
-            invalid: false
-        };
+        format = 'YYYY-MM-DD';
     }
+    return {
+        valid: date?.valid ? date.valid.format(format) : null,
+        invalid: false
+    };
 }
 export function getDefaultAMPM() {
     return 'AM';
 }
 export function getDefaultUtcOffset() {
-    return startOfTodayOffset();
-}
-function extractTimeFromIso(value) {
-    const match = value.match(/T(\d{2}:\d{2})/);
-    return match ? match[1] : undefined;
+    return startOfToday('Z');
 }
 export function userInputFromDatetime({ value, uses12hClock }) {
-    const datetime = fieldValueToDate(value);
-    if (datetime && value) {
-        const rawTime = extractTimeFromIso(value);
-        const timeDate = rawTime ? parse(rawTime, 'HH:mm', new Date(0)) : datetime;
-        const hours = getHours(timeDate);
-        const ampm = hours < 12 ? 'AM' : 'PM';
-        let time;
-        if (uses12hClock) {
-            const h12 = hours % 12 || 12;
-            time = `${String(h12).padStart(2, '0')}:${String(getMinutes(timeDate)).padStart(2, '0')}`;
-        } else {
-            time = rawTime ?? format(datetime, 'HH:mm');
-        }
+    const datetime = fieldValueToMoment(value);
+    if (datetime) {
+        const timeFormat = uses12hClock ? 'hh:mm' : 'HH:mm';
         return {
             date: datetime,
-            time,
-            ampm,
-            utcOffset: parseUtcOffset(value)
+            time: datetime.format(timeFormat),
+            ampm: datetime.format('A'),
+            utcOffset: datetime.format('Z')
         };
     } else {
         return {

package/dist/types/DatepickerInput.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import moment from 'moment';
 export type DatePickerProps = {
-    value?: Date;
-    onChange: (val: Date | undefined) => void;
+    value?: moment.Moment;
+    onChange: (val: moment.Moment | undefined) => void;
     disabled?: boolean;
 };
 export declare const DatepickerInput: (props: DatePickerProps) => React.JSX.Element;

package/dist/types/types.d.ts

@@ -1,7 +1,8 @@
+import moment from 'moment';
 export type DateTimeFormat = 'dateonly' | 'time' | 'timeZ';
 export type TimeFormat = '12' | '24';
 export type TimeResult = {
-    date?: Date;
+    date?: moment.Moment;
     time?: string;
     ampm: string;
     utcOffset: string;

package/dist/types/utils/date.d.ts

@@ -13,10 +13,7 @@ export declare function buildFieldValue({ data, usesTime, usesTimezone, }: {
     invalid: boolean;
     valid?: undefined;
 } | {
-    valid: null;
-    invalid: boolean;
-} | {
-    valid: string;
+    valid: string | null;
     invalid: boolean;
 };
 export declare function getDefaultAMPM(): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-date",
-  "version": "2.0.8-canary.2+bc54b71b",
+  "version": "2.0.9",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -39,13 +39,13 @@
   "dependencies": {
     "@contentful/f36-components": "^6.7.1",
     "@contentful/f36-tokens": "^6.1.2",
-    "@contentful/field-editor-shared": "^3.1.4",
+    "@contentful/field-editor-shared": "^4.0.0",
     "@emotion/css": "^11.13.5",
-    "date-fns": "^2.30.0"
+    "moment": "^2.20.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",
-    "@contentful/field-editor-test-utils": "^2.0.1",
+    "@contentful/field-editor-test-utils": "^3.0.0",
     "@lingui/core": "5.3.0",
     "@types/timezoned-date": "^3.0.0",
     "timezoned-date": "^3.0.2"
@@ -57,5 +57,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "bc54b71bac951f367ecb112f2d869b461edb58c4"
+  "gitHead": "267c2c3194103479b3fa0ba2c61001ef993f4cfd"
 }