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

我觉得这个问题的答案可能会很无聊，但我一直在尝试让通用日期选择器在react中显示正确的日期，并提出INTL.datetime（'fr-ca'等），然后用-，替换斜杠。很好，它在涉及日期的搜索中起作用。我尝试对无日期范围进行get，但它会返回一个错误，并且不会显示返回值

这是一个错误

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并将时间值设置为nothing

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;

import React，{useState，useContext，useffect}来自“React”；
从“/ListItem”导入ListItem；
从“/KeyModal”导入KeyModal；
从“./context/lead/LeadContext”导入LeadContext；
常量ListViewer=（）=>{
const leadContext=useContext（leadContext）；
const{leads，clearLeads，getLexs，key，postLeads，getDups，sendtoday，getReleases}=leadContext；
const[startDate，setStartDate]=useState（新日期（Date.now（）））
const[endDate，setEndDate]=useState（新日期（Date.now（）））
const onChange=e=>{
设置开始日期（如目标值）
} 
const onChange2=e=>{
setEndDate（如目标值）
}   
控制台日志（线索）
常量日期={startDate，endDate}
返回(
getDups（）}>获取所有DUP
sendTodays（）}>发送今天的摘要
getReleases（dates）}>Get Range Releases
getLexs（dates）}>获取范围Lexis信息
输入日期范围
).format（新日期（如target.value.replace（/-/，'/'））.replace（/-/，'/'）），
{keys.length>0？：''}




{leads.length>0？
clearLeads（）}className='btn btn深色btn block'>清除引线
postLeads（leads）}className='btn btn成功btn block'>postLeads
:''}
{leads.length>0？leads.filter（函数（项）{
返回项[“dob”]==未定义；
}).map（（潜在客户）=>）
: ""}
{leads.length>0？
leads.过滤器（功能（项目）{
退货项目[“dob”]！==未定义；
}).map（（潜在客户）=>）
: ""} 
);
};
导出默认列表查看器；

说明：

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

因此，您不应该在输入的

值

属性中传递

日期

对象，因为

日期

的默认字符串表示形式类似于：

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

当

值时

应为：

2020-12-01

文本框中显示的内容取决于浏览器区域设置，您不能更改日期在本机日期选择器中的显示方式

还有其他几点建议：

• new Date（Date.now（））

  是多余的，您可以使用不带任何参数的

  new Date（）

  来获取指向当前的

  Date

  对象

• 不能在

  Date

  对象上使用

  replace（）

  函数-在将它们转换为字符串之前，否则会出现错误。您可能打算执行以下操作：

  Intl.DateTimeFormat（“fr-CA”{
  年份：“数字”，
  月份：“数字”，
  日期：“数字”，
  }).format（新日期（endDate））.replaceAll（'-'，'/'））
  

• 说到

  replace（）

  ，您不必两次链接

  replace（）

  来替换斜杠（/）。您可以像上面一样使用

  replaceAll（）

  ，或者键入

  replace（/-/g，“/”）

  （注意正则表达式对象后面的“g”）

---

上述指针并不能解决您的问题。您仍然需要将日期转换为“yyyy-MM-dd”字符串。

replaceAll必须为newIsh您是正确的。

replaceAll（）

确实是最新的。如果将日期作为字符串传递给组件，则不必将其转换为正确的格式。或者，如果传递了日期对象，则可以使用。

date.toISOString（）.split（“t”，1）[0]

或

date.toISOString（）.slice（0，10）

。