Автоматическая обратная косая черта для ввода текста даты React Native?

Кто-нибудь знает, как создать текстовый ввод, который, когда вы начинаете вводить его, автоматически разрешает определенное количество цифр с автоматическим разделением обратной косой черты для чисел.

ДД / ММ / ГГГГ (Я не собираюсь использовать средство выбора даты или библиотеку).

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
7
0
11 485
3

Ответы 3

Попробуйте этот компонент реакции:

https://github.com/benhurott/react-native-masked-text

УСТАНОВИТЬ

npm install react-native-masked-text --save

ИСПОЛЬЗОВАНИЕ

render() {
//the type is required but options is required only for some specific types.
  return (
    <TextInputMask
      refInput = {(ref) => this.myDateText = ref;}
      type = {'datetime'}
      options = {{
        format: 'DD-MM-YYYY HH:mm:ss'
      }}
    />
  )
}

есть один тип маски, который вам подходит:

datetime: использовать маску datetime с форматом момента (по умолчанию ДД / ММ / ГГГГ ЧЧ: мм: сс). Он принимает параметры (см. Далее в этом документе).

Спасибо за Ваш ответ! Я видел эту библиотеку, но хотел узнать, знает ли кто-нибудь, как ее кодировать без использования библиотеки.

Tamsyn Jennifer 02.11.2018 13:37

Вы можете использовать что-то вроде этого:

<TextInput
  onChangeText = {(text) => this.handleTextChange({text})}
  value = {this.state.text}
/>

В handleTextChange() сделайте все, что вам нужно, с вставленным текстом, а затем установите его в состояние

Возможно ли затем отредактировать дату - я могу изменить ее на статическую строку, но я не уверен, как добавить обратную косую черту с пустыми пробелами «_ _ / _ _ / _ _ _ _» и сделать ее доступной для редактирования? Так что пользователь начинает набирать номер, и он автоматически заменяет _ или даже просто пустое место на число.

Tamsyn Jennifer 03.11.2018 17:20
checkValue(str, max) {
    if (str.charAt(0) !== '0' || str == '00') {
      var num = parseInt(str);
      if (isNaN(num) || num <= 0 || num > max) num = 1;
      str = num > parseInt(max.toString().charAt(0))
      && num.toString().length == 1 ? '0' + num : num.toString();
    };
    return str;
  };
    this.type = 'text';
    var input = e.target.value;
    var expr = new RegExp(/\D/$/);
    if (expr.test(input)) input = input.substr(0, input.length - 3);
    var values = input.split('/').map(function(v) {
      return v.replace(/\D/g, '')
    });
    if (values[0]) values[0] = this.checkValue(values[0], 12);
    if (values[1]) values[1] = this.checkValue(values[1], 31);
    var output = values.map(function(v, i) {
      return v.length == 2 && i < 2 ? v + '/' : v;
    });
    this.setState({
      registrationDate:output.join('').substr(0, 14)
    })
  }
<input type = "text" className = "input-attr" maxLength = "25" onChange = {(e) => this.dateTimeInputChangeHandler(e)}
                           placeholder = {translationData.datePlaceholderText}
                           value = {this.state.registrationDate}/>

Вы можете реализовать это, используя что-то вроде этого. onchange поможет обработать ввод.

Это работает нормально, но при нажатии кнопки возврата "/" не удаляется. любые предложения по достижению этого.?

vicky keshri 01.12.2020 07:22

Вам необходимо внести изменения в метод dateTimeInputChangeHandler

Vivek Kumar 01.12.2020 09:41

да, я пытаюсь это сделать, но не смог этого добиться. Back Press работает нормально, но из-за этой функции я не могу применить изменения. var output = values.map (function (v, i) {return v.length == 2 && i <2? v + '/': v;});

vicky keshri 01.12.2020 10:12

@VivekKumar привет, я знаю, что прошло какое-то время, но я пытаюсь сделать то же самое в React Native, но по какой-то причине это не работает, не могли бы вы помочь мне.

kd12345 08.02.2021 06:29

Другие вопросы по теме