可以将日期解析为字符串

如何解决可以将日期解析为字符串

我正在使用这个日期选择器 https://github.com/wojtekmaj/react-date-picker

它包含 Date 对象上的所有内容，但我需要以某种方式将其解析为具有这种格式的字符串 (2020-02-03 16:00) 我只需要剪切时区信息。

我的项目结构如下：

import React,{ ChangeEvent,useState } from 'react';
import { Underline } from '../Underline';
import { LabelPosition } from 'inputs/models';
import { Alignment,JustifyContents } from 'layout/models';
import Label from 'inputs/Label';
import { uniqueId } from 'lodash';
import './styles.scss';
import DatePicker from 'react-date-picker';
import { MaskName } from 'inputs/models/MaskName';
import { OnChangeDateCallback } from 'react-calendar';
import { moveSyntheticComments } from 'typescript';

export interface DateProps {
    disabled?: boolean;
    error?: boolean;
    label?: string;
    labelPosition?: LabelPosition;
    value: Date;
    id?: string;
    justify?: JustifyContents;
    align?: Alignment;
    gap?: number;
    mask?: MaskName;
    onChange?: OnChangeDateCallback;
}

export const DateInput = (props: DateProps) => {
    const [date,setDate] = useState(new Date());
    const id = uniqueId('idDate-');

    const handleDate =()=>{
        props.onChange

    }

    return (
        <div
            className="tsr-input-container"
            style={{
                columnGap: props.gap || 20,justifyContent: props.justify || JustifyContents.spaceBetween,alignContent: props.align || Alignment.center,alignItems: props.align || Alignment.center,}}
        >
            {props.labelPosition === LabelPosition.Left || props.labelPosition === undefined ? (
                <Label id={props.id || id} text={props.label} />
            ) : (
                <></>
            )}
            <div className="tsr-input">
                <DatePicker
                    openCalendarOnFocus={false}
                    disabled={props.disabled}
                    showLeadingZeros={true}
                    value={props.value}
                    onChange={props.onChange}
                    calendarIcon={
                        <svg style={{ width: '20px',height: '20px' }} viewBox="0 0 24 24">
                            <path
                                fill="gray"
                                d="M9,10H7V12H9V10M13,10H11V12H13V10M17,10H15V12H17V10M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,0 21,19V5A2,0 19,3M19,19H5V8H19V19Z"
                            />
                        </svg>
                    }
                    clearIcon={null}
                />

                <Underline />
            </div>
            {props.labelPosition === LabelPosition.Right ? <Label id={props.id || id} text={props.label} /> : <></>}
        </div>
    );
};

在应用中：

  const [value,setValue] = useState('');

 const onChangeDate = (date: string):void => {
       console.log((date as unkNown as Date))
       var str = moment(date).format("YYYY-MM-DD HH:mm:ss");
      console.log(str);
      setValue(date)
  }

<DateInput label="Data urodzenia"  onChange={onChangeDate} value={value}/>

我想知道是否可以在 DateInput 组件中进行此操作我想将逻辑保留在那里，而在应用程序中只需将值从 onChange 设置为状态挂钩

tl;dr - 我需要 str 中的值才能生效，但值是 Date 并且必须是 Date to Date 选择器。

解决方法

好的，我已经解决了这个问题：

const onChangeDate = (value: Date) => {
        console.log(moment(value).format('YYYY-MM-DD HH:mm:ss'));
        var str = moment(value).format('YYYY-MM-DD HH:mm:ss');
        props.onChange(str);
    };

<DatePicker
    value={moment(props.value).toDate()}
    onChange={onChangeDate}
</DatePicker>      

所以之后我可以在应用程序中以简单的方式使用它：

const [date,setDate] = useState(new Date().toString());

const onChangeDate = (date: string):void => {
      setDate(date);
  }

<DateInput value={date} onChange={onChangeDate}/>