React中不使用moment.js如何从输入日期获取对应星期名称

• 新增获取星期名称的工具函数，直接复用你在校验时拆分的日期逻辑，避免格式转换错误
• 修正原有代码的两处小问题：输入框value绑定错误、占位符和实际校验的分隔符不匹配
• 校验通过后调用工具函数生成星期名，存入state后渲染即可

首先新增星期转换工具函数：

function getWeekDayName(validDate) {
  const parts = validDate.split('/');
  const day = parseInt(parts[0], 10);
  // 注意JS中Date对象的月份从0开始计数，要减1
  const month = parseInt(parts[1], 10) - 1;
  const year = parseInt(parts[2], 10);
  const dateObj = new Date(year, month, day);
  // 数组顺序对应周日到周六，和getDay()返回值完全匹配
  const weekNames = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
  return weekNames[dateObj.getDay()];
}

修改后的完整React组件代码如下（原有isValidDate函数无需改动）：

class Inputdate extends React.Component {
  state = {
    inputDate: '',
    weekDay: '', // 存储对应的星期名称
  };

  render() {
    return (
      <div>
        <input
          name="date"
          type="text"
          // 修正绑定的state字段
          value={this.state.inputDate}
          // 修正占位符，和校验规则的分隔符保持一致
          placeholder="dd/mm/yyyy"
          onChange={(e) => {
            const inputVal = e.target.value;
            if (isValidDate(inputVal)) {
              const weekDay = getWeekDayName(inputVal);
              this.setState({ 
                inputDate: inputVal,
                weekDay: weekDay
              });
            } else {
              this.setState({ 
                inputDate: inputVal,
                weekDay: 'invalid date' 
              });
            }
          }}
        />
        <p>输入的日期：{this.state.inputDate}</p>
        <p>对应的星期：{this.state.weekDay}</p>
      </div>
    );
  }
}

你给出的示例12/01/1994测试后可正常输出wednesday，符合预期。

内容的提问来源于stack exchange，提问作者talent in making