How to use the react-day-picker.DateUtils function in react-day-picker

To help you get started, we’ve selected a few react-day-picker examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / react-day-picker / react-day-picker-tests.tsx View on Github external
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>
        );
github DefinitelyTyped / DefinitelyTyped / react-day-picker / react-day-picker-tests.tsx View on Github external
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>
github appnexus / lucid / src / components / DateSelect / DateSelect.tsx View on Github external
/* 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.
	`,
github blablacar / ui-library / src / datePicker / DatePicker.tsx View on Github external
    isOutsideRange: day => DayPicker.DateUtils.isDayBefore(day, new Date()),
    orientation: DatePickerOrientation.HORIZONTAL,
github cds-hooks / sandbox / src / scripts / components / DateBox.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import DayPicker from 'react-day-picker';
import AppDispatcher from '../dispatcher/AppDispatcher';
import ActionTypes from '../actions/ActionTypes';
import moment from 'moment';
var { isPastDay, isSameDay } =  DayPicker.DateUtils;

const DateBox = React.createClass({
  getInitialState() {
    return {
      input: moment(this.props.value).format("YYYY-MM-DD")
    };
  },

  bodyClick(e) {
      if (!ReactDOM.findDOMNode(e.target)){
        AppDispatcher.dispatch({
          type: ActionTypes.SELECT_DATE,
          id: this.props.id,
          decision: this.props.value
        })
      }
github algolia / hn-search / app / javascript / components / Datepicker / Datepicker.tsx View on Github external
const isSelectingFirstDay = (from: Date, to: Date, day: Date) => {
  const isBeforeFirstDay = from && DayPicker.DateUtils.isDayBefore(day, from);
  const isRangeSelected = from && to;
  return !from || isBeforeFirstDay || isRangeSelected;
};
github palantir / blueprint / packages / datetime / src / dateRangeInput.tsx View on Github external
private doBoundaryDatesOverlap = (date: Date | null, boundary: Boundary) => {
        const { allowSingleDayRange } = this.props;
        const otherBoundary = this.getOtherBoundary(boundary);
        const otherBoundaryDate = this.getStateKeysAndValuesForBoundary(otherBoundary).values.selectedValue;
        if (date == null || otherBoundaryDate == null) {
            return false;
        }

        if (boundary === Boundary.START) {
            const isAfter = DayPicker.DateUtils.isDayAfter(date, otherBoundaryDate);
            return isAfter || (!allowSingleDayRange && DayPicker.DateUtils.isSameDay(date, otherBoundaryDate));
        } else {
            const isBefore = DayPicker.DateUtils.isDayBefore(date, otherBoundaryDate);
            return isBefore || (!allowSingleDayRange && DayPicker.DateUtils.isSameDay(date, otherBoundaryDate));
        }
    };
github palantir / blueprint / packages / datetime / src / dateRangeInput.tsx View on Github external
private doBoundaryDatesOverlap = (date: Date | null, boundary: Boundary) => {
        const { allowSingleDayRange } = this.props;
        const otherBoundary = this.getOtherBoundary(boundary);
        const otherBoundaryDate = this.getStateKeysAndValuesForBoundary(otherBoundary).values.selectedValue;
        if (date == null || otherBoundaryDate == null) {
            return false;
        }

        if (boundary === Boundary.START) {
            const isAfter = DayPicker.DateUtils.isDayAfter(date, otherBoundaryDate);
            return isAfter || (!allowSingleDayRange && DayPicker.DateUtils.isSameDay(date, otherBoundaryDate));
        } else {
            const isBefore = DayPicker.DateUtils.isDayBefore(date, otherBoundaryDate);
            return isBefore || (!allowSingleDayRange && DayPicker.DateUtils.isSameDay(date, otherBoundaryDate));
        }
    };
github Volst / ui-components / src / dataEntry / DateRangePicker.tsx View on Github external
handleChange = day => {
    const range = DayPicker.DateUtils.addDayToRange(day, {
      from: toDate(this.props.startDate)!,
      to: toDate(this.props.endDate)!,
    });
    this.props.onChange(this.props.name, {
      startDate: range.from ? moment(range.from) : null,
      endDate: range.to ? moment(range.to) : null,
    });
  };