import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , DISPLAYNAME_PREFIX , Props } from "@blueprintjs/core" ; import * as Classes from "./common/classes" ; import * as DateUtils from "./common/dateUtils" ; import { DatePicker , DatePickerProps } from "./datePicker" ; import { TimePickerProps , TimePicker } from "./timePicker" ; export interface IDateTimePickerProps extends Props { default defaultValue ? : Date ; /**
     * Any props to be passed on to the `DatePicker` other than the `value` and `onChange` props as they come directly
     * from the `DateTimePicker` props.
     */ datePickerProps ? : DatePickerProps ; /**
     * Callback invoked when the user changes the date or time.
     */ onChange ? : ( selectedDate : Date , isUserChange : boolean ) => void ; /**
     * Any props to be passed on to the `TimePicker` other than the `value` and `onChange` props as they come directly
     * from the `DateTimePicker` props.
     */ timePickerProps ? : TimePickerProps ; /**
     * The currently set date and time. If this prop is provided, the component acts in a controlled manner.
     */ value ? : Date | null ; default canClearSelection ? : boolean ; } export interface IDateTimePickerState { dateValue ? : Date ; timeValue ? : Date ; } deprecated @ polyfill export class DateTimePicker extends AbstractPureComponent2 < IDateTimePickerProps , IDateTimePickerState > { public static defaultProps : IDateTimePickerProps = { canClearSelection : true , defaultValue : new Date ( ) , } ; public static displayName = `${ DISPLAYNAME_PREFIX }.DateTimePicker` ; public constructor ( props ? , context ? ) { super ( props , context ) ; const initialValue = this . props . value !== undefined ? this . props . value : this . props . defaultValue ; this . state = { dateValue : initialValue , timeValue : initialValue , } ; } public render ( ) { const value = DateUtils . getDateTime ( this . state . dateValue , this . state . timeValue ) ; return ( < div className = { classNames ( Classes . DATETIMEPICKER , this . props . className ) } > < DatePicker { ... this . props . datePickerProps } canClearSelection = { this . props . canClearSelection } onChange = { this . handleDateChange } value = { value } / > < TimePicker { ... this . props . timePickerProps } onChange = { this . handleTimeChange } value = { this . state . timeValue } / > < /div>); } public componentDidUpdate ( prevProps ) { if ( this . props . value === prevProps . value ) { return ; } else if ( this . props . value != null ) { this . setState ( { dateValue : this . props . value , timeValue : this . props . value , } ) ; } else { this . setState ( { dateValue : null } ) ; } } public handleDateChange = ( dateValue , isUserChange ) => { if ( this . props . value === undefined ) { this . setState ( { dateValue } ) ; } const value = DateUtils . getDateTime ( dateValue , this . state . timeValue ) ; this . props . onChange ?. ( value , isUserChange ) ; } ; public handleTimeChange = ( timeValue ) => { if ( this . props . value === undefined ) { this . setState ( { timeValue } ) ; } const value = DateUtils . getDateTime ( this . state . dateValue , timeValue ) ; this . props . onChange ?. ( value , true ) ; } ; }