@contentful/field-editor-date 2.0.9 → 2.0.10-canary.3

package/dist/cjs/DatepickerInput.js

@@ -11,12 +11,6 @@ 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();
@@ -75,14 +69,12 @@ const DatepickerInput = (props)=>{
             toDate
         ];
     }, []);
-    const dateObj = props.value?.toObject();
-    const selectedDate = dateObj ? new Date(dateObj.years, dateObj.months, dateObj.date) : undefined;
+    const selectedDate = props.value;
     return /*#__PURE__*/ _react.default.createElement(_f36components.Datepicker, {
         className: styles.root,
         selected: selectedDate,
         onSelect: (day)=>{
-            const momentDay = day ? (0, _moment.default)(day) : undefined;
-            props.onChange(momentDay);
+            props.onChange(day ?? undefined);
         },
         inputProps: {
             isDisabled: props.disabled,

package/dist/cjs/TimepickerInput.js

@@ -11,12 +11,7 @@ Object.defineProperty(exports, "TimepickerInput", {
 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
-    };
-}
+const _datefns = require("date-fns");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -60,41 +55,31 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const validInputFormats = [
     'hh:mm a',
-    'hh:mm A',
     'h:mm a',
-    'h:mm A',
     'hh:mm',
-    'k:mm',
     'kk:mm',
+    'k:mm',
     'h a',
-    'h A',
-    'h',
-    'hh',
-    'HH'
+    'HH',
+    'H:mm',
+    'h'
 ];
+const REF_DATE = new Date(2000, 0, 1);
 function parseRawInput(raw) {
-    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;
-        }
+    for (const fmt of validInputFormats){
+        const parsed = (0, _datefns.parse)(raw, fmt, REF_DATE);
+        if ((0, _datefns.isValid)(parsed)) return parsed;
     }
-    return time;
+    return null;
 }
-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 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 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, _moment.default)(`${time} ${ampm}`, 'hh:mm A')));
+        setSelectedTime(formatToString(uses12hClock, (0, _datefns.parse)(`${time} ${ampm}`, 'hh:mm a', REF_DATE)));
     }, [
         time,
         ampm,
@@ -103,16 +88,7 @@ const TimepickerInput = ({ disabled, uses12hClock, time = '12:00', ampm = 'AM',
     const handleChange = (0, _react.useCallback)((e)=>{
         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();
@@ -122,8 +98,8 @@ const TimepickerInput = ({ disabled, uses12hClock, time = '12:00', ampm = 'AM',
         const value = parsedTime ?? getDefaultTime();
         setSelectedTime(formatToString(uses12hClock, value));
         onChange({
-            time: value.format('hh:mm'),
-            ampm: value.format('A')
+            time: (0, _datefns.format)(value, 'hh:mm'),
+            ampm: (0, _datefns.format)(value, 'a').toUpperCase()
         });
     }, [
         selectedTime,

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

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

package/dist/cjs/utils/date.js

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

package/dist/esm/DatepickerInput.js

@@ -1,7 +1,6 @@
 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 = {
@@ -19,14 +18,12 @@ export const DatepickerInput = (props)=>{
             toDate
         ];
     }, []);
-    const dateObj = props.value?.toObject();
-    const selectedDate = dateObj ? new Date(dateObj.years, dateObj.months, dateObj.date) : undefined;
+    const selectedDate = props.value;
     return /*#__PURE__*/ React.createElement(Datepicker, {
         className: styles.root,
         selected: selectedDate,
         onSelect: (day)=>{
-            const momentDay = day ? moment(day) : undefined;
-            props.onChange(momentDay);
+            props.onChange(day ?? undefined);
         },
         inputProps: {
             isDisabled: props.disabled,

package/dist/esm/TimepickerInput.js

@@ -1,44 +1,34 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { TextInput, Flex } from '@contentful/f36-components';
 import { css } from '@emotion/css';
-import moment from 'moment';
+import { parse, format, isValid } from 'date-fns';
 const validInputFormats = [
     'hh:mm a',
-    'hh:mm A',
     'h:mm a',
-    'h:mm A',
     'hh:mm',
-    'k:mm',
     'kk:mm',
+    'k:mm',
     'h a',
-    'h A',
-    'h',
-    'hh',
-    'HH'
+    'HH',
+    'H:mm',
+    'h'
 ];
+const REF_DATE = new Date(2000, 0, 1);
 function parseRawInput(raw) {
-    let time = null;
-    for(let i = 0; i < validInputFormats.length; i++){
-        const date = moment(raw, validInputFormats[i]);
-        if (date.isValid()) {
-            time = date;
-            break;
-        }
+    for (const fmt of validInputFormats){
+        const parsed = parse(raw, fmt, REF_DATE);
+        if (isValid(parsed)) return parsed;
     }
-    return time;
+    return null;
 }
-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');
-};
+const getDefaultTime = ()=>parse('12:00 AM', 'hh:mm a', REF_DATE);
+const formatToString = (uses12hClock, value)=>format(value, uses12hClock ? 'hh:mm a' : '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, moment(`${time} ${ampm}`, 'hh:mm A')));
+        setSelectedTime(formatToString(uses12hClock, parse(`${time} ${ampm}`, 'hh:mm a', REF_DATE)));
     }, [
         time,
         ampm,
@@ -47,16 +37,7 @@ export const TimepickerInput = ({ disabled, uses12hClock, time = '12:00', ampm =
     const handleChange = useCallback((e)=>{
         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();
@@ -66,8 +47,8 @@ export const TimepickerInput = ({ disabled, uses12hClock, time = '12:00', ampm =
         const value = parsedTime ?? getDefaultTime();
         setSelectedTime(formatToString(uses12hClock, value));
         onChange({
-            time: value.format('hh:mm'),
-            ampm: value.format('A')
+            time: format(value, 'hh:mm'),
+            ampm: format(value, 'a').toUpperCase()
         });
     }, [
         selectedTime,

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

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

package/dist/esm/utils/date.js

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

package/dist/types/DatepickerInput.d.ts

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

package/dist/types/types.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-date",
-  "version": "2.0.9",
+  "version": "2.0.10-canary.3+a0957a88",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -41,7 +41,7 @@
     "@contentful/f36-tokens": "^6.1.2",
     "@contentful/field-editor-shared": "^4.0.0",
     "@emotion/css": "^11.13.5",
-    "moment": "^2.20.0"
+    "date-fns": "^2.30.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",
@@ -57,5 +57,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "267c2c3194103479b3fa0ba2c61001ef993f4cfd"
+  "gitHead": "a0957a88508271646e8134b212192ddb6e3605bb"
 }