Проверка правильности ввода текста в поле ввода времени реакции - PullRequest
Новая
       15

Проверка правильности ввода текста в поле ввода времени реакции

0 голосов
/ 03 сентября 2018

У меня есть следующий response-datetime компонент: 

<DateTime onChange={(datetime) => {this.setState({eventStart:datetime})}}
                          inputProps={{readOnly:"readonly"}} utc={true} 
                          dateFormat="YYYY:DDD" timeFormat="HH:mm:ss"
                          value={this.state.eventStart} />

Сейчас у меня отключено поле ввода текста, поэтому пользователь вынужден использовать календарь и колеса времени для ввода даты, но я ожидаю, что пользователи захотят свободно ввести желаемую дату / время.

То, что я хотел бы сделать, это управлять вводом, чтобы, если пользователь вводил что-либо, кроме числа (в конечном счете, имелись умные ограничения, чтобы ограничить даже то, что основано на предыдущих записях, так что, например, день года не может быть больше 365), а также автоматически вставлять: где необходимо.

Однако у меня возникают проблемы с выяснением, как вставить свою функцию в поле ввода.

Вот несколько вещей, которые я пробовал: 

<DateTime onChange={(data) => {this.validateTextInput(data, 'startTime')}}
          utc={true} dateFormat="YYYY:DDD" timeFormat="HH:mm:ss" />


validateTextInput(data, field) {
    var element = document.getElementById(field);
    console.log('Data: ' + data);
    console.log('Element');
    console.log(element);
    console.log('Element value: ' + element.value);
    element.value = element.value.replace(/[^a-zA-Z]+/, '');
    console.log('New element value: ' + element.value);
}

Это прекрасно работает с выводом на консоль, но поле все еще позволяет вводить альфа-символы. Элемент element.value никогда не устанавливается правильно. 

<DateTime utc={true} inputProps={{id:'startTime',onkeyup:(e) => this.validateTextInput(e, 'startTime')}} dateFormat="YYYY:DDD" timeFormat="HH:mm:ss" />

Попытка установки свойства input для onkeyup для моей функции проверки, но это, похоже, ничего не делает (validateTextInput - то же самое, что и выше).

Наконец, я попытался заменить все рендерер на следующий, но он тоже ничего не сделал (без вывода на консоль): 

<DateTime renderInput={this.createInputRenderer} />

createInputRenderer(props, openCalendar, closeCalendar){
    const inputProps = {...props, id:'startTime', type:'text', onkeypress:(e) => this.validateTextInput(e, 'startTime')}
    return (
        <input  inputProps />
    );
}

(жестко запрограммированный startTime, просто чтобы попытаться заставить это работать)

Есть ли способ управления вводом компонента DateTime или это ограничение этой библиотеки?

Если есть другая библиотека, которая позволяет мне делать то, что я ищу, пожалуйста, предложите одну или что мне не хватает, что позволило бы мне ограничить и контролировать ввод здесь?

Спасибо!

...