如何修改RNDateTimePicker默认日期格式从MM/dd/yy为dd/MM/yyyy

解决方案 #

RNDateTimePicker 本质是对iOS/Android原生日期选择器的封装，没有提供自定义内部展示格式的配置项，默认onChangeText返回的字符串格式跟随设备系统的地区规则，你可以通过以下方式实现dd/MM/yyyy的格式要求：

方案1：配合日期处理库格式化（推荐）

替换原有onChangeText回调，改用onChange获取原始日期对象，再用dayjs/date-fns等工具自定义格式化：

import RNDateTimePicker from '@react-native-community/datetimepicker';
import dayjs from 'dayjs';

// 组件逻辑
const [showPicker, setShowPicker] = useState(false);
const [upTargetStartDate, setUpTargetStartDate] = useState(new Date());
// 格式化后给用户展示的日期
const formattedDate = dayjs(upTargetStartDate).format('DD/MM/YYYY');

const onDateChange = (event, selectedDate) => {
  setShowPicker(false);
  if (selectedDate) {
    setUpTargetStartDate(selectedDate);
  }
};

// 渲染层，自定义展示触发按钮，不用组件自带的文本显示
return (
  <>
    {/* 点击唤起选择器，展示你要的格式 */}
    <TouchableOpacity onPress={() => setShowPicker(true)}>
      <Text>{formattedDate}</Text>
    </TouchableOpacity>
    {showPicker && (
      <RNDateTimePicker
        mode="date"
        value={upTargetStartDate}
        minimumDate={new Date()}
        onChange={onDateChange}
      />
    )}
  </>
);

方案2：原生JS手动格式化（无需引入第三方库）

你也可以自己写格式化方法处理日期对象：

const formatToDDMMYYYY = (date) => {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
};

// 调用示例
const formattedDate = formatToDDMMYYYY(upTargetStartDate);

如果是需要修改选择器弹窗内部的日期显示格式，受限于系统原生组件的限制，RN封装的这个组件无法直接修改，只能通过自定义弹窗组件完全自己实现日期选择逻辑才能满足需求。

内容的提问来源于stack exchange，提问作者zack azha