@uiw/react-native/lib/DatePicker/date-period-input/index.js

UIW for React Native

import React from 'react';
import { TouchableOpacity, Animated, View } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Flex from '../../Flex';
import Icon from '../../Icon';
import Text from '../../Typography/Text';
import dayjs from 'dayjs';
import DatePicker from '../date-picker';
import useDatePeriodInput from './useDatePeriodInput';
const AnimatedTouchableIcon = Animated.createAnimatedComponent(TouchableOpacity);

/** 适用于筛选条件下的日期区间选择 */
const DatePeriodInput = ({
  placeholder = ['请选择', '请选择'],
  format = 'YYYY-MM-DD',
  value,
  onChange,
  allowClear = true,
  disabled = false,
  ...restProps
}) => {
  const theme = useTheme();
  const {
    currentIndex,
    dates,
    visible,
    minDate,
    maxDate,
    clearIconStyle1,
    clearIconStyle2,
    setFalse,
    handleStartPress,
    handleEndPress,
    handleChange,
    handleInputClear1,
    handleInputClear2
  } = useDatePeriodInput({
    value,
    onChange,
    format
  });
  const p1 = {
    fontSize: 14,
    lineHeight: 19,
    fontFamily: 'PingFang SC'
  };
  return <View>
      <Flex style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: theme.colors.mask || '#ccc'
    }}>
        <TouchableOpacity onPress={() => {
        if (!disabled) {
          handleStartPress();
        }
      }} activeOpacity={disabled ? 1 : 0.5} style={{
        flex: 1,
        height: 40,
        paddingHorizontal: theme.spacing.x1 || 4,
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row'
      }}>
          <Flex style={{
          alignItems: 'center'
        }}>
            <Icon name="date" size={16} color={theme.colors.primary_text || '#ccc'} />
            <Text color={disabled ? 'disabled' : 'text'} style={[p1, {
            marginLeft: 8
          }]} //...theme.textVariants.p1
          >
              {dates[0] ? dayjs(dates[0]).format(format) : placeholder[0]}
            </Text>
          </Flex>
          {!disabled && allowClear && <AnimatedTouchableIcon activeOpacity={0.5} onPress={handleInputClear1} style={[{
          width: 0,
          overflow: 'hidden',
          alignItems: 'flex-end'
        }, clearIconStyle1]}>
              <Icon size={16} name="circle-close-o" color={theme.colors.primary_text || '#ccc'} />
            </AnimatedTouchableIcon>}
        </TouchableOpacity>
        <View style={{
        marginHorizontal: 8
      }}>
          <Text color="text" style={p1}>
            ~
          </Text>
        </View>
        <TouchableOpacity onPress={() => {
        if (!disabled) {
          handleEndPress();
        }
      }} activeOpacity={disabled ? 1 : 0.5} style={{
        flex: 1,
        height: 40,
        paddingHorizontal: theme.spacing.x1 || 4,
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row'
      }}>
          <Flex style={{
          alignItems: 'center'
        }}>
            <Icon size={16} name="date" color={theme.colors.primary_text || '#ccc'} />
            <Text color={disabled ? 'disabled' : 'text'} style={[p1, {
            marginLeft: 8
          }]}>
              {dates[1] ? dayjs(dates[1]).format(format) : placeholder[1]}
            </Text>
          </Flex>
          {!disabled && allowClear && <AnimatedTouchableIcon activeOpacity={0.5} onPress={handleInputClear2} style={[{
          width: 0,
          overflow: 'hidden',
          alignItems: 'flex-end'
        }, clearIconStyle2]}>
              <Icon size={16} name="circle-close-o" color={theme.colors.primary_text || '#ccc'} />
            </AnimatedTouchableIcon>}
        </TouchableOpacity>
      </Flex>
      <DatePicker {...restProps} {...{
      visible,
      format,
      onChange: handleChange,
      onClosed: setFalse,
      minDate,
      maxDate,
      value: dates[currentIndex]
    }} />
    </View>;
};
export default DatePeriodInput;