How to use react-moment-proptypes - 10 common examples

onDatesChange={(date) => { this.handleChange(date) }}
						onFocusChange={this.onFocusChange}
					/>
				
			
		);
	}
}

DateRange.propTypes = {
	componentId: React.PropTypes.string.isRequired,
	appbaseField: React.PropTypes.string,
	title: React.PropTypes.string,
	placeholder: React.PropTypes.string,
	startDate: momentPropTypes.momentObj,
	endDate: momentPropTypes.momentObj,
	numberOfMonths: React.PropTypes.number,
	allowAllDates: React.PropTypes.bool,
	extra: React.PropTypes.any
};

// Default props value
DateRange.defaultProps = {
	placeholder: 'Select Date',
	numberOfMonths: 2,
	allowAllDates: true,
	startDate: null,
	endDate: null
};

// context type
DateRange.contextTypes = {

const FooterText = styled.Text`
  ${props => {
    return {
      textAlign: "center",
      ...props.theme.calendarModalFooterText
    };
  }}
`;

const propTypes = {
  mode: PropTypes.string,
  numberOfMonths: PropTypes.number,
  initialVisibleMonth: PropTypes.func,
  dates: PropTypes.arrayOf(momentPropTypes.momentObj),
  startDate: momentPropTypes.momentObj,
  endDate: momentPropTypes.momentObj,

  // Custom props
  modalProps: PropTypes.object,
  listViewProps: PropTypes.object,

  onDayPress: PropTypes.func,
  onClearPress: PropTypes.func,
  onClosePress: PropTypes.func,
  onSavePress: PropTypes.func,

  // i18n
  monthFormat: PropTypes.string,
  phrases: PropTypes.shape({
    clearDates: PropTypes.node,
    save: PropTypes.node

};
  }}
`;
const DayContainer = styled.View`
  ${{
    flex: 1,
    alignSelf: "stretch",
    // Hack to avoid this issue
    // https://github.com/facebook/react-native/issues/10539
    marginLeft: -1,
    marginRight: -1
  }}
`;

const propTypes = {
  month: momentPropTypes.momentObj,
  dates: PropTypes.arrayOf(momentPropTypes.momentObj),
  onDayPress: PropTypes.func,

  // i18n
  monthFormat: PropTypes.string
};

const defaultProps = {
  month: moment(),
  dates: [],
  onDayPress() {},

  // i18n
  monthFormat: "MMMM YYYY" // english locale
};

curYear={endYear}
              prefix="End"
              crashesDateRange={crashesDateRange}
            />
          
        
      
    );
  }
}

// react-datepicker requires dates to be moment objects
FilterByDate.propTypes = {
  crashesDateRange: PropTypes.shape({
    minDate: momentPropTypes.momentObj,
    maxDate: momentPropTypes.momentObj,
  }).isRequired,
  startDateChange: PropTypes.func.isRequired,
  endDateChange: PropTypes.func.isRequired,
  startDate: momentPropTypes.momentObj.isRequired,
  endDate: momentPropTypes.momentObj.isRequired,
  years: PropTypes.arrayOf(PropTypes.number).isRequired,
};

export default FilterByDate;

import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
import DayOfWeekShape from '../shapes/DayOfWeekShape';
import { DATEPICKER } from './../../ThemeIdentifiers';
import * as baseTheme from './../style/style.scss';

import {
  HORIZONTAL_ORIENTATION,
  VERTICAL_ORIENTATION,
  VERTICAL_SCROLLABLE,
  DAY_SIZE,
} from '../constants';

const propTypes = forbidExtraProps({
  enableOutsideDays: PropTypes.bool,
  firstVisibleMonthIndex: PropTypes.number,
  initialMonth: momentPropTypes.momentObj,
  isAnimating: PropTypes.bool,
  numberOfMonths: PropTypes.number,
  modifiers: PropTypes.object,
  orientation: ScrollableOrientationShape,
  onDayClick: PropTypes.func,
  onDayMouseEnter: PropTypes.func,
  onDayMouseLeave: PropTypes.func,
  onMonthTransitionEnd: PropTypes.func,
  renderMonth: PropTypes.func,
  renderDay: PropTypes.func,
  transformValue: PropTypes.string,
  daySize: nonNegativeInteger,
  focusedDate: momentPropTypes.momentObj, // indicates focusable day
  isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
  firstDayOfWeek: DayOfWeekShape,

import momentPropTypes from 'react-moment-proptypes';
import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
import { withStyles, withStylesPropTypes } from 'react-with-styles';
import moment from 'moment';
import raf from 'raf';

import { CalendarDayPhrases } from '../defaultPhrases';
import getPhrasePropTypes from '../utils/getPhrasePropTypes';
import getCalendarDaySettings from '../utils/getCalendarDaySettings';
import ModifiersShape from '../shapes/ModifiersShape';

import { DAY_SIZE } from '../constants';

const propTypes = forbidExtraProps({
  ...withStylesPropTypes,
  day: momentPropTypes.momentObj,
  daySize: nonNegativeInteger,
  isOutsideDay: PropTypes.bool,
  modifiers: ModifiersShape,
  isFocused: PropTypes.bool,
  tabIndex: PropTypes.oneOf([0, -1]),
  onDayClick: PropTypes.func,
  onDayMouseEnter: PropTypes.func,
  onDayMouseLeave: PropTypes.func,
  renderDayContents: PropTypes.func,
  ariaLabelFormat: PropTypes.string,

  // internationalization
  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
});

const defaultProps = {

import MomentPropTypes from 'react-moment-proptypes';
import moment from 'moment';
// import onClickOutside from 'react-onclickoutside';

import { WeeksView, MonthsView, YearsView } from './views.js';
import { getMomentOrNull, getYearsInterval } from './utils.js';

import config from './config.js';
import defaultClasses from './classes.js';
import defaults from './defaults.js';

class BetterDatePicker extends Component {

    static propTypes = {
        date: PropTypes.oneOfType([
            MomentPropTypes.momentObj,
            MomentPropTypes.momentString,
            PropTypes.instanceOf(Date)
        ]),
        onChange: PropTypes.func.isRequired,
        placeholder: PropTypes.string,
        classes: PropTypes.object,
        view: PropTypes.oneOf(['weeks', 'months', 'years']),
        views: PropTypes.arrayOf(PropTypes.oneOf(['weeks', 'months', 'years'])),
        firstDayOfWeek: PropTypes.number,
        theme: PropTypes.object
    };

    static defaultProps = {
        classes: defaultClasses,
        format: defaults.format,
        views: ['weeks', 'months', 'years'],

import moment from 'moment';
// import onClickOutside from 'react-onclickoutside';

import { WeeksView, MonthsView, YearsView } from './views.js';
import { getMomentOrNull, getYearsInterval } from './utils.js';

import config from './config.js';
import defaultClasses from './classes.js';
import defaults from './defaults.js';

class BetterDatePicker extends Component {

    static propTypes = {
        date: PropTypes.oneOfType([
            MomentPropTypes.momentObj,
            MomentPropTypes.momentString,
            PropTypes.instanceOf(Date)
        ]),
        onChange: PropTypes.func.isRequired,
        placeholder: PropTypes.string,
        classes: PropTypes.object,
        view: PropTypes.oneOf(['weeks', 'months', 'years']),
        views: PropTypes.arrayOf(PropTypes.oneOf(['weeks', 'months', 'years'])),
        firstDayOfWeek: PropTypes.number,
        theme: PropTypes.object
    };

    static defaultProps = {
        classes: defaultClasses,
        format: defaults.format,
        views: ['weeks', 'months', 'years'],
        firstDayOfWeek: 0,

contributingFactors: [],
  cyclist_injured: 0,
  cyclist_killed: 0,
  motorist_injured: 0,
  motorist_killed: 0,
  pedestrian_injured: 0,
  pedestrian_killed: 0,
  persons_injured: 0,
  persons_killed: 0,
  total_crashes: 0,
  identifier: '',
  lngLats: [],
};

StatsLegend.propTypes = {
  startDate: momentPropTypes.momentObj.isRequired,
  endDate: momentPropTypes.momentObj.isRequired,
  contributingFactors: PropTypes.arrayOf(PropTypes.shape({
    count_factor: PropTypes.number,
    factor: PropTypes.string
  })),
  cyclist_injured: PropTypes.number,
  cyclist_killed: PropTypes.number,
  motorist_injured: PropTypes.number,
  motorist_killed: PropTypes.number,
  pedestrian_injured: PropTypes.number,
  pedestrian_killed: PropTypes.number,
  persons_injured: PropTypes.number,
  persons_killed: PropTypes.number,
  total_crashes: PropTypes.number,
  filterType: PropTypes.shape({
    fatality: PropTypes.shape({

onMouseLeave={this.mouseLeave}
        onClick={this.onClick}
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        id={`row_${this.props.row}_cell_${this.props.id}_${this.props.mode}`}
      >
        {dateFormatted}
      
    );
  }
}

Cell.propTypes = {
  id: PropTypes.number.isRequired,
  cellDay: momentPropTypes.momentObj.isRequired,
  date: momentPropTypes.momentObj.isRequired,
  otherDate: momentPropTypes.momentObj,
  maxDate: momentPropTypes.momentObj,
  dateSelectedNoTimeCallback: PropTypes.func.isRequired,
  keyboardCellCallback: PropTypes.func.isRequired,
  focusOnCallback: PropTypes.func.isRequired,
  focusDate: PropTypes.any.isRequired,
  month: PropTypes.number.isRequired,
  cellFocusedCallback: PropTypes.func.isRequired,
  mode: PropTypes.string.isRequired,
  smartMode: PropTypes.bool,
  style: PropTypes.object,
  darkMode: PropTypes.bool,
};
export default Cell;