It is possible to parse Date to string

Question

I am using this date-picker https://github.com/wojtekmaj/react-date-picker

It has everything on Date objects but i need to somehow parse this to string with this format ( 2020-02-03 16:00 ) i just need to cut the timezone informations.

I have this structure of my projects:

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,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z"
                            />
                        </svg>
                    }
                    clearIcon={null}
                />

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

in app:

  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}/>

I wonder if its possible to make this operations in DateInput component i want to keep the logic there, and in app just set the value from onChange to state hook

tl;dr - I need the value from str to be in value but value is Date and have to be Date to Date picker works.

Yes, you can. Create a new component which wraps the original one and hook into the change handler and there parse the date object into a string. — Tsvetan Ganev, Jul 15 '21 at 11:01

score 0 · Answer 1 · answered Jul 16 '21 at 09:20

Okay i have resolved this like that:

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>

so after that i can use in app this in simple way:

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

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

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

It is possible to parse Date to string

1 Answers1