license import React from 'react' ; import { styled } from '../../theme' ; import { BaseDatepickerComponent , BaseDatepickerProps , } from './baseDatepicker.component' ; import { RangeCalendar , RangeCalendarElement , RangeCalendarProps , } from '../calendar/rangeCalendar.component' ; import { RenderProp } from '@ui-kitten/components/devsupport' ; import { TextProps } from '@ui-kitten/components' ; export type RangeDatepickerProps < D = Date > = BaseDatepickerProps < D > & RangeCalendarProps < D > ; export type RangeDatepickerElement < D = Date > = React . ReactElement < RangeDatepickerProps < D > > ; extends React . Component method method method method method method property property property property property property property property property property property property property property property property property property property property property property property property overview-example @ styled ( 'Datepicker' ) export class RangeDatepicker < D = Date > extends BaseDatepickerComponent < RangeDatepickerProps < D > , D > { static styledComponentName : string = 'Datepicker' ; constructor ( props ) { super ( props ) ; this . clear = this . clear . bind ( this ) ; } private get calendarProps ( ) : RangeCalendarProps < D > { return { min : this . props . min , max : this . props . max , range : this . props . range , dateService : this . props . dateService , boundingMonth : this . props . boundingMonth , startView : this . props . startView , filter : this . props . filter , title : this . props . title , onSelect : this . props . onSelect , renderDay : this . props . renderDay , renderMonth : this . props . renderMonth , renderYear : this . props . renderYear , renderFooter : this . props . renderFooter , } ; } public clear = ( ) : void => { this . props . onSelect && this . props . onSelect ( { } ) ; } ; protected getComponentTitle ( ) { const { startDate , endDate } = this . props . range ; if ( startDate || endDate ) { const start = startDate ? this . props . dateService . format ( startDate , null ) : '' ; const end = endDate ? this . props . dateService . format ( endDate , null ) : '' ; return `${ start } - ${ end }` ; } else { return this . props . placeholder ; } } protected renderCalendar ( ) { return ( < RangeCalendar { ... this . calendarProps } / > ) ; } }