React Native Community DateTimePicker value.getTime is undefined

user_11270696 0
Viewed 1467

Hey guys I have few questions regarding the community version of the RN DateTimePicker (https://github.com/react-native-datetimepicker/datetimepicker#value-required)

First of all my Code:

State:

activityDate: todaysDate, (just a JS new Date())
showDatePicker: false

Toggle Function:

  showDatePickerHandler = () => {
    this.setState({
      showDatePicker: !this.state.showDatePicker
    })
  }

DateTimePicker Code:

   <Button onPress={this.showDatePickerHandler} title="Open"/>
    <>
    { this.state.showDatePicker && (
    <DateTimePicker 
      // style={{width: "60%"}}
      value={this.state.activityDate}
      placeholderText="Pick your Date"
      onChange={(event, date) => {
        this.resetSOFT()             
        this.setState({ 
          // activityDate: date,
          activityDate: Moment(date).format("YYYY-MM-DD"),
          checked: false,
         }
        )  
      }}
    />
    )}
    </>

Here is what I am experiencing:

  • When I open the DatePicker and then chose a date and press Ok (or cancel) my App reloads with this error: TypeError: value.getTime is not a function. (In 'value.getTime()', 'value.getTime' is undefined) - value is set to new Date() so thats weird

  • is there a way to set a Format to the whole DateTimePicker Component? something like format = "YYYY-MM-DD" and then it should use this format for the date

I was using: https://github.com/xgfe/react-native-datepicker before which had some good formating functions and an easy way to handle dates - but since its buggy on IOS and has no maintainer I wanted to switch..

Edit: On my first Press it looks good I am getting a Date but when I open it again it crashes the app and reloads it.. how can I safely close the Picker? is it enought to setState of showDatePicker to false in the onChange?

momentjs react-native datetimepicker javascript
2 Answers

You can only set a new Date() type as the value of DateTimePicker component.

You can show the date in required format in another component like below.

  <>
    {this.state.showDatePicker && (
      <DateTimePicker 
        style={{height: 0}}
        value={this.state.activityDate}
        placeholderText="Pick your Date"
        onChange={(event, date) => {
          this.resetSOFT()             
          this.setState({ 
            activityDate: date,
            checked: false,
            showDatePicker: false
          })  
       }}
      />
    )}
    <TouchableOpacity style={{padding:20, width:'80%', alignItems:'center', justifyContent:'center'}} onPress={()=>showDatePickerHandler()}>
      <Text>{Moment(date).format("YYYY-MM-DD")}</Text>
    </TouchableOpacity>
  </>
user_106575590

replace Value.getTime by Date.perse(value) in node_Modules in node_modules/@react-native-community/datetimepicker/src at

1.DatatimePicker.android.js line No:88,

2.DatatimePicker.ios.js line No:69

user_142666270
Related