@uiw/react-native/lib/DatePicker/date-picker/useDatePicker.js

UIW for React Native

import { useEffect } from 'react';
import { BackHandler } from 'react-native';
import { useSafeState } from 'ahooks';
import { useLatest } from '../../utils/hooks';
import dayjs from 'dayjs';
export default function useDatePicker({
  onClosed,
  onChange,
  value,
  displayType,
  visible,
  format
}) {
  const [date, setDate] = useSafeState(value ?? new Date());
  const onChangeRef = useLatest(onChange);
  const onCloseRef = useLatest(onClosed);
  useEffect(() => {
    setDate(value ?? new Date());
  }, [value]);

  /** 绑定物理返回键监听事件，如果当前picker是打开的，返回键作用是关闭picker，否则返回上一个界面 */
  useEffect(() => {
    const sub = BackHandler.addEventListener('hardwareBackPress', () => visible);
    return () => sub.remove();
  }, [visible]);
  const handleChange = date => {
    setDate(date);
    if (displayType === 'view') {
      onChangeRef.current?.(date);
    }
  };
  const handleClose = () => {
    setDate(value);
    onCloseRef.current?.();
  };
  const handleOk = () => {
    onChangeRef.current?.(date, dayjs(date).format(format));
    onCloseRef.current?.();
  };
  return {
    date,
    handleChange: handleChange,
    handleOk: handleOk,
    handleClose: handleClose
  };
}