【问题标题】:how to take out the day name from the input date without using moment js in react如何在不使用时刻 js 的情况下从输入日期中取出日期名称
【发布时间】:2021-11-30 10:25:09
【问题描述】:

到目前为止,我的代码检查日期是否有效,但我不知道如何获取我在输入字段中输入的日期的日期名称。例如:如果我输入 12/01/1994 它应该打印星期三

function isValidDate(inputDate) {
  if (!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(inputDate)) return false;
  var parts = inputDate.split('/'); //12 01 1994
  var day = parseInt(parts[0], 10);
  var month = parseInt(parts[1], 10);
  var year = parseInt(parts[2], 10);
  if (year < 1000 || year > 3000 || month == 0 || month > 12) return false;
  var 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: '',
  };

  render() {
    console.log(this.state);
    return (
      <div>
        <input
          name="date"
          type="text"
          value={this.state.value}
          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>
      </div>
    );
  }
}

【问题讨论】:

标签: javascript reactjs


【解决方案1】:

我认为在 javscript 中处理日期时使用toLocaleString 是更好的做法,例如,如果您将尝试在有工作日的地方使用数组并通过日期格式从中获取特定字符串是不好的, 因为在 IOS 上你会得到 undefined 因为 "12/01/1994" 不是 ECMA-262 支持的格式,所以解析实现将取决于 iOS 将其视为无效日期。

const getWeekday = (dateFormat) => {
    // split date in non-digit chaarcters
    let [d, m, y] = dateFormat.split(/\D/);

    //put them in Date method
    const date = new Date(y, m - 1, d)
    //and return weekday in long format
    const weekday = date.toLocaleString("default", { weekday: "long" })
    
    return weekday
}

console.log(getWeekday('12/01/1994'))

【讨论】:

  • 请检查这个jsfiddle.net/Abhishek_12/0tkcL973/6 它正在将我的输入日期 dd-mm-yyyy 转换为 mm-dd-yyyy 从而给出错误答案
  • 您必须在更新状态时使用扩展运算符,您不会保存以前的操作,这意味着当您触发onChange 时,值仍然会变为"",您必须像这样尝试 onChange this.setState({...this.state, inputDate : e.target.value})} 您更新状态使用新值并保存以前的值,并且在日期格式之后包含我的函数并在该状态下返回新值您可以检查代码中的工作示例,这里是 JSFIDDLE
  • 你能解释一下这行这行实际上在做什么 const date = new Date(y, m - 1, d) 特别是这部分 new Date(y, m - 1, d)跨度>
  • 它做了什么,我将您的字符串拆分为非数字字符,这与-/ 甚至是%之间的数字无关没关系,我用 3 个字符串创建数组,这些是标记为 d 的日期 - 日期 m - 月份 y - 年份 所以如果您的数据字符串是 2021 年 11 月 30 日部分将返回[11, 30, 2021],要使用它,数组中的日期,javscript 必须读取为yearmonthday,为什么我在一个月m -1?因为在 javscript 中第一个月是 1 月,索引将 0,所以如果 11 月是第 11 个月,对于 js 它将是 10,然后通过我那里 2021 10 30
  • 在我的验证函数中,我使用正则表达式验证日期的另一件事是还有其他方法可以做到这一点。如果是,请帮助我,因为我发现正则表达式有点难。不过感谢上面的解释。
【解决方案2】:
const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

var date = event.toLocaleDateString(undefined, options)


var day =  date.split(',')[0] // This will show you the day name.
console.log(day)

【讨论】:

    【解决方案3】:

    这应该可行:

    let d = new Date("12/01/1994")
    
    const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
    
    let day = weekday[d.getDay()];
    
    console.log(day)

    【讨论】:

    • const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", Saturday"]
    • 我可以放置 inputDate 变量而不是硬编码日期吗?
    • @AbhishekRoy 是的,在您的代码中,您提到了这一点:var parts = inputDate.split("/"); //12 01 1994。所以将它与我的代码一起使用,然后它应该可以工作。所以像const d = new Date(parts) 这样的东西。
    • 假设我在将 12-01-1994 拆分后通过日期函数传递它时,格式变为 dec-01-1994,因此给了我错误的一天如何将该格式转换为 dd-mm -yyyy 因为当 m 给出输入 30/11/2021 时,它返回 NAN
    • @AbhishekRoy 你能在codesandbox / jsfiddle 上重新创建你的代码吗?那我可以看看。
    猜你喜欢
    • 2015-11-17
    • 2016-01-10
    • 2018-09-25
    • 2012-01-12
    • 2014-09-19
    • 1970-01-01
    • 2017-12-03
    相关资源
    最近更新 更多