Merge pull request #30867 from jakeboone02/react-datepicker-v2

[react-datepicker] v2.0.0

types/react-datepicker/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-datepicker 1.8
+// Type definitions for react-datepicker 2.0
 // Project: https://github.com/Hacker0x01/react-datepicker
 // Definitions by: Rajab Shakirov <https://github.com/radziksh>,
 //                 Andrey Balokha <https://github.com/andrewBalekha>,
@@ -8,11 +8,11 @@
 //                 Koala Human <https://github.com/KoalaHuman>
 //                 Sean Kelley <https://github.com/seansfkelley>
 //                 Justin Grant <https://github.com/justingrant>
+//                 Jake Boone <https://github.com/jakeboone02>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
 import * as React from "react";
-import * as moment from "moment";
 import * as Popper from "popper.js";
 
 export interface ReactDatePickerProps {
@@ -21,59 +21,65 @@ export interface ReactDatePickerProps {
 	autoComplete?: string;
 	autoFocus?: boolean;
 	calendarClassName?: string;
+	calendarContainer?(props: { children: React.ReactNode[] }): React.ReactNode;
 	children?: React.ReactNode;
 	className?: string;
 	customInput?: React.ReactNode;
 	customInputRef?: string;
 	dateFormat?: string | string[];
 	dateFormatCalendar?: string;
-	dayClassName?(date: moment.Moment): string | null;
+	dayClassName?(date: Date): string | null;
 	disabled?: boolean;
 	disabledKeyboardNavigation?: boolean;
 	dropdownMode?: 'scroll' | 'select';
-	endDate?: moment.Moment;
-	excludeDates?: moment.Moment[];
-	excludeTimes?: moment.Moment[];
-	filterDate?(date: moment.Moment): boolean;
+	endDate?: Date;
+	excludeDates?: Date[];
+	excludeTimes?: Date[];
+	filterDate?(date: Date): boolean;
 	fixedHeight?: boolean;
 	forceShowMonthNavigation?: boolean;
-	formatWeekNumber?(date: moment.Moment): string | number;
-	highlightDates?: moment.Moment[];
+	formatWeekNumber?(date: Date): string | number;
+	highlightDates?: Date[];
 	id?: string;
-	includeDates?: moment.Moment[];
-	includeTimes?: moment.Moment[];
+	includeDates?: Date[];
+	includeTimes?: Date[];
+	injectTimes?: Date[];
 	inline?: boolean;
 	isClearable?: boolean;
 	locale?: string;
-	maxDate?: moment.Moment;
-	maxTime?: moment.Moment;
-	minDate?: moment.Moment;
-	minTime?: moment.Moment;
+	maxDate?: Date;
+	maxTime?: Date;
+	minDate?: Date;
+	minTime?: Date;
 	monthsShown?: number;
 	name?: string;
 	onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
-	onChange(date: moment.Moment | null, event: React.SyntheticEvent<any> | undefined): void;
+	onChange(date: Date | null, event: React.SyntheticEvent<any> | undefined): void;
 	onChangeRaw?(event: React.FocusEvent<HTMLInputElement>): void;
 	onClickOutside?(event: React.MouseEvent<HTMLDivElement>): void;
 	onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
 	onKeyDown?(event: React.KeyboardEvent<HTMLDivElement>): void;
-	onMonthChange?(date: moment.Moment): void;
-	onSelect?(date: moment.Moment, event: React.SyntheticEvent<any> | undefined): void;
-	onWeekSelect?(firstDayOfWeek: moment.Moment, weekNumber: string | number, event: React.SyntheticEvent<any> | undefined): void;
-	onYearChange?(date: moment.Moment): void;
-	openToDate?: moment.Moment;
+	onMonthChange?(date: Date): void;
+	onSelect?(date: Date, event: React.SyntheticEvent<any> | undefined): void;
+	onWeekSelect?(firstDayOfWeek: Date, weekNumber: string | number, event: React.SyntheticEvent<any> | undefined): void;
+	onInputClick?(): void;
+	onYearChange?(date: Date): void;
+	onInputError?(err: {code: number; msg: string}): void;
+	open?: boolean;
+	openToDate?: Date;
 	peekNextMonth?: boolean;
 	placeholderText?: string;
 	popperClassName?: string;
 	popperContainer?(props: { children: React.ReactNode[] }): React.ReactNode;
 	popperModifiers?: Popper.Modifiers;
 	popperPlacement?: string;
+	popperProps?: {};
 	preventOpenOnFocus?: boolean;
 	readOnly?: boolean;
 	required?: boolean;
 	scrollableMonthYearDropdown?: boolean;
 	scrollableYearDropdown?: boolean;
-	selected?: moment.Moment | null;
+	selected?: Date | null;
 	selectsEnd?: boolean;
 	selectsStart?: boolean;
 	shouldCloseOnSelect?: boolean;
@@ -84,21 +90,34 @@ export interface ReactDatePickerProps {
 	showTimeSelectOnly?: boolean;
 	showWeekNumbers?: boolean;
 	showYearDropdown?: boolean;
-	startDate?: moment.Moment;
+	startDate?: Date;
 	startOpen?: boolean;
 	tabIndex?: number;
 	timeCaption?: string;
 	timeFormat?: string;
 	timeIntervals?: number;
 	title?: string;
-	todayButton?: string;
+	todayButton?: React.ReactNode;
 	useShortMonthInDropdown?: boolean;
 	useWeekdaysShort?: boolean;
-	utcOffset?: number;
 	value?: string;
 	weekLabel?: string;
 	withPortal?: boolean;
 	yearDropdownItemNumber?: number;
+	formatWeekDay?(date: Date): string;
+	clearButtonTitle?: string;
+	previousMonthButtonLabel?: string;
+	nextMonthButtonLabel?: string;
+	renderCustomHeader?(params: {
+		date: Date;
+		changeYear(year: number): void;
+		changeMonth(month: number): void;
+		decreaseMonth(): void;
+		increaseMonth(): void;
+		prevMonthButtonDisabled: boolean;
+		nextMonthButtonDisabled: boolean;
+	}): React.ReactNode;
+	renderDayContents?(dayOfMonth: number): React.ReactNode;
 }
 declare const ReactDatePicker: React.ClassicComponentClass<ReactDatePickerProps>;
 export default ReactDatePicker;

types/react-datepicker/package.json

@@ -1,7 +1,6 @@
 {
     "private": true,
     "dependencies": {
-        "moment": ">=2.14.0",
         "popper.js": "^1.14.1"
     }
 }

types/react-datepicker/react-datepicker-tests.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
-import * as moment from 'moment';
 import DatePicker from 'react-datepicker';
 
 <DatePicker
-	selected={moment()}
-	onChange={(date: moment.Moment | null) => {}}
-	onYearChange={(date: moment.Moment) => {}}
+	selected={new Date()}
+	onChange={(date: Date | null) => {}}
+	onYearChange={(date: Date) => {}}
 	popperModifiers={{
 		flip: {
 			enabled: false
 		}
 	}}
-	includeTimes={[moment()]}
+	includeTimes={[new Date()]}
 >
 	<div/>
 	<span/>