CODEWITHSUNDEEP
reactjsdatetimepicker
Fatt Sky
Fatt Sky

Reputation: 680

Separate date and time in the input type

I am using in the React. This defines a date picker. This date picker is working in my components. Now my problem is how to separate time and date into two different input types?

For example datetime-local show the date picker below:

datetime

But now I want to separate the date and time into 2 input types.

For example, I want to show the only date in the input type like below:

date

For example, I want to show the only time in the input type like below:

time

This one is my existing coding show the datetime picker in the react:

<Form.Control
type="datetime-local"
name="appointmentDate"
value={selectedDate}
min={newDateValue}
onChange={(e) => handleDateChange(e.target.value)}
format={SAASDateTimeFormat}
/>

Reasons:

Why do I want to use the datetime-local input type to separate time and date? Because I want to standardize to the same UI for all Date & Time on the webpage, some pages use dateime-local input type to show the date picker with time, some pages only use time input type, some pages only use date input. So I want to try to use datetime-local type to separate date and time.

May I know if is it possible to separate date and time in the datetime-local type? Hope someone can guide me on how to solve these problems. Thanks.

Upvotes: 1

Views: 4561

Answers (1)

David Holly
David Holly

Reputation: 385

You can just define the date and time in your input type.

For example:

Time-

type="time"

Date-

type="date"

Upvotes: 1

Related Questions