@ahrefs/bs-react-dates NPM

Reason bindings for react-dates

Status 🚧 🏗

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

Installation, npm

yarn add @ahrefs/bs-react-dates

npm install --save @ahrefs/bs-react-dates

Then add @ahrefs/bs-react-dates to bs-dependencies in your bsconfig.json:

{
  ...
  "bs-dependencies": ["@ahrefs/bs-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}
  />;
};