
Product
Introducing Repository Labels and Security Policies
Socket is introducing a new way to organize repositories and apply repository-specific security policies.
react-day-picker-themeable
Advanced tools
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
.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
FAQs
Flexible date picker component for React
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 for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is introducing a new way to organize repositories and apply repository-specific security policies.
Research
Security News
Socket researchers uncovered malicious npm and PyPI packages that steal crypto wallet credentials using Google Analytics and Telegram for exfiltration.
Product
Socket now supports .NET, bringing supply chain security and SBOM accuracy to NuGet and MSBuild-powered C# projects.