@capaj/react-datetime
Version:
A lightweight but complete datetime picker React.js component
113 lines (112 loc) • 3.93 kB
TypeScript
import { Moment } from 'moment';
import React, { FocusEventHandler, ChangeEvent } from 'react';
export declare type ViewMode = 'years' | 'months' | 'days' | 'time';
export interface TimeConstraint {
min: number;
max: number;
step: number;
}
export interface TimeConstraints {
hours?: TimeConstraint;
minutes?: TimeConstraint;
seconds?: TimeConstraint;
milliseconds?: TimeConstraint;
}
declare type EventOrValueHandler<Event> = (event: Event | Moment | string) => void;
export interface IDatetimepickerProps {
value?: Date | string | Moment;
defaultValue?: Date | string | Moment;
viewDate?: Date | string | Moment;
dateFormat?: boolean | string;
timeFormat?: boolean | string;
input?: boolean;
open?: boolean;
locale?: string;
timezone?: string;
onChange?: EventOrValueHandler<ChangeEvent<any>>;
onFocus?: FocusEventHandler;
onBlur?: EventOrValueHandler<FocusEvent>;
onViewModeChange?: (viewMode: string) => void;
onNavigateBack?: (amount: number, type: string) => void;
onNavigateForward?: (amount: number, type: string) => void;
viewMode?: ViewMode | number;
className?: string;
inputProps?: React.HTMLProps<HTMLInputElement>;
isValidDate?: (currentDate: any, selectedDate: any) => boolean;
renderInput?: (props: any, openCalendar: () => any, closeCalendar: () => any) => JSX.Element;
renderDay?: (props: any, currentDate: any, selectedDate: any) => JSX.Element;
renderMonth?: (props: any, month: number, year: number, selectedDate: any) => JSX.Element;
renderYear?: (props: any, year: number, selectedDate: any) => JSX.Element;
strictParsing?: boolean;
closeOnSelect?: boolean;
timeConstraints?: TimeConstraints;
disableOnClickOutside?: boolean;
}
export interface IDatetimepickerState {
updateOn: string;
inputFormat: string;
viewDate: Moment;
selectedDate: Moment;
inputValue: string;
open: boolean;
currentView: ViewMode;
}
declare class Datetime extends React.Component<IDatetimepickerProps, IDatetimepickerState> {
static displayName: 'DateTime';
constructor(props: IDatetimepickerProps, context: any);
parseDate(date: any, { datetime }: {
datetime: any;
}): any;
getStateFromProps(props: IDatetimepickerProps): IDatetimepickerState;
getUpdateOn({ date }: {
date: any;
}): string;
getFormats(props: any): {
date: any;
time: any;
};
componentWillReceiveProps(nextProps: IDatetimepickerProps): void;
onInputChange: (e: any) => void;
onInputKey: ({ which }: {
which: any;
}) => void;
showView: (view: any) => () => void;
setDate: (type: any) => ({ target }: {
target: any;
}) => void;
subtractTime: (amount: any, type: any, toSelected: any) => () => void;
addTime: (amount: any, type: any, toSelected: any) => () => void;
updateTime(op: any, amount: any, type: any, toSelected: any): void;
allowedSetTime: string[];
setTime: (type: any, value: any) => void;
updateSelectedDate: (e: any, close: any) => void;
openCalendar: (e: any) => void;
closeCalendar: () => void;
handleClickOutside: () => void;
localMoment(date?: any, format?: any, props?: any): any;
getComponentProps(): {
dateFormat: any;
timeFormat: any;
};
render(): JSX.Element;
static defaultProps: {
className: string;
defaultValue: string;
inputProps: {};
input: boolean;
onFocus(): void;
onBlur(): void;
onChange(): void;
onViewModeChange(): void;
onNavigateBack(): void;
onNavigateForward(): void;
timeFormat: boolean;
timeConstraints: {};
dateFormat: boolean;
strictParsing: boolean;
closeOnSelect: boolean;
closeOnTab: boolean;
timezone: null;
};
}
export default Datetime;