Дата ввода в формате ММ / ГГ

Question

Я хочу, чтобы пользователь мог вводить только дату в этом формате MM / YY на дату ввода в качестве дескриптивного изображения:

В качестве начинающих Js и React developper, iразрешил пользователю показывать дату в форме даты ММ / ГГ, добавив "/". Я ищу информацию о записи шаблона регулярного выражения для ввода действительной даты или другой возможности, если она существует.

Здесь мойReact JS CODE:

import React from "react";

import "./styles.css";

export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayMessageUser: "Enter the user name",
      displayMessageDate: "12/08",
      userName: "",
      validThru: "",
      validUser: {
        status: true,
        message: ""
      },
      validDate: {
        status: true,
        message: ""
      }
    };

    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeDate = this.handleChangeDate.bind(this);
  }

  handleChangeName(event) {
    var onlyTextRegex = /[^A-Za-z]/g;
    if (event.target.value.match(onlyTextRegex)) {
      this.setState({
        validUser: { status: false, message: "Tape only text" }
      });
    } else if (event.target.value.length > 20) {
      this.setState({ validUser: { status: false, message: "Max length 20" } });
    } else {
      this.setState({
        userName: event.target.value,
        valid: { status: true, message: "" }
      });
    }
  }

  handleChangeDate(event) {
    this.setState({
      validThru:
        event.target.value.substring(0, 2) +
        "/" +
        event.target.value.substring(2, 4),
      valid: { status: true, message: "" }
    });
  }

  render() {
    const { validUser } = this.state;
    const { validDate } = this.state;
    return (
      <div className="displayCard">
        <div className="bgCreditCard">
          <div className="titleCard">
            <h1>Credit card</h1>
          </div>
          <div className="simCard">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/hh7c-chip.png"
              alt=""
            />
          </div>
          <div className="idCard">
            <h2 className="idCardNumber">7253 3266 5284 8621</h2>
          </div>
          <div className="userCard">
            <div className="userCardID">5422</div>
            <div className="userCardValidation">
              <div className="bloc1">
                Valid <br />
                thru
              </div>
              <div className="bloc2">
                month/year
                <br />
                <span>{this.state.validThru}</span>
              </div>
            </div>
          </div>
          <div className="userCardDescription">{this.state.userName}</div>
          <div className="cardType">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/aFYl-visa.jpg"
              alt=""
            />
          </div>
        </div>
        <div className="inputInterface">
          <input
            type="text"
            placeholder={this.state.displayMessageUser}
            onChange={this.handleChangeName}
          />
          {!validUser.status ? (
            <span style={{ color: "#ff0000" }}>{validUser.message}</span>
          ) : null}
          <input
            type="date"
            datatype="DD MM"
            placeholder={this.state.displayMessageDate}
            onChange={this.handleChangeDate}
          />
          {!validDate.status ? (
            <span style={{ color: "#ff0000" }}>{validDate.message}</span>
          ) : null}
        </div>
      </div>
    );
  }
}

Answer 1

Так же, как идея, поэтому речь идет о датах.Вы можете использовать пакет moment, а затем проверить его действительность на основе формата.

Например

moment(yourDate, 'D/M', true).isValid()

Answer 2

Я не думаю, что регулярное выражение будет лучшим вариантом здесь.Для действительной даты в этом случае вы должны убедиться, что

1. Это не истек.Вы можете проверить год и месяц сегодняшней даты и убедиться, что ввод перед этой датой.
2. Это действительно допустимо, например, месяц между 1 и 12.

validateDate() { // Assuming variables inputYear and inputMonth are already defined and correspond to user's input. const todayDate = new Date() const todayYear = todayDate.getFullYear() // It gives you four digits so you might want to slice out the last two digits const todayMonth = todayDate.getMonth() if (!(inputMonth >= 1 && inputMonth <= 12)) return false if (inputYear > todayYear) return true else if (inputMonth > todayMonth) return true else return false }

Answer 3

Вы можете попробовать библиотеку, такую ​​как:

response-maskedinput: http://insin.github.io/react-maskedinput/

cleavejs: https://nosir.github.io/cleave.js/

TextMask: https://text -mask.github.io/text-mask/