日期文本输入的自动反斜杠反应本机？

Posted 2023-04-18

【中文标题】日期文本输入的自动反斜杠反应本机？

【英文标题】：Automatic backslash for Date Text Input React Native?

【发布时间】：2019-04-05 00:21:49

【问题描述】：

有谁知道如何创建一个文本输入，当您开始输入时，它会自动允许一定数量的数字，并自动将数字反斜杠分隔。

DD / MM / YYYY （我不想使用日期选择器或库）。

【参考方案1】：

试试这个反应组件：

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：使用时刻格式的日期时间掩码（默认 DD/MM/YYYY HH:mm:ss）。它接受选项（请参阅本文档后面的内容）。

【讨论】：

感谢您的回答！我看过这个库，但我想知道是否有人知道如何在不使用库的情况下编写代码。

【参考方案2】：

你可以这样使用：

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

在handleTextChange() 中，对插入的文本做任何你需要的操作，而不是将其设置为状态

【讨论】：

是否可以编辑日期 - 我可以将其更改为静态字符串，但我不知道如何添加带有空格的反斜杠“ _ _ / _ _ / _ _ _ _ “并使其可编辑？这样用户开始输入数字，它就会自动用数字替换 _ 甚至只是一个空格。

【参考方案3】：

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 事件将有助于处理输入。

【讨论】：

这工作正常，但后退按钮“/”的 onPress 没有被删除。有什么建议可以实现这一目标吗？

你需要在 dateTimeInputChangeHandler 方法中进行修改

是的，我正在尝试，但无法实现。 Back Press 工作正常，但由于此功能，我无法应用更改。 var output = values.map(function(v, i) return v.length == 2 && i

@VivekKumar 嗨，我知道这已经有一段时间了，但我正在尝试在 react native 中做同样的事情，但由于某种原因它不起作用，你介意帮助我吗？