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-plus-time-range

v1.0.1

Published

A React component for choosing dates and date/time ranges.

Downloads

3

Readme

react-date-range

npm

npm npm

⚠️ Warning: the current branch represents the new pre-release version. Legacy version deprecated.

A date library agnostic React component for choosing dates and date ranges. Uses date-fns for date operations.

Why should you use react-date-range?

  • Stateless date operations
  • Highly configurable
  • Multiple range selection
  • Based on native js dates
  • Drag n Drop selection
  • Keyboard friendly

Live Demo : http://adphorus.github.io/react-date-range

Getting Started

Installation

yarn add react-date-range@next

If you don't use yarn

$ npm install --save react-date-range@next

Usage

You need to import skeleton and theme styles first.

import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

DatePicker

import { Calendar } from 'react-date-range';

class MyComponent extends Component {
	handleSelect(date){
		console.log(date); // native Date object
	}
	render(){
		return (
			<Calendar
				date={new Date()}
				onChange={this.handleSelect}
			/>
		)
	}
}

DateRangePicker / DateRange

import { DateRangePicker } from 'react-date-range';

class MyComponent extends Component {
	handleSelect(ranges){
		console.log(ranges);
		// {
		// 	selection: {
		// 		startDate: [native Date Object],
		// 		endDate: [native Date Object],
		// 	}
		// }
	}
	render(){
		const selectionRange = {
			startDate: new Date(),
			endDate: new Date(),
			key: 'selection',
		}
		return (
			<DateRangePicker
				ranges={[selectionRange]}
				onChange={this.handleSelect}
			/>
		)
	}
}

Options

Property | type | Default Value | Desctiption -------------------------------------|-----------|------------------|----------------------------------------------------------------- locale | Object | enUS from locale | you can view full list from here. Locales directly exported from date-fns/locales. className | String | | wrapper classname months | Number | 1 | rendered month count showSelectionPreview | Boolean | true | show preview on focused/hovered dates showMonthAndYearPickers | Boolean | true | show select tags for month and year on calendar top, if false it will just display the month and year rangeColors | String[] | | defines color for selection preview. shownDate | Date | | initial focus date minDate | Date | | defines minimum date. Disabled earlier dates maxDate | Date | | defines maximum date. Disabled later dates direction | String | 'vertical' | direction of calendar months. can be vertical or horizontal scroll | Object | { enabled: false }| infinite scroll behaviour configuration. Check out Infinite Scroll section showMonthArrow | Boolean | true | show/hide month arrow button navigatorRenderer | Func | | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object) ranges | *Object[] | [] | Defines ranges. array of range object moveRangeOnFirstSelection(DateRange) | Boolean | false | move range on startDate selection. Otherwise endDate will replace with startDate. onChange(Calendar) | Func | | callback function for date changes. fn(date: Date) onChange(DateRange) | Func | | callback function for range changes. fn(changes). changes contains changed ranges with new startDate/endDate properties. color(Calendar) | String | #3d91ff | defines color for selected date in Calendar date(Calendar) | Date | | date value for Calendar showDateDisplay(DateRange) | Boolean | true | show/hide selection display row. Uses dateDisplayFormat for formatter onShownDateChange(DateRange,Calendar)| Function | | Callback function that is called when the shown date changes initialFocusedRange(DateRange) | Object | | Initial value for focused range. See focusedRange for usage. focusedRange(DateRange) | Object | | It defines which range and step are focused. Common initial value is [0, 0]; first value is index of ranges, second one is which step on date range(startDate or endDate). onRangeFocusChange(DateRange) | Object | | Callback function for focus changes preview(DateRange) | Object | | displays a preview range and overwrite DateRange's default preview. Expected shape: { startDate: Date, endDate: Date, color: String } showPreview(DateRange) | bool | true | visibility of preview dragSelectionEnabled(Calendar) | bool | true | whether dates can be selected via drag n drop onPreviewChange(DateRange) | Object | | Callback function for preview changes dateDisplayFormat(DateRange) | String | MMM D, YYYY | selected range preview formatter. Check out date-fns's format option staticRanges(DefinedRange, DateRangePicker) | Array | default preDefined ranges | - inputRanges(DefinedRange, DateRangePicker) | Array | default input ranges | -

*shape of range:

   {
   	startDate: PropTypes.object,
   	endDate: PropTypes.object,
   	color: PropTypes.string,
   	key: PropTypes.string,
   	autoFocus: PropTypes.bool,
   	disabled: PropTypes.bool,
   	showDateDisplay: PropTypes.bool,
   }

Infinite Scrolled Mode

To enable infinite scroll set scroll={{enabled: true}} basically. Infinite scroll feature is affected by direction(rendering direction for months) and months(for rendered months count) props directly. If you prefer, you can overwrite calendar sizes with calendarWidth/calendarHeight or each month's height/withs with monthWidth/monthHeight/longMonthHeight at scroll prop.

	// shape of scroll prop
  scroll: {
    enabled: PropTypes.bool,
    monthHeight: PropTypes.number,
    longMonthHeight: PropTypes.number, // some months has 1 more row than others
    monthWidth: PropTypes.number, // just used when direction="horizontal"
    calendarWidth: PropTypes.number, // defaults monthWidth * months
    calendarHeight: PropTypes.number, // defaults monthHeight * months
  }),

TODOs

  • Make mobile friendly (integrate tap and swipe actions)
  • Add complex booking customization example with exposed dayRenderer prop
  • Add tests
  • Improve documentation