npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-date-picker-component

v5.0.6

Published

React date picker component

Downloads

12

Readme

React Datepicker Component

Installing

npm

In package.json

"react-date-picker-component": "a.b.c"

CLI

npm install react-date-picker-component

Usage

var Datepicker = require("react-date-picker-component");

ReactDOM.render(<Datepicker />, document.getElementById("component"));

Getting value

To retreive selected date you need to pass onChange function which will be triggered each time some date is selected.

function onChangeCallback(selectedDay) { /* some work */ }
ReactDOM.render(<Datepicker onChange={onChangeCallback} />, document.getElementById("component"));

Date range

If you want to have date range option just pass parameter isRange with value true. Then in the on change function you will receive object with properties startDate and endDate.

var isRange = true;
ReactDOM.render(<Datepicker isRange={isRange} />, document.getElementById("component"));

Inline calendar

If you want to have inline calendar, one when you see just date and calendar is displayed bellow after you click on it, just pass isInline parameter with value true.

var isInline = true;
ReactDOM.render(<Datepicker isInline={isInline} />, document.getElementById("component"));

Initial date

For initial selected date pass date object as selectedDate parameter.

var date = new Date();
ReactDOM.render(<Datepicker selectedDate={date} />, document.getElementById("component"));

Initialy displayed month

If you want some month initialy displayed but not selecting some day, you can pass any day from that month as date object as displayMonth prop.

var date = new Date();
ReactDOM.render(<Datepicker displayMonth={date} />, document.getElementById("component"));

Show/hide controls

If you want to hide controls for changing year or month just add showControls property with value of false. By default this property is true.

ReactDOM.render(<Datepicker showControls={false} />, document.getElementById("component"));

Minimum date

You can define minimum possible date by passing minimumDate flag.

var minumumDate = new Date();
ReactDOM.render(<Datepicker minimumDate={minimumDate} />, document.getElementById("component"));

Localization

For month names localization, you can pass monthLabels property.

var labels = [...];
ReactDOM.render(<Datepicker monthLabels={labels} />, document.getElementById("component"));

For week days names you can pass daysLabels property with array of strings representing days names as value.

var labels = ["monday", "tuesday",...];
ReactDOM.render(<Datepicker daysLabels={labels} />, document.getElementById("component"));

Week days names

Week names are enabled by default. If you want to remove them pass showDaysLabels property with value false. Names are in table head element, each one in th element with class dayLabel.

ReactDOM.render(<Datepicker showDaysLabels={false} />, document.getElementById("component"));

Styling

Currently there are three ways of styling for date picker. You can use default which can be downloaded from github in CSS or SASS format. This is not recomended because it is just some default format. You can add custom style to directive as parameter or write your CSS. Last two methodes are described belowe.

Structure

Whole component is in div element with class datepicker. Inside there are two elements in first depth level. Div with class header where is displayed selected date in format DD/MM/YYY. Next is table with class calendar. Inside we have caption with class controls which contains two divs (one for month changing and one for year changing) with two more elements. Moving into past element with class prev and into future with class next. Each week is table row with class week. Each day has class day. If day is not possible to be clicked it has class disabled, and selected day has class selected. Week days names are in thead element. Each label is th element and they are inside of one tr element. Each th element has dayLabel class.

Styling as component parameter

To add some style to part of component you can pass JSON object for styling as customStyle property. Using classes as keys you choose which part will have which style. Important thing is that React uses camel case for property names so in you styling definition you will not have font-weight but fontWeight.

var customStyle = {
	header: {
		"color": "blue",
		"fontWeight": "bold"
	}
}
ReactDOM.render(<Datepicker customStyle={customStyle} />, document.getElementById("component"));

Styling as CSS

You can use this structure and usual CSS selectors for styling this component. So for styling day element you can use .day selector or .day.selected for selected day. This is recomended usage because like this you can use different pseudoselectors like :hover and you can use media queries.

Note

This component is ready to use as npm module or as script which can be also find in github repository. However, if you do find any issues, please do contact me. Also if you are using it I would appreciate if you could let me know how it is working for you.