DateTimePickerModal 如何以 12 小时时钟格式获取时间？答案

【问题标题】：DateTimePickerModal how to get time in 12 hour clock format?DateTimePickerModal 如何以 12 小时时钟格式获取时间？
【发布时间】：2022-08-16 11:58:36
【问题描述】：

我在这里有一个 DateTimePickerModal，我想以 12 小时制格式而不是 24 小时制格式获取时间。目前，我下面的代码仅在 TextInput 中以 24 小时时钟格式显示时间。我应该怎么做才能获得 12 小时制格式的时间？

import React, { useState } from \'react\';
import { View, Button, TextInput, StyleSheet, Text } from \'react-native\';
import DateTimePickerModal from \'react-native-modal-datetime-picker\';

export default function ShareExample() {
  const [time, setTime] = useState(\'\');
  const [isTimePickerVisible, setTimePickerVisibility] = useState(false);

  const showTimePicker = () => {
    setTimePickerVisibility(true);
  };

  const hideTimePicker = () => {
    setTimePickerVisibility(false);
  };

  const handleConfirm = (time) => {
    setTime(time);
    hideTimePicker();
  };

  const getTime = () => {
    let tempTime = time.toString().split(\' \');
    return time !== \'\'
      ? `${tempTime[4]}`
      : \'\';
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.textInput}
        value={getTime()}
        placeholder=\"Time...\"
      />
      <Button onPress={showTimePicker} title=\"Set Time\" />
      <DateTimePickerModal
        isVisible={isTimePickerVisible}
        mode=\"time\"
        onConfirm={handleConfirm}
        onCancel={hideTimePicker}
      />
      <Text>{time.toString()}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
  textInput: {
    borderWidth: 1,
    borderColor: \'black\',
    marginBottom: 5,
    padding: 10,
  },
});

标签： reactjs react-native

【解决方案1】：

您可以使用此道具禁用它 is24Hour 在 android 上可用。

<DateTimePickerModal
  isVisible={isTimePickerVisible}
  mode="time"
  onConfirm={handleConfirm}
  onCancel={hideTimePicker}
  is24Hour={false}
/>

【讨论】：

【解决方案2】：

在安卓，我们可以通过传递 is24Hour 属性来禁用。

<DataTimePickerModal
is24hour={false}
/>

在IOS，我们可以用语言环境通过分配“en_GB”的道具

<DatePicker
  mode="time"
  locale="en_GB" // Use "en_GB" here
  date={new Date()}
/>

【讨论】：