(TS字符串与时间戳互转)前后端日期数据传输转化复盘

{<Form.Item label="Due Date" name="duedate" >
                        <Input prefix={<ClockCircleOutlined />} placeholder="YYYY-MM-DD HH:mm:ss"/> 
                    {/* <DatePicker
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              style={{ width: "100%" }}
            />  */}

本来想用datepicker,不过我实在是驾驭不了它,传输的那些函数根本处理不了,也没有找到合适的转化函数。。(后面发现在前后端连起来之后就可以直接用了)
输入字符串之后

form.duedate=new Date(form.duedate).getTime();
        const{success,data}=await addBwicApi(form);

TS里适合转时间戳的函数只找到gettime。。
后端返回时间戳数据后遍历转为字符串:

  function formatDate(time:any):string{
    let date = new Date(time);
    
    let YY = date.getFullYear();
    let MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

	// 这里修改返回时间的格式
    return YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
}
  const [ddd,setddd]=useState<BwicItems[]>();
  const onClick = async () => {
    const { success, data } = await getBwicApi();
    // console.log(1111);
    // console.log(data);
    for (let datai of data) {
       //datai.duedate=new Date(datai.duedate);
       datai.duedate=formatDate(datai.duedate);
    }
    setddd(data);
  }//bwic?.AddedBwic
  return(
    <div>  
      <Button onClick={onClick}>刷新!</Button>
      <div>23333</div>
      <Table columns={columns} dataSource={ddd} onChange={onChange} key="cuisp" />
      <Button title="刷新" onClick={onClick}/>
    </div>);

duedate终于正常了,虽然还是抛弃了datepicker但勉强能用,先转化了一次时间戳传进去,显示的时候又遍历了一遍data.duedate变回字符串,让它在数据库和前端都能完美展示了。
请添加图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值