farhoudshapouran / react-native-ui-datepicker

Customizable React Native 📅 DatePicker component for Android, iOS, and Web. It includes single, range and multiple modes and supports different locales.
https://farhoudshapouran.github.io/react-native-ui-datepicker/
MIT License
271 stars 28 forks source link

set "timePicker={true}", then timePicker connot slide #96

Open Jhh910 opened 2 weeks ago

Jhh910 commented 2 weeks ago
<TouchableOpacity onPress={() => setVisible(true)}>
  <Text style={{marginLeft: 14, marginTop: 10, marginBottom: -8}}>{des}</Text>
  <Text style={styles.timePicker}>{date ? date + ':00' : '点击选择时间'}</Text>
  <Modal
    animationType="slide"
    transparent={true}
    visible={visible}
    onRequestClose={() => setVisible(false)}>
    <TouchableWithoutFeedback
    // onPress={() => setVisible(false)}
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
        }}>
        {/* <ThemeSelector themes={Themes} setTheme={setTheme} /> */}
        <View style={styles.datePickerContainer}>
          <View style={styles.datePicker}>
            <DateTimePicker
              mode={mode}
              date={date}
              locale={locale}
              //minDate={dayjs().startOf('day')}
              //maxDate={dayjs().add(3, 'day').endOf('day')}
              //firstDayOfWeek={1}
              displayFullDays
              timePicker={true}
              onChange={onChange}
              headerButtonColor={theme?.mainColor}
              selectedItemColor={theme?.mainColor}
              // eslint-disable-next-line react-native/no-inline-styles
              selectedTextStyle={{
                fontWeight: 'bold',
                color: theme?.activeTextColor,
              }}
              // eslint-disable-next-line react-native/no-inline-styles
              todayContainerStyle={{
                borderWidth: 1,
              }}
            />
            <View style={styles.footer}>
              <View style={styles.footerContainer}>
                <Text>
                  {date ? dayjs(date).locale(locale).format('YYYY-MM-DD HH:mm:ss') : '...'}
                  {/* {date ? dayjs(date).locale(locale).format('MMMM, DD, YYYY - HH:mm') : '...'} */}
                </Text>
                {/* <Pressable
                  onPress={() => setDate(dayjs())}
                  accessibilityRole="button"
                  accessibilityLabel="Today">
                  <View style={[styles.todayButton, {backgroundColor: theme?.mainColor}]}>
                    <Text style={[styles.todayButtonText, {color: theme?.activeTextColor}]}>
                      今天
                    </Text>
                  </View>
                </Pressable> */}
                <Pressable
                  onPress={() => setVisible(false)}
                  accessibilityRole="button"
                  accessibilityLabel="Today">
                  <View style={[styles.todayButton, {backgroundColor: theme?.mainColor}]}>
                    <Text style={[styles.todayButtonText, {color: theme?.activeTextColor}]}>
                      确定
                    </Text>
                  </View>
                </Pressable>
              </View>
            </View>
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  </Modal>
</TouchableOpacity>

When I want to choose the time, Sometimes the  timepicker  doesn't slide
Jhh910 commented 2 weeks ago

https://github.com/farhoudshapouran/react-native-ui-datepicker/assets/165371830/97482a5b-79d7-4558-aaf8-270a665e7a5d