unable to change the date and time

[saddam hussain]

Bug report

When scrolling in the Date Picker Date values are not changing

Reproducible sample code

<DateTimePicker
            testID="dateTimePicker"
            value={new Date()}
            mode="date"
            is24Hour={true}
            display="spinner"
            onChange={onChangeDate}

        />

  const onChangeDate = (event: any, selectedDate: any) => {
        const currentDate = selectedDate;
        setShowDateModal(false);
        const formattedDate = moment(currentDate).format('YYYY-MM-DD');
        if (onChange) {
            onChange(formattedDate)
            setIsInputFocused(true);
        }
    };

Describe what you expected to happen:

The user has to change the Date and time according to his wish, but it is not happening, when we try to change the Date and Time it is getting that day's day and time.

Environment info

"react": "18.2.0",
"react-native": "0.72.6",
"@react-native-community/datetimepicker": "^7.6.2",

npx react-native info output:

npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.19045
  CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Memory: 827.81 MB / 7.88 GB
Binaries:
  Node:
    version: 18.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 8.18.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.22621.0
IDEs:
  Android Studio: Version     2021.1.0.0 AI-211.7628.21.2111.8309675
  Visual Studio:
    - 17.7.34221.43 (Visual Studio Community 2022)
Languages:
  Java: 20.0.1
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Time zone name (If the problem you have is related to unexpected time / date. See list in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).

datetimepicker version: 7.6.2
Android version: 13

[Numan-Munir]

@saddamhussaints392 , could you please assist me in achieving the date format DD/MM/YYYY? I've been searching for a solution but haven't found one yet.

[saddam hussain]

@saddamhussaints392 , could you please assist me in achieving the date format DD/MM/YYYY? I've been searching for a solution but haven't found one yet.

@Numan-Munir You can use moment js package for Date and Time formats.

[Numan-Munir]

@saddamhussaints392 I'm talking about the DateTimePicker modal's date format.

[Matias Moreno]

@saddamhussaints392 try this instead:

const [ value, setValue ] = useState<Date> (new Date ( ));
// ...
<DateTimePicker value={value} ... />
// ...
const onChangeDate = ... => {
    setValue (selectedDate);
    // ...
};

Hope this helps.

[James Hamann]

@saddamhussaints392 I recreated your issue by assigning the value as you did:

value={new Date()}

You need to tie value to state. This is because when you trigger onChange the component re-renders and it always assigns the value to be a new date object, which of course is today's date!

@matonga's comment should be enough to fix the problem

[Nasser]

Hi 👋🏼

That is it 👇🏼 👍🏼

@saddamhussaints392 try this instead:

const [ value, setValue ] = useState<Date> (new Date ( ));
// ...
<DateTimePicker value={value} ... />
// ...
const onChangeDate = ... => {
    setValue (selectedDate);
    // ...
};

Hope this helps.

Thank you @matonga & @hamannjames for explaining 🙌🏼