react-day-picker-themeable
Advanced tools
Weekly downloads
Changelog
v7.0.5 (2017-12-03)
Breaking changes
enableOutsideDays
prop is now named showOutsideDays
DayPickerInput
, we removed the moment.js dependency and
changed how to pass props to the input field (upgrade is easy, see below).- var DayPicker = require('react-day-picker`)
+ var DayPicker = require('react-day-picker`).default
v6.2.1
(see
#533), use the default
import:
- import { DayPicker } from 'react-day-picker`;
+ import DayPicker from 'react-day-picker';
div
with a .DayPicker-Months
CSS class.If you find problems while upgrading, please add an issue, thanks!
New features
.DayPicker-Months
container.renderWeek
prop (#497 by
jenshandersson)onTodayButtonClick
prop (#529)showWeekDays
prop. Set it to false
to hide weekday namesmonth
prop to
navbarElement
(#552)enableOutsideDays
prop to
showOutsideDays
Bug fixes
DayModifiers
and Modifiers
back to type
definitions file (#526
by azhangstrata)role="application"
(#548 by
trezy)Breaking changes
The moment.js requirement
has been removed, and you
should use
parseDate
and
formatDate
props to parse and format the dates. If you want to keep using moment.js, your
existing code should changes as follows:
import DayPicker from 'react-day-picker/DayPickerInput'
+ import { formatDate, parseDate, } from 'react-day-picker/moment';
function MyDayPicker() {
return (
<DayPickerInput
placeholder="Please choose a date"
format="LL"
+ formatDate={formatDate}
+ parseDate={parseDate}
>
);
}
See also this example.
You must pass additional props to the input component using the
inputProps
prop. This is not a breaking change if you are just using placeholder
or
value
. E.g.:
<DayPickerInput
placeholder="Type a day"
value={this.state.selectedDay}
- onFocus={myFocusHandler}
- className="my-input-css"
+ inputProps={{
+ onFocus: myFocusHandler,
+ className: 'my-input-css,
+ }}
/>
New features
inputProps
prop to pass additional props to the input componentparseDate
and
formatDate
propsinputProps
prop to pass additional props to the input componentoverlayComponent
prop: useful to customize the overlay component
(#477, thanks to
wldcordeiro)numberOfMonths
, selectedDays
props from
dayPickerProps
(#513,
#531 by
hydrognomik). Useful for selecting range of
days (example).showOverlay
prop: shows the overlay at the initial rendering (useful for styling)getInput
and
getDayPicker
public methodsfixedWeek
prop. Use dayPickerProps ={{ fixedWeek: true }}
to restore it.Bug fixes
classNames
(#517,
#504 by
tume)Readme
Themeable version of react-day-picker |
---|
Flexible date picker component for React.
Highly customizable, localizable, with ARIA support, no external dependencies, 9KB gzipped
Documentation | Examples | API | Changelog
Please fork and use https://codesandbox.io/s/XDAE3x0W8 to reproduce your problem.
react-day-picker
.FAQs
Flexible date picker component for React
The npm package react-day-picker-themeable receives a total of 440 weekly downloads. As such, react-day-picker-themeable popularity was classified as not popular.
We found that react-day-picker-themeable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.