how to change date format in react

Question

I am new to React and i have been working on this project which requires me to use datepicker.

I am using DateTimePickerModal module in my react native project and the output of the date i am getting is like this == Fri May 21 2021 13:45:52 GMT+0530 (IST) ==

that ouput datatype is an object.

my required output should be like this == 21/05/2021 1:45 pm ==

can any one please guide me here ?

import React, { useState, useEffect } from 'react'
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Rem = function (props) {
    //const [dateswitch ,setDateSwitch]=useState(true)
    const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
    //button state
    const [b1, setBl] = useState(false);
    const [b2, setB2] = useState(false);
    //date state
    const [b1date, setb1Date] = useState('');
    const [b2date, setb2Date] = useState('');

    //============== showDatePicker ==================

    //get item from storage
    const gettime = async () => {
        try {
            const value1 = await AsyncStorage.getItem('b1');
            if (value1 !== null) {
                // value previously stored
                setb1Date(value1);
            }
            const value2 = await AsyncStorage.getItem('b2');
            if (value2 !== null) {
                // value previously stored
                setb2Date(value2);
            }
        } catch (e) {
            // error reading value
        }
    };
    gettime();
    const b1showDatePicker = () => {
        setBl(true);
        setDatePickerVisibility(true);
    };
    const b2showDatePicker = () => {
        setB2(true);
        setDatePickerVisibility(true);
    };

    const hideDatePicker = () => {
        setDatePickerVisibility(false);
    };

    const handleConfirm = async (date) => {
        const d = date.toString()
        if (b1 === true) {
            try {
                //console.warn('A date has been picked: ', d);
                await AsyncStorage.setItem('b1', d);
                setb1Date(d);
                setBl(false);
                hideDatePicker();
            } catch (err) {
                console.log(err);
            }
        } else {
            try {
                //console.warn('A date has been picked: ', d);
                await AsyncStorage.setItem('b2', d);
                setb2Date(d);
                setB2(false);
                hideDatePicker();
            } catch (err) {
                console.log(err);
            }
        }
    };



    return (
        <View >
            <View style={styles.button_container}>
                <TouchableOpacity onPress={b1showDatePicker}>
                    <Text style={styles.button}>reminder 1 </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={b2showDatePicker}>
                    <Text style={styles.button}>reminder 2</Text>
                </TouchableOpacity>
            </View>
            <Text style={styles.text}>{b1date}</Text>
            <Text style={styles.text}>{b2date}</Text>
            <DateTimePickerModal
                is24Hour={true}
                isVisible={isDatePickerVisible}
                mode="datetime"
                onConfirm={handleConfirm}
                onCancel={hideDatePicker}
            />
        </View>
    );

}

export default Rem;

Answer 1

Just create a function to format Date like this

const FormatDate = (data) => {
    let dateTimeString =
      data.getDate() +
      '/' +
      (data.getMonth() + 1) +
      '/' +
      data.getFullYear() +
      ' ';

    let hours = data.getHours();
    let minutes = data.getMinutes();
    let ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    dateTimeString = dateTimeString + hours + ':' + minutes + ' ' + ampm;

    return dateTimeString; // 4/5/2021 4:34 pm
  };

Then while storing date, do like this

await AsyncStorage.setItem('b1', FormatDate(d));

or in else condition

await AsyncStorage.setItem('b2', FormatDate(d));

Here is a Snack to see working example..It will run on iOS and Android only as

DateTimePicker is not supported on: web