Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-daypicker
Advanced tools
A simple datepicker inspired by Pikaday.
Try it yourself at the Storybook.
With version 3.0.0, all external dependencies are removed except react (as a peer). That means for you
as a consumer that the active
prop which was a moment
date is now expected to be a vanilla
JavaScript date.
npm install --save react-daypicker
yarn add react-daypicker
Note that this component does not draw any border around itself or handle popping up. That is up to you. I am using it with react-bootstrap v3 and it my usage looks like this:
import 'react-daypicker/lib/DayPicker.css';
import DayPicker from 'react-daypicker';
The only required property is onDayClick
which is called when a day is clicked.
<DayPicker onDayClick={(day) => this.setState({ day })} />
An optional property active
can be added in order to mark a day as active:
<DayPicker
active={new Date()}
onDayClick={(day) => this.setState({ day })}
/>
Note that active
is expected to be an instance of Date. In prior version of this
component, it was expected to be a Moment.js wrapped date but that is no longer the
case.
A couple of optional props allow passing in custom month, day and short day names. There isn't any error handling around these props yet so be sure that you pass in 12 months and 7 days. The props are:
Set monthNames
prop to an Array of 12 strings which will be used for the month names.
Default: ['January', ... , 'December']
Set longDayNames
prop to an Array of 7 strings which will be used for the long day names. Note that
you need to hover over the short day name to see this long day name. Note the first day must be the
equivalent of Sunday.
Default: ['Sunday', ..., 'Saturday']
Set shortDayNames
prop to an Array of 7 strings which will be used for the short day names. Note
the first day must be the equivalent of Sunday.
Default: ['Sun', ..., 'Sat']
You can import the Sass stylesheet instead:
import 'react-daypicker/src/DayPicker.scss';
The root element is .react-daypicker-root
. The default styling is
intentionally monochrome and basic so that you can drop it into your project
without having to fiddle with styles right away.
This is likely to change in the future with a probable move to styled-components
or
something similar.
See package.json
for details but simply run npm run watch
(if changing code,
doesn't work for styles yet) or npm run build
.
FAQs
A simple datepicker inspired by Pikaday.
The npm package react-daypicker receives a total of 87 weekly downloads. As such, react-daypicker popularity was classified as not popular.
We found that react-daypicker 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.