How to reset the startDate and endDate?

[sam-rusty]

Hi, Thanks for this beautiful calendar.
I'm trying to add a button in the calendar view to reset the dates to default but didn't find anything in the doc to do so. I did it manually by state but it's not updating in the calendar input field. Can you please help me with that?

[pohsiu]

For now, you can just use ref to setState for emptying the value.
I will consider this function in the future update.

[Robiullah2244]

For now, you can just use ref to setState for emptying the value.
I will consider this function in the future update.

Which property or parameter I use for set the value?

[pohsiu]

same with onConfirm callback

[Robiullah2244]

I have rendered a close icon inside DatePicker to empty the value. Can you please explain how can i empty the DatePicker field by pressing close icon.

I am new in react-native. I need your help badly.
Sorry for disturbing you and thanks for your time.

<View style={{flex: 1}}>
    <DatePicker
        style={ {height: 36, borderRadius: 8, borderColor: "#cccccc", borderWidth: 1,} }
        customStyles = { {
            placeholderText:{ fontSize:14 }, // placeHolder style
            headerStyle : { backgroundColor:'#007aff' },			// title container style
            headerMarkTitle : { }, // title mark style 
            headerDateTitle: { }, // title Date style
            contentInput: { fontSize:14 }, //content text container style
            contentText: {fontSize:14}, //after selected text Style
        } } // optional 
        ButtonStyle={{backgroundColor:'#007aff', borderWidth:1, borderRadius:8,marginHorizontal: 20, borderColor:'#fff'}}
        ButtonTextStyle={{color: '#fff',alignSelf:'center',padding:10, fontSize: 16}}
        centerAlign // optional text will align center or not
        allowFontScaling = {false} // optional
        markText={'Select Date'}
        ButtonText='Select'
        placeholder={'Ex: Apr 27, 2018 → Jul 10, 2018'}
        mode={'range'}
        onConfirm={(text) => {this.setState({invoiceDate: text}); console.log('invoiceDate: ', text)}}
        // value={'scdsc'}
        // selectedValue={'dscssdcsdfdjsbd'}
    />
</View>
<Icon style={{padding: 10, marginLeft: -30, marginTop: -2}} size={20} name={'md-close'} color={'red'} onPress={() => this.setState({invoiceDate: ''})}/>

[pohsiu]

use reference ...

<DatePicker
  ref = {(ref)=> this.picker = ref}
  ...
/>

onClickEmptyIcon = () => {
  this.picker.setState({ ... });
}

[Robiullah2244]

use reference ...

<DatePicker
  ref = {(ref)=> this.picker = ref}
  ...
/>

onClickEmptyIcon = () => {
  this.picker.setState({ ... });
}

I can clear from state but not from view part.

[Robiullah2244]

If showContent = false then, do not show selected date in date input field

<DatePicker
    ref = {(ref)=> this.picker = ref}
    ...
/>

onClickEmptyIcon = () => {
    this.picker.setState({
        startDate: null,
        endDate: null,
        clearStart: "",
        clearEnd: "",
        showContent: false
    })
}