package melange-react-dates
Melange bindings for react-dates
Install
Dune Dependency
Authors
Maintainers
Sources
melange-react-dates-1.4.0.tbz
sha256=f9ddf931b80f0618cddedd2b7334390fa74adf5d0f0b4f0429c95ce1a07db2cd
sha512=a277a81d7a95995ee1b4a5d7eced8b47b84acae9168a3fcf35880aed99610526cb849fb571faab25042c94c99bdde8dea6ca371c2e8398a1088051aa3e3ee365
Description
README
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
[x] DateRangePicker
[x] SingleDatePicker
[ ] can/should I remove dep on
bs-moment
?
Dependencies (7)
- reason-react-ppx
- reason-react
- melange-moment
- reason
-
melange
>= "2.0.0" & < "3.0.0"
- ocaml
-
dune
>= "3.8"
Dev Dependencies (1)
-
odoc
with-doc
Used by
None
Conflicts
None
sectionYPositions = computeSectionYPositions($el), 10)"
x-init="setTimeout(() => sectionYPositions = computeSectionYPositions($el), 10)"
>
On This Page