Javascript: Create Date object from a string with a time

Question

Project setup

• Django and Django REST Framework on the backend
• React and AntD on the frontend

Problem

I have a DateField and TimeField fields in my backend that return a string with format "YYYY-MM-DD" and "HH:mm:ss" respectively. I'm trying to get AntD to accept these values as an initial value, but the problem is that it seems that AntD expects a Date object, because anytime I try to pass the strings themselves I get an date.format is not a function error. I guess that AntD is trying to format the dates, but they're actually strings.

Code

Next is a minimal example of the problem I'm presenting. If running this with the following dependencies, it produces the error date.clone is not a function.

import { Form, DatePicker, TimePicker, Input } from "antd";

const initial_data = {
  title: "Title",
  date: "2023-12-05",
  time: "10:23:00"
}

export function Playground() {
  return (
    <Form initialValues={initial_data} >
      <Form.Item name="title" >
        <Input placeholder="Title" />
      </Form.Item>
      <Form.Item name="date" >
        <DatePicker format={"DD/MM/YYYY"} placeholder="Pick a date" />
      </Form.Item>
      <Form.Item name="time" >
        <TimePicker format={"HH:mm"} placeholder="Pick a date" />
      </Form.Item>
    </Form>
  );
}

Dependencies:

• react: 18.2.0
• react-dom: 18.2.0
• antd: 4.24.8

Things I've tried

For the DateField I have no problem, simply I use moment to create a Date from it. However, I haven't found how to transform the time string "HH:mm:ss" into a Date object so that AntD can properly work with it.

Is there a way to do this, or any other idea on how I should work around this issue?

Answer 1

Antd Datepicker & Timepicker accepts value of type moment (Antd v5 uses dayjs instead of moment). For Timepicker, you need to specify the format as second option in moment. moment('10:23:00', 'HH:mm')

Since you receive all values from backend and in order to set these values in form, you need to use useForm hook.

Here's the complete code that format and sets the values in form.

import moment from "moment";
import { useEffect } from "react";
import { Form, DatePicker, TimePicker, Input } from "antd";

export function Playground() {
  const [form] = Form.useForm();

  useEffect(() => {
    // Get data from backend....
    const response = {
      title: "Title",
      date: "2023-12-05",
      time: "10:23:00",
    };

    form.setFieldsValue({
      ...response,
      date: moment(response.date),
      time: moment(response.time, "HH:mm"),
    });
  }, [form]);

  return (
    <Form form={form}>
      <Form.Item name='title'>
        <Input placeholder='Title' />
      </Form.Item>
      <Form.Item name='date'>
        <DatePicker format={"DD/MM/YYYY"} placeholder='Pick a date' />
      </Form.Item>
      <Form.Item name='time'>
        <TimePicker format={"HH:mm"} placeholder='Pick a date' />
      </Form.Item>
    </Form>
  );
}

export default Playground;