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