How to use react-day-picker - 10 common examples

return day.getDay() === 0;
}

// make sure global variable version works
function MyComponent2() {
    return 
}
DayPicker.DateUtils.clone(new Date());
DayPicker.DateUtils.isDayInRange(new Date(), {from: new Date()});

// make sure imported version works
function MyComponent() {
   return 
}
DayPicker2.DateUtils.clone(new Date());
DayPicker2.DateUtils.isDayInRange(new Date(), { from: new Date() });

// test interface for captionElement prop
interface MyCaptionProps extends ReactDayPicker.CaptionElementProps { }
class Caption extends React.Component {
    render() {
        const { date, locale, localeUtils, onClick } = this.props;

        if (!date || !localeUtils || typeof locale === 'undefined') {
            return null
        }

        return (
            <div>
              { localeUtils.formatMonthTitle(date, locale) }
            </div>
        );

function isSunday(day: Date) {
    return day.getDay() === 0;
}

// make sure global variable version works
function MyComponent2() {
    return 
}
DayPicker.DateUtils.clone(new Date());
DayPicker.DateUtils.isDayInRange(new Date(), {from: new Date()});

// make sure imported version works
function MyComponent() {
   return 
}
DayPicker2.DateUtils.clone(new Date());
DayPicker2.DateUtils.isDayInRange(new Date(), { from: new Date() });

// test interface for captionElement prop
interface MyCaptionProps extends ReactDayPicker.CaptionElementProps { }
class Caption extends React.Component {
    render() {
        const { date, locale, localeUtils, onClick } = this.props;

        if (!date || !localeUtils || typeof locale === 'undefined') {
            return null
        }

        return (
            <div>
              { localeUtils.formatMonthTitle(date, locale) }
            </div>

selectDay = ( day ) => {
		const { withRange } = this.props;
		let range = {};

		if ( withRange ) {
			range = DateUtils.addDayToRange( day, this.state );

			// if the range was unselected we fallback to the first available day
			if ( range.from === null && range.to === null ) {
				range.from = today;
				range.to = undefined;
			}

			if ( range.to && moment( range.to ).isSame( range.from ) ) {
				range.to = undefined;
			}
		} else {
			range.from = day;
			range.to = undefined;
		}

		this.setState( this.maybeUpdate( range ), () => {

handleDayClick(e, day) {
    const range = DateUtils.addDayToRange(day, this.state)
    const self = this
    this.setState(range)
    // Convert to standard format for display
    _.forOwn(range, function(val, key){
      if (val) {
        let validDate = moment(val).format('L')
        self.setState({ [key + 'Temp']: validDate })
        // Update store
        self.formatAndUpdate(validDate, key)
      }
    })
  }

onSelectDate = date => {
		if ( ! this.isValidDate( date ) ) {
			return;
		}

		// DateUtils requires a range object with this shape
		const range = this.toDateRange( this.state.startDate, this.state.endDate );

		const rawDay = this.momentDateToJsDate( date );

		// Calculate the new Date range
		const newRange = DateUtils.addDayToRange( rawDay, range );

		// Update state to reflect new date range for
		// calendar and text inputs
		this.setState(
			previousState => {
				// Update to date or `null` which means "not date"
				const newStartDate = isNull( newRange.from )
					? NO_DATE_SELECTED_VALUE
					: this.nativeDateToMoment( newRange.from );
				const newEndDate = isNull( newRange.to )
					? NO_DATE_SELECTED_VALUE
					: this.nativeDateToMoment( newRange.to );

				// Update start/end state values
				let newState = {
					startDate: newStartDate,

isSelectingFirstDay(from: RangeState['from'], to: RangeState['to'], day: Date) {
    // @ts-ignore
    const isBeforeFirstDay = from && DateUtils.isDayBefore(day, from);
    const isRangeSelected = from && to;

    return !from || isBeforeFirstDay || isRangeSelected;
  }

/* eslint-disable react/prop-types */
import _ from 'lodash';
import PropTypes from 'react-peek/prop-types';
import React from 'react';
import { buildHybridComponent } from '../../util/state-management';
import { lucidClassNames } from '../../util/style-helpers';
import { StandardProps, getFirst, omitProps } from '../../util/component-types';
import * as reducers from './DateSelect.reducers';
import InfiniteSlidePanel from '../InfiniteSlidePanel/InfiniteSlidePanel';
import { ISlidePanelProps } from '../SlidePanel/SlidePanel';
import CalendarMonth, { ICalendarProps } from '../CalendarMonth/CalendarMonth';
import ChevronIcon from '../Icon/ChevronIcon/ChevronIcon';
import DayPicker from 'react-day-picker';

const cx = lucidClassNames.bind('&-DateSelect');
const DateUtils = DayPicker.DateUtils;
const NAV_BUTTON_SIZE = 32;
const clampMonthsShown = (monthsShown: number) => _.clamp(monthsShown, 1, 6);

const { any, bool, node, func, instanceOf, number, oneOf, string } = PropTypes;

interface IDateSelectCalendarMonthProps extends StandardProps {
	description?: string;
}

const DateSelectCalendarMonth = (_props: IDateSelectCalendarMonthProps): null =>
	null;
DateSelectCalendarMonth.displayName = 'DateSelect.CalendarMonth';
DateSelectCalendarMonth.peek = {
	description: `
		Child component to pass thru props to underlying CalendarMonth.
	`,

render() {
    let {
      className,
      dayPickerRef,
      isRange,
      hideTodayButton,
      onChange, // eslint-disable-line no-unused-vars
      getTodayButtonLabel,
      locale,
      pickerClassName,
      ...restProps
    } = this.props;

    let { monthToDisplay } = this.state;

    let splittedProps = splitProps(restProps, Object.keys(ReactDayPicker.propTypes));
    let commonProps = splittedProps[0];
    let pickerSpecificProps = splittedProps[1];

    let todayButton = hideTodayButton ? null : (
      <button tabindex="{-1}" type="button">
        {getTodayButtonLabel(locale)}
      </button>
    );

    let caption = (

// Here should be es2016 or CommonJS exports.

module.exports = {
  DateInput: require('./components/DateInput').default,
  DateRangeInput: require('./components/DateRangeInput').default,
  DatePicker: require('./components/DatePicker').default,
  ModifiersUtils: require('react-day-picker').ModifiersUtils
};

{
				onChange(undefined)
			}

			return this.setState({ text_value: '' })
		}

		value = trimInvalidPart(value, format)

		const selected_day = parseDate(value, format, noon, utc)

		// If the date input is unparseable,
		// or if it's one of the disabled days,
		// then don't change the selected date.
		if (!selected_day ||
			disabledDays && ModifiersUtils.dayMatchesModifier(selected_day, disabledDays))
		{
			return this.setState({ text_value: value })
		}

		// Call `onChange` only if `value` did actually change
		if (!previous_value || previous_value.getTime() !== selected_day.getTime())
		{
			onChange(selected_day)
		}

		this.setState
		({
			text_value: value
		},
		() => this.calendar && this.calendar.showMonth(selected_day))
	}