时间戳

首页 > 解决方案 > 如何在反应中更改日期格式

css - 如何在反应中更改日期格式

问题描述

我是 React 的新手，我一直在做这个需要我使用 datepicker 的项目。

我在我的 react native 项目中使用 DateTimePickerModal 模块，我得到的日期的输出是这样的 == Fri May 21 2021 13:45:52 GMT+0530 (IST) ==

该输出数据类型是一个对象。

我需要的输出应该是这样的 == 21/05/2021 1:45 pm ==

有人可以在这里指导我吗？

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;

标签： cssreactjsreact-nativereact-reduxreact-hooks

解决方案

只需创建一个函数来像这样格式化日期

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
  };

然后在存储日期时，这样做

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

或在其他情况下

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

这是一个可以查看工作示例的小吃。它只能在 iOS 和 Android 上运行

DateTimePicker is not supported on: web

推荐阅读