React Native компонент выбора даты и времени

внешний интерфейс GitHub React.js React Native
React Native компонент выбора даты и времени

Эта статья изначально была опубликована в публичном аккаунте: круг разработки ReactNative, и для перепечатки необходимо указать источник.

Прежде всего, поздравляю всех с Днем труда, самого славного труда!

Компонент выбора даты и времени React Native: react-native-datepicker, поддерживает две платформы Android и IOS, поддерживает отдельный выбор даты, отдельный выбор времени и выбор даты и времени, а также поддерживает настраиваемые форматы даты.

визуализация

способ установки

npm install react-native-datepicker --save

образец кода

<Text style={styles.instructions}>time: {this.state.time}</Text>
        <DatePicker
          style={{width: 200}}
          date={this.state.datetime}
          mode="datetime"
          format="YYYY-MM-DD HH:mm"
          confirmBtnText="确定"
          cancelBtnText="取消"
          showIcon={false}
          onDateChange={(datetime) => {this.setState({datetime: datetime});}}
        />
        <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>
        <DatePicker
          style={{width: 200}}
          date={this.state.datetime1}
          mode="datetime"
          format="YYYY-MM-DD HH:mm"
          confirmBtnText="确定"
          cancelBtnText="取消"
          customStyles={{
            dateIcon: {
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0
            },
            dateInput: {
              marginLeft: 36
            }
          }}
          minuteInterval={10}
          onDateChange={(datetime) => {this.setState({datetime1: datetime});}}
        />
        <Text style={styles.instructions}>datetime: {this.state.datetime1}</Text>

Описание основного параметра

дата: установить начальную дату отображения режим: режим отображения, дата, дата и время, время формат: установите формат даты, по умолчанию «ГГГГ-ММ-ДД» confirmBtnText: отображаемое имя кнопки OK. cancelBtnText: отображаемое имя кнопки отмены. minDate: минимальная дата для отображения maxDate: отображаемая максимальная дата продолжительность: временной интервал onDateChange: событие срабатывает при изменении даты заполнитель: заполнитель

Полный пример

Полный код:GitHub — forrest23/ReactNativeComponents: полная коллекция компонентов React Native, представляющая использование и примеры использования часто используемых компонентов в React Native.Этот пример кода находится в папке Component11.Пожалуйста, не скупитесь на свою звезду!

адрес компонента

GitHub - xgfe/react-native-datepicker: react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

WeChat не позволяет переходить на внешние ссылки. Вы можете нажать, чтобы просмотреть исходный текст, чтобы просмотреть содержимое внешних ссылок на GitHub.

Добро пожаловать в мой публичный аккаунт WeChat:Круг разработки ReactNative

Категории