@contentful/field-editor-date 2.0.7 → 2.0.8-canary.0

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,28 @@ 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',
+    'H:mm',
     'h a',
-    'h A',
-    'h',
-    'hh',
-    'HH'
+    '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,
@@ -112,8 +94,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()
         });
     };
     return /*#__PURE__*/ _react.default.createElement(_f36components.Flex, {

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'
@@ -52,5 +46,135 @@ describe('date utils', ()=>{
                 valid: '2015-01-14T17:00-05:00'
             });
         });
+        it('returns date-only format when usesTime and usesTimezone are false', ()=>{
+            expect((0, _date.buildFieldValue)({
+                data: {
+                    date: new Date('2020-06-15'),
+                    time: '10:30',
+                    ampm: 'AM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: false,
+                usesTime: false
+            })).toEqual({
+                invalid: false,
+                valid: '2020-06-15'
+            });
+        });
+        it('returns datetime without timezone when usesTime=true, usesTimezone=false', ()=>{
+            expect((0, _date.buildFieldValue)({
+                data: {
+                    date: new Date('2020-06-15'),
+                    time: '14:30',
+                    ampm: 'PM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: false,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2020-06-15T14:30'
+            });
+        });
+        it('returns valid: null when no date is provided', ()=>{
+            expect((0, _date.buildFieldValue)({
+                data: {
+                    time: '10:00',
+                    ampm: 'AM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: null
+            });
+        });
+        it('handles midnight (12:00 AM) correctly', ()=>{
+            expect((0, _date.buildFieldValue)({
+                data: {
+                    date: new Date('2021-03-01'),
+                    time: '12:00',
+                    ampm: 'AM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2021-03-01T00:00+00:00'
+            });
+        });
+        it('handles noon (12:00 PM) correctly', ()=>{
+            expect((0, _date.buildFieldValue)({
+                data: {
+                    date: new Date('2021-03-01'),
+                    time: '12:00',
+                    ampm: 'PM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2021-03-01T12:00+00:00'
+            });
+        });
+    });
+    describe('userInputFromDatetime', ()=>{
+        it('parses a full ISO datetime string with timezone', ()=>{
+            const result = (0, _date.userInputFromDatetime)({
+                value: '2018-02-02T17:00+03:00',
+                uses12hClock: false
+            });
+            expect(result.time).toBe('17:00');
+            expect(result.ampm).toBe('PM');
+            expect(result.utcOffset).toBe('+03:00');
+        });
+        it('parses a full ISO datetime string with 12h clock', ()=>{
+            const result = (0, _date.userInputFromDatetime)({
+                value: '2018-02-02T05:00+03:00',
+                uses12hClock: true
+            });
+            expect(result.time).toBe('05:00');
+            expect(result.ampm).toBe('AM');
+            expect(result.utcOffset).toBe('+03:00');
+        });
+        it('returns defaults when value is null', ()=>{
+            const result = (0, _date.userInputFromDatetime)({
+                value: null,
+                uses12hClock: false
+            });
+            expect(result.date).toBeUndefined();
+            expect(result.ampm).toBe((0, _date.getDefaultAMPM)());
+            expect(result.utcOffset).toBe((0, _date.getDefaultUtcOffset)());
+        });
+        it('returns defaults when value is undefined', ()=>{
+            const result = (0, _date.userInputFromDatetime)({
+                value: undefined,
+                uses12hClock: false
+            });
+            expect(result.date).toBeUndefined();
+            expect(result.ampm).toBe((0, _date.getDefaultAMPM)());
+        });
+        it('returns defaults when value is empty string', ()=>{
+            const result = (0, _date.userInputFromDatetime)({
+                value: '',
+                uses12hClock: false
+            });
+            expect(result.date).toBeUndefined();
+        });
+        it('parses a date-only string', ()=>{
+            const result = (0, _date.userInputFromDatetime)({
+                value: '2022-09-16',
+                uses12hClock: false
+            });
+            expect(result.utcOffset).toBe('+00:00');
+        });
+    });
+    describe('getDefaultAMPM', ()=>{
+        it('returns AM', ()=>{
+            expect((0, _date.getDefaultAMPM)()).toBe('AM');
+        });
     });
 });

package/dist/cjs/utils/date.js

@@ -22,32 +22,36 @@ _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);
+    return match ? match[1] : '+00:00';
 }
-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 +59,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 +84,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,31 @@
 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',
+    'H:mm',
     'h a',
-    'h A',
-    'h',
-    'hh',
-    'HH'
+    '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,
@@ -56,8 +43,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()
         });
     };
     return /*#__PURE__*/ React.createElement(Flex, {

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

@@ -1,11 +1,10 @@
-import moment from 'moment';
-import { buildFieldValue } from './date';
+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'
@@ -43,5 +42,135 @@ describe('date utils', ()=>{
                 valid: '2015-01-14T17:00-05:00'
             });
         });
+        it('returns date-only format when usesTime and usesTimezone are false', ()=>{
+            expect(buildFieldValue({
+                data: {
+                    date: new Date('2020-06-15'),
+                    time: '10:30',
+                    ampm: 'AM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: false,
+                usesTime: false
+            })).toEqual({
+                invalid: false,
+                valid: '2020-06-15'
+            });
+        });
+        it('returns datetime without timezone when usesTime=true, usesTimezone=false', ()=>{
+            expect(buildFieldValue({
+                data: {
+                    date: new Date('2020-06-15'),
+                    time: '14:30',
+                    ampm: 'PM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: false,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2020-06-15T14:30'
+            });
+        });
+        it('returns valid: null when no date is provided', ()=>{
+            expect(buildFieldValue({
+                data: {
+                    time: '10:00',
+                    ampm: 'AM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: null
+            });
+        });
+        it('handles midnight (12:00 AM) correctly', ()=>{
+            expect(buildFieldValue({
+                data: {
+                    date: new Date('2021-03-01'),
+                    time: '12:00',
+                    ampm: 'AM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2021-03-01T00:00+00:00'
+            });
+        });
+        it('handles noon (12:00 PM) correctly', ()=>{
+            expect(buildFieldValue({
+                data: {
+                    date: new Date('2021-03-01'),
+                    time: '12:00',
+                    ampm: 'PM',
+                    utcOffset: '+00:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2021-03-01T12:00+00:00'
+            });
+        });
+    });
+    describe('userInputFromDatetime', ()=>{
+        it('parses a full ISO datetime string with timezone', ()=>{
+            const result = userInputFromDatetime({
+                value: '2018-02-02T17:00+03:00',
+                uses12hClock: false
+            });
+            expect(result.time).toBe('17:00');
+            expect(result.ampm).toBe('PM');
+            expect(result.utcOffset).toBe('+03:00');
+        });
+        it('parses a full ISO datetime string with 12h clock', ()=>{
+            const result = userInputFromDatetime({
+                value: '2018-02-02T05:00+03:00',
+                uses12hClock: true
+            });
+            expect(result.time).toBe('05:00');
+            expect(result.ampm).toBe('AM');
+            expect(result.utcOffset).toBe('+03:00');
+        });
+        it('returns defaults when value is null', ()=>{
+            const result = userInputFromDatetime({
+                value: null,
+                uses12hClock: false
+            });
+            expect(result.date).toBeUndefined();
+            expect(result.ampm).toBe(getDefaultAMPM());
+            expect(result.utcOffset).toBe(getDefaultUtcOffset());
+        });
+        it('returns defaults when value is undefined', ()=>{
+            const result = userInputFromDatetime({
+                value: undefined,
+                uses12hClock: false
+            });
+            expect(result.date).toBeUndefined();
+            expect(result.ampm).toBe(getDefaultAMPM());
+        });
+        it('returns defaults when value is empty string', ()=>{
+            const result = userInputFromDatetime({
+                value: '',
+                uses12hClock: false
+            });
+            expect(result.date).toBeUndefined();
+        });
+        it('parses a date-only string', ()=>{
+            const result = userInputFromDatetime({
+                value: '2022-09-16',
+                uses12hClock: false
+            });
+            expect(result.utcOffset).toBe('+00:00');
+        });
+    });
+    describe('getDefaultAMPM', ()=>{
+        it('returns AM', ()=>{
+            expect(getDefaultAMPM()).toBe('AM');
+        });
     });
 });

package/dist/esm/utils/date.js

@@ -1,24 +1,33 @@
-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);
+    return match ? match[1] : '+00:00';
+}
+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 +35,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 +60,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.7",
+  "version": "2.0.8-canary.0+d0604e80",
   "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": "^3.1.4",
     "@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": "49c6f5bd0ee3a9e1a8a8a6573698380282ca8d1d"
+  "gitHead": "d0604e80ea65d12805975ad34c70c5fd499457c5"
 }