Implemented FormattedDate and FormattedTime.

README.md

@@ -22,16 +22,16 @@ yarn run build
 Then open some `*.html` from [`examples`](./examples) folder.
 
 ## Status
-Despite lots of unchecked the most hard work is done. I'll add bindings to the rest of the components once I need them. Fell free to help me out and submit PR.
+Despite lots of unchecked the most hard work is done. I'll add bindings to the rest of the components once I need them. Feel free to help me out and submit a PR.
 
 - [x] addLocaleData
 - [x] intlShape
 - [x] injectIntl
 - [x] defineMessages
 - [x] IntlProvider
-- [ ] FormattedDate
+- [x] FormattedDate
 - [ ] FormattedDate (children-as-function)
-- [ ] FormattedTime
+- [x] FormattedTime
 - [ ] FormattedTime (children-as-function)
 - [ ] FormattedRelative
 - [ ] FormattedRelative (children-as-function)

examples/basic/Page.re

@@ -32,11 +32,16 @@ let make = (~locale, ~setLocale, _) => {
                    <ReactIntl.DefinedMessage message=pageLocale##today />
                    (" " |> ReasonReact.stringToElement)
                    (
-                     Js.Date.now()
-                     |> Js.Date.fromFloat
+                     Js.Date.make()
                      |> intl.formatDate
                      |> ReasonReact.stringToElement
                    )
+                   (" (intl.formatDate)" |> ReasonReact.stringToElement)
+                   <br />
+                   <ReactIntl.DefinedMessage message=pageLocale##today />
+                   (" " |> ReasonReact.stringToElement)
+                   <ReactIntl.FormattedDate value=(Js.Date.make()) />
+                   (" (FormattedDate)" |> ReasonReact.stringToElement)
                  </div>
              )
         </ReactIntl.IntlInjector>

src/ReactIntl.re

@@ -621,6 +621,96 @@ module DefinedMessage = {
     );
 };
 
+module FormattedDate = {
+  [@bs.module "react-intl"]
+  external reactClass : ReasonReact.reactClass = "FormattedDate";
+  let make =
+      (
+        ~value: Js.Date.t,
+        ~format: option(string)=?,
+        ~localeMatcher: option(localeMatcher)=?,
+        ~formatMatcher: option(formatMatcher)=?,
+        ~timeZone: option(string)=?,
+        ~hour12: option(bool)=?,
+        ~weekday: option(textualFormat)=?,
+        ~era: option(textualFormat)=?,
+        ~year: option(numeralFormat)=?,
+        ~month: option(mixedFormat)=?,
+        ~day: option(numeralFormat)=?,
+        ~hour: option(numeralFormat)=?,
+        ~minute: option(numeralFormat)=?,
+        ~second: option(numeralFormat)=?,
+        ~timeZoneName: option(timeZoneName)=?,
+        _,
+      ) =>
+    ReasonReact.wrapJsForReason(
+      ~reactClass,
+      ~props={
+        "value": value,
+        "format": format |> Js.Nullable.fromOption,
+        "localeMatcher": localeMatcher |> mapReasonLocaleMatcherToJs,
+        "formatMatcher": formatMatcher |> mapReasonFormatMatcherToJs,
+        "timeZone": timeZone |> Js.Nullable.fromOption,
+        "hour12": hour12 |> mapOptBoolToJs,
+        "weekday": weekday |> mapReasonTextualFormatToJs,
+        "era": era |> mapReasonTextualFormatToJs,
+        "year": year |> mapReasonNumeralFormatToJs,
+        "month": month |> mapReasonMixedFormatToJs,
+        "day": day |> mapReasonNumeralFormatToJs,
+        "hour": hour |> mapReasonNumeralFormatToJs,
+        "minute": minute |> mapReasonNumeralFormatToJs,
+        "second": second |> mapReasonNumeralFormatToJs,
+        "timeZoneName": timeZoneName |> mapReasonTimeZoneNameToJs,
+      },
+      [||],
+    );
+};
+
+module FormattedTime = {
+  [@bs.module "react-intl"]
+  external reactClass : ReasonReact.reactClass = "FormattedTime";
+  let make =
+      (
+        ~value: Js.Date.t,
+        ~format: option(string)=?,
+        ~localeMatcher: option(localeMatcher)=?,
+        ~formatMatcher: option(formatMatcher)=?,
+        ~timeZone: option(string)=?,
+        ~hour12: option(bool)=?,
+        ~weekday: option(textualFormat)=?,
+        ~era: option(textualFormat)=?,
+        ~year: option(numeralFormat)=?,
+        ~month: option(mixedFormat)=?,
+        ~day: option(numeralFormat)=?,
+        ~hour: option(numeralFormat)=?,
+        ~minute: option(numeralFormat)=?,
+        ~second: option(numeralFormat)=?,
+        ~timeZoneName: option(timeZoneName)=?,
+        _,
+      ) =>
+    ReasonReact.wrapJsForReason(
+      ~reactClass,
+      ~props={
+        "value": value,
+        "format": format |> Js.Nullable.fromOption,
+        "localeMatcher": localeMatcher |> mapReasonLocaleMatcherToJs,
+        "formatMatcher": formatMatcher |> mapReasonFormatMatcherToJs,
+        "timeZone": timeZone |> Js.Nullable.fromOption,
+        "hour12": hour12 |> mapOptBoolToJs,
+        "weekday": weekday |> mapReasonTextualFormatToJs,
+        "era": era |> mapReasonTextualFormatToJs,
+        "year": year |> mapReasonNumeralFormatToJs,
+        "month": month |> mapReasonMixedFormatToJs,
+        "day": day |> mapReasonNumeralFormatToJs,
+        "hour": hour |> mapReasonNumeralFormatToJs,
+        "minute": minute |> mapReasonNumeralFormatToJs,
+        "second": second |> mapReasonNumeralFormatToJs,
+        "timeZoneName": timeZoneName |> mapReasonTimeZoneNameToJs,
+      },
+      [||],
+    );
+};
+
 /* Utils */
 let wrapUnicodeString = (input: string) => {j|$input|j};