RNDateTimePicker change date format from MM/dd/yy to anything else

user_5110112 0
Viewed 143

how can I change the display format of RNDateTimePicker?

Once click the date, the date picker will pop up, after select, the display date format is "MM/dd/yy". I want to change it to "dd/MM/yyyy" since it is the date format I use on the other screen. I cannot find the solution for now, even on the documentation.

Here the display date

<RNDateTimePicker
    mode="date"
    value={upTargetStartDate}
    minimumDate={new Date()}
    onChangeText={(text) => setUpTargetStartDate(text)}
/>
react-native javascript
1 Answers

According to the documentation, you need to add dateFormat property into your RNDateTimePicker component and pass your desire date's format which in your case is: day month year.

<RNDateTimePicker
  mode="date"
  dataFormat="day month year"    // --------> added here
  value={upTargetStartDate}  
  minimumDate={new Date()}
  onChangeText={(text) =>
  setUpTargetStartDate(text)
  }
/>

You can also change the format with simple javascript's methods:

const wrongFormat = "12/20/21"

const [month, day, year] = wrongFormat.split("/")

const correctFormat = `${day}/${month}/${year}`

console.log(correctFormat)

user_57379500
Related