React中new Date将dd/mm/yyyy转为mm/dd/yyyy错误如何解决

问题根因 #

你遇到的格式转换错误来自两个核心问题：

• showDay方法中字符串拆分逻辑错误：你写的inputDate.split("/\D/")是按字符串/\D/拆分，而非正则规则拆分，实际不会生效，拿到的d是完整的原日期字符串，而非拆分出的日、月、年数组
• JS内置Date构造器解析xx/xx/xxxx格式的字符串时，默认遵循美式mm/dd/yyyy规则，会自动把第一个位置的数字识别为月份，第二个识别为日期，自然就和你输入的dd/mm/yyyy格式错位了。

修复方案 #

你已经在isValidDate里实现了正确的日/月/年拆分逻辑，在showDay里复用这个逻辑，手动把年、月、日传给Date构造器即可，注意Date的月份参数是从0开始计数的，传参时需要减1。

修复后完整代码 #

function isValidDate(inputDate){
  if(!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(inputDate))
    return false; 
  const parts = inputDate.split("/");
  const day = parseInt(parts[0], 10);
  const month = parseInt(parts[1], 10);
  const year = parseInt(parts[2], 10);
  if(year < 1000 || year > 3000 || month == 0 || month > 12) return false;
  const monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
  if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
    monthLength[1] = 29;
  return day > 0 && day <= monthLength[month - 1];
}

class Inputdate extends React.Component {
  state={
    inputDate:'',
    day:''
  }
       
  showDay=(inputDate)=>{
    // 输入无效直接返回
    if(inputDate === 'invalid date' || !inputDate) return
    // 按dd/mm/yyyy拆分出日、月、年
    const parts = inputDate.split("/");
    const day = parseInt(parts[0], 10);
    // 月份要减1，符合Date构造器的计数规则
    const month = parseInt(parts[1], 10) - 1;
    const year = parseInt(parts[2], 10);
    // 手动传参构造Date，避免自动解析格式错位
    const dt = new Date(year, month, day);
    // 按en-GB格式输出日期，得到dd/mm/yyyy格式的结果
    const formattedDate = dt.toLocaleDateString('en-GB');
    console.log("格式化后日期", formattedDate);
    // 获取星期
    const weekday = dt.toLocaleDateString('zh-CN', {weekday: 'long'});
    console.log("对应星期", weekday);
    this.setState({day: weekday})
  } 
  render() {
    return (
      <div>
        <input
          name="date"
          type="text"
          value={this.state.inputDate}
          placeholder="dd/mm/yyyy"
          onChange={(e)=> {
            if(isValidDate(e.target.value)){
              this.setState({inputDate : e.target.value})
            }else{
              this.setState({inputDate : 'invalid date'})
            }
          }}
        />
        <p>{this.state.inputDate}</p>
        {this.state.day && <p>对应星期：{this.state.day}</p>}
        <div onClick={()=>this.showDay(this.state.inputDate)}>Show Day</div>
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者Abhishek Roy