Melange bindings for react-dates

Melange bindings for react-dates.

Status 🚧 🏗

It is not completed, we are adding bindings as we go. Doesn't follow semver.

Installation

Install opam package manager.

Then:

opam install melange-react-dates

The bindings support the following versions of the react-dates npm package, which should be installed separately:

  "dependencies": {
    "react-dates": "^21.8.0"
  }

Setup

Add melange-react-dates to the libraries field in your dune file:

; ...
  (libraries melange-react-dates)
; ...

To include styles

[%bs.raw {|require('react-dates/lib/css/_datepicker.css')|}];

react-dates assumes that box-sizing: border-box is set globally in your page's CSS. At least do this, to make it display properly.

.DateRangePicker *,
.SingleDatePicker *,
.DayPickerRangeController * {
  box-sizing: border-box;
}

Examples

[%bs.raw {|require('react-dates/lib/css/_datepicker.css')|}];

[@react.component]
let make = () => {
  let (dates, setDates) = React.useState(_ => DateRangePicker.Dates.{startDate: None, endDate: None});
  let (focusedInput, setFocusedInput) = React.useState(_ => None);

  <DateRangePicker
    startDate=?{dates.startDate}
    startDateId="startDateId"
    endDate=?{dates.endDate}
    endDateId="endDateId"
    ?focusedInput
    onDatesChange={v => setDates(_ => v)}
    onFocusChange={v => setFocusedInput(_ => v)}
    isOutsideRange={_day => false}
  />;
};

TODO

• DateRangePicker
• SingleDatePicker
• DayPickerRangeController
• can/should I remove dep on bs-moment?