diff --git a/libs/date/src/Date.tsx b/libs/date/src/Date.tsx
index 91fc66e..b1df171 100644
--- a/libs/date/src/Date.tsx
+++ b/libs/date/src/Date.tsx
@@ -17,16 +17,51 @@
import * as React from "react";
+import * as dateFns from "date-fns";
import { FormattedDate } from "react-intl";
+import { useIntlContext } from "@tiller-ds/intl";
+
+import { formatDate } from "./utils";
+
export type DateProps = {
/**
* Data handed to the component in a valid date format.
+ *
+ * If using the component **with** IntlProvider you don't need to pass _format_ and _formatTo_ props, the
+ * format will be inferred from the locale.
+ *
+ * If using the component **without** IntlProvider, you must also pass _format_ and _formatTo_ props.
+ *
* Other props come from Intl.DateTimeFormatOptions (https://bit.ly/3urm8s5)
*/
- children: Date;
+ children: string;
+
+ /**
+ * Format of the passed date (e.g. 'dd. MM. yyyy.' or 'MM/dd/yyyy').
+ *
+ * Pass it if you wish to manually convert the date (without the help of Intl).
+ */
+ formatFrom?: string;
+
+ /**
+ * Format of formatted date (e.g. 'dd. MM. yyyy.' or 'MM/dd/yyyy').
+ */
+ formatTo?: string;
} & Intl.DateTimeFormatOptions;
-export default function Date({ children, ...props }: DateProps) {
+export default function Date({ children, formatFrom, formatTo, ...props }: DateProps) {
+ const intl = useIntlContext();
+
+ if (!intl && !formatFrom && !formatTo) {
+ throw new Error(
+ "You must pass format and formatTo props if you are using the Date component without IntlProvider.",
+ );
+ }
+
+ if (formatFrom && formatTo) {
+ return <>{dateFns.format(formatDate(children, formatFrom) as Date, formatTo)}>;
+ }
+
return ;
}
diff --git a/storybook/src/date/Date.mdx b/storybook/src/date/Date.mdx
index 961483c..83aa88a 100644
--- a/storybook/src/date/Date.mdx
+++ b/storybook/src/date/Date.mdx
@@ -4,12 +4,18 @@ import { Date } from "@tiller-ds/date";
# Date
-Tiller Date Component uses `FormattedDate` from `react-intl` library.
+Converts _children_ to a formatted date.
-By default `` will render the formatted number into a React.Fragment.
+There are 2 possible usages of this component:
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
+1. **With IntlProvider**: the component uses `FormattedDate` from `react-intl` library and converts children to
+ a format inferred by locale.
+
+2. **Without IntlProvider**: the component uses _formatFrom_ and _formatTo_ props to convert children to a desired format.
+
+## **Recommended for optimal usage**:
+
+- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
diff --git a/storybook/src/date/Date.stories.tsx b/storybook/src/date/Date.stories.tsx
index 94a7ec2..9aef9a5 100644
--- a/storybook/src/date/Date.stories.tsx
+++ b/storybook/src/date/Date.stories.tsx
@@ -35,6 +35,10 @@ export default {
},
};
-const date = "2020-02-25" as unknown as Date;
+export const WithIntl = () => 2020-02-25;
-export const Example = () => {date};
+export const WithoutIntl = () => (
+
+ 2020-02-25
+
+);