影响非日期相关搜索查询的日期格式

Question

我觉得这个问题的答案可能会很简单，但我一直在尝试让通用日期选择器在react中显示正确的日期，并提出了INTL.datetime('fr-ca'等(，然后用-替换斜线。很棒，它适用于涉及日期的搜索。我试图进行无日期范围的获取，但它会返回一个错误，并且不会显示返回的

这是错误

react-dom.development.js:1383 The specified value "Tue Dec 01 2020 09:52:36 GMT-0800 (Pacific Standard Time)" does not conform to the required format, "yyyy-MM-dd".

这是我对整个组件的代码。我应该对getDups((使用effect并将时间值设置为零吗？

import React, { useState,useContext, useEffect } from "react";
import ListItem from "./ListItem";
import KeyModal from "./KeyModal";
import LeadContext from "../context/lead/leadContext";
const ListViewer = () => {
const leadContext = useContext(LeadContext);
const { leads, clearLeads, getLexs, keys, postLeads, getDups,sendTodays,getReleases } = leadContext;
const [startDate, setStartDate] = useState(new Date(Date.now()))
const [endDate, setEndDate] = useState(new Date(Date.now()))
const onChange = e =>{
setStartDate(e.target.value)
} 
const onChange2 = e =>{
setEndDate(e.target.value) 
}   

console.log(leads)
const dates = {startDate, endDate}    
return (
<div className='grid-2'>
<div>
<button className="p-2 btn btn-sm btn-danger" onClick={()=>getDups()}> Get All Dups </button>  
<button className="p-2 btn btn-sm btn-success" onClick={()=>sendTodays()}>Send Todays Scrapes</button>
<button className="p-2 btn btn-sm btn-primary" onClick={()=>getReleases(dates)}>Get Range Releases</button>    
<button className="btn btn-sm btn-dark" onClick={()=>getLexs(dates)}>Get Range Lexis Info</button>
</div>
<div>
<form>
<div className='grid-2'>

<div>
<label>Enter a Date Range </label>
<input
type='date'
name='startDate'
value={
startDate &&
Intl.DateTimeFormat("fr-CA", {
year: "numeric",
month: "numeric",
day: "numeric",
}).format(new Date(startDate).replace(/-/, '/').replace(/-/,'/'))
}
id='startDate'
onChange={onChange}
/> 
</div>
<div>
<input
type='date'
name='endDate'
value={
startDate &&
Intl.DateTimeFormat("fr-CA", {
year: "numeric",
month: "numeric",
day: "numeric",
}).format(new Date(endDate).replace(/-/, '/').replace(/-/,'/'))
}
id='endDate'
onChange={onChange2}
/>
</div>
</div>
</form>  
).format(new Date(e.target.value.replace(/-/, '/').replace(/-/,

</div>
{keys.length > 0 ? <KeyModal keys={keys}/> :''}   
<br/>
<br/>

{leads.length > 0 ? 

<div className='grid-2'>
<div> <button onClick={()=>clearLeads()} className='btn btn-dark btn-block'>Clear Leads</button></div>
<div> <button onClick={()=>postLeads(leads)}className='btn btn-success btn-block'>Post Leads</button></div>

</div>:''}
<div className = 'grid-2'>
<div>      {leads.length > 0 ?         leads.filter(function(item) {
return item["dob"] === undefined;

}).map((lead) => <ListItem key={lead.dupId} lead={lead} />)
: ""}</div>
<div>      
{leads.length > 0 ?

leads.filter(function(item) {
return item["dob"] !== undefined;

}).map((lead) => <ListItem key={lead.dupId} lead={lead} />)

: ""}</div> 

</div>
</div>
);
};
export default ListViewer;

Answer 1

<输入类型＝"；日期">声明：

解析值的格式始终为yyyy-mm-dd-

因此，您不应该在输入的value属性中传递Date对象，因为Date的默认字符串表示形式类似于：

2020年12月1日星期二09:52:36 GMT-0800(太平洋标准时间(

value应为时

2020-12-01

<input type="date">文本框中显示的内容取决于浏览器区域设置，您无法更改日期在本机日期选择器中的显示方式。

还有一些其他指针：

• new Date(Date.now())是多余的，您可以使用不带任何参数的new Date()来获得指向当前的Date对象。

• 您不能在Date对象上使用replace()函数——除非在将它们转换为字符串之前，否则您会得到一个错误。你可能想做：

  Intl.DateTimeFormat("fr-CA", {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  }).format(new Date(endDate)).replaceAll('-', '/')
  

• 说到replace()，您不必将replace()链接两次就可以用所有短划线(-(代替斜线(/(。您可以像上面那样使用replaceAll()，或者键入replace(/-/g, '/')(注意正则表达式对象后面的"g"(。

以上的指针并不能解决您的问题。你仍然需要将你的CCD_；yyyy-MM-dd"；一串