diff --git a/src/fields/date-field/DateInput.mock.tsx b/src/fields/date-field/DateInput.mock.tsx
index 31ce0c7..9bc147a 100644
--- a/src/fields/date-field/DateInput.mock.tsx
+++ b/src/fields/date-field/DateInput.mock.tsx
@@ -1,21 +1,11 @@
-import { ReactNode } from "react";
-
-import { DateField } from "./dateField";
-import { FieldLabel } from "../../components";
-import { FieldErrors } from "../../components/field-errors";
-import { useDateFieldProps } from "../../hooks";
+import { FieldErrors, FieldLabel } from "../../components";
+import { DateFieldProps, useDateFieldProps } from "../../hooks";
export const getDateString = (date: Date = new Date()) =>
date.toISOString().slice(0, 10);
-export const DateInput = ({
- field,
- label,
-}: {
- field: DateField;
- label: ReactNode;
-}) => {
- const { value, ...props } = useDateFieldProps(field);
+export const DateInput = ({ field, label, initialValue }: DateFieldProps) => {
+ const { value, ...props } = useDateFieldProps(field, { initialValue });
return (
diff --git a/src/fields/date-field/dateField.stories.tsx b/src/fields/date-field/dateField.stories.tsx
index 3073edb..a0a346c 100644
--- a/src/fields/date-field/dateField.stories.tsx
+++ b/src/fields/date-field/dateField.stories.tsx
@@ -30,6 +30,21 @@ export const OptionalInput = formStory({
},
});
+export const InitializedInput = formStory({
+ args: {
+ fields: {
+ dueDate: dateField({ name: "dueDate" }).optional(),
+ },
+ children: ({ fields }) => (
+
+ ),
+ },
+});
+
const nowPlusDays = (days = 0) => {
const date = new Date();
date.setDate(date.getDate() + days);
diff --git a/src/hooks/use-date-field-props/useDateFieldProps.ts b/src/hooks/use-date-field-props/useDateFieldProps.ts
index efd0d2c..7e9be57 100644
--- a/src/hooks/use-date-field-props/useDateFieldProps.ts
+++ b/src/hooks/use-date-field-props/useDateFieldProps.ts
@@ -1,7 +1,8 @@
+import { UseFieldOptions } from "form-atoms";
import { ChangeEvent } from "react";
import { FieldProps, useFieldProps } from "../";
-import { type DateField } from "../../fields/";
+import type { DateField, DateFieldValue } from "../../fields/";
export type DateFieldProps = FieldProps;
@@ -15,5 +16,7 @@ const getDate = (event: ChangeEvent) => {
: undefined;
};
-export const useDateFieldProps = (field: DateField) =>
- useFieldProps(field, getDate);
+export const useDateFieldProps = (
+ field: DateField,
+ options?: UseFieldOptions,
+) => useFieldProps(field, getDate, options);