Question

我有以下react-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" />

试图将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组件的输入，或者这是该库的限制？

如果还有另一个库可以让我做自己想要的事情，请提出一个建议，或者我缺少什么可以让我在此处限制和控制输入？

谢谢！

验证react-datatime输入字段中的文本输入

0 个答案: