Borislav Hadzhiev
Fri Dec 31 2021Β·4 min read
Photo by Minh TrαΊ§n
Use the value
property on the input elements of type date
, time
and
datetime-local
to set their values, e.g. dateInput.value = '2022-06-24'
. The
value property can be used to get and set the value of an input type date
,
time
and datetime-local
.
Here is the HTML for the examples in this article.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <label for="start">Input type Date:</label> <input type="date" id="date" name="trip-start" /> <br /><br /> <label for="appt">Input type Time:</label> <input type="time" id="time" name="appt" /> <br /><br /> <label for="meeting-time">Input type Datetime-local:</label> <input type="datetime-local" id="datetime-local" name="meeting-time" /> <script src="index.js"></script> </body> </html>
In our HTML, we created an input type: date, input type: time, and an input type: datetime-local.
Here is the JavaScript code that shows how to set and get their values.
const [date, time] = formatDate(new Date()).split(' '); console.log(date); // ποΈ 2021-12-31 console.log(time); // ποΈ 09:43 // β Set Date input Value const dateInput = document.getElementById('date'); dateInput.value = date; // ποΈοΈ "2021-12-31" console.log('dateInput value: ', dateInput.value); // β Set time input value const timeInput = document.getElementById('time'); timeInput.value = time; // ποΈ "09:43" console.log('timeInput value: ', timeInput.value); // β Set datetime-local input value const datetimeLocalInput = document.getElementById('datetime-local'); datetimeLocalInput.value = date + 'T' + time; // ποΈ "2021-12-31T10:09" console.log('dateTimeLocalInput value: ', datetimeLocalInput.value); // ποΈποΈποΈ Format Date as yyyy-mm-dd hh:mm:ss // ποΈ (Helper functions) function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date) { return ( [ date.getFullYear(), padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), ].join('-') + ' ' + [ padTo2Digits(date.getHours()), padTo2Digits(date.getMinutes()), // padTo2Digits(date.getSeconds()), // ποΈ can also add seconds ].join(':') ); } // ποΈ 2021-12-31 09:46 formatDate(new Date()); // ποΈ 2025-05-04 05:24 formatDate(new Date('May 04, 2025 05:24:07'));
It's quite a long snippet, but a good chunk of the code is comments and helper functions.
We created a reusable function that takes a Date
object and formats it as
yyyy-mm-dd hh:mm
.
formatDate
function if you want to format the date as yyyy-mm-dd hh:mm:ss
.We used the value
property on each of the inputs to set the date
, time
and
datetime-local
values.
The input type date
expects a value in the format of YYYY-MM-DD
.
The input type time
expects a value in the format of hh:mm
or hh:mm:ss
.
The input type datetime-local
expects a value in the format of
YYYY-MM-DDThh:mm
.
What our formatDate
function does is:
Date
object10
10
and produce consistent output.Here is a screenshot of how the input fields look on my machine. I'm in the EU and I'm on Linux.
Note that you don't have to set the input values to the current date / time. The
formatDate
function takes a Date
object, which you can set to a date and
time in the future or past.
Here is an example that passes a future Date and time - 2025-05-04 05:24
to
the method.
const [date, time] = formatDate(new Date('May 04, 2025 05:24')).split(' '); console.log(date); // ποΈ 2025-05-04 console.log(time); // ποΈ 05:24 // β Set Date input Value const dateInput = document.getElementById('date'); dateInput.value = date; console.log('dateInput value: ', dateInput.value); // ποΈ "2025-05-04" // β Set time input value const timeInput = document.getElementById('time'); timeInput.value = time; console.log('timeInput value: ', timeInput.value); // ποΈ "05:24" // β Set datetime-local input value const datetimeLocalInput = document.getElementById('datetime-local'); datetimeLocalInput.value = date + 'T' + time; // ποΈ "2025-05-04T05:24" console.log('dateTimeLocalInput value: ', datetimeLocalInput.value); // ποΈ Format Date as yyyy-mm-dd hh:mm:ss function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date) { return ( [ date.getFullYear(), padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), ].join('-') + ' ' + [ padTo2Digits(date.getHours()), padTo2Digits(date.getMinutes()), // padTo2Digits(date.getSeconds()), // ποΈ can also add seconds ].join(':') ); } // ποΈ 2022-07-31 09:36 formatDate(new Date()); // ποΈ 2025-05-04 05:24 formatDate(new Date('May 04, 2025 05:24:07'));
And here is how the browser output looks like.
If you are having difficulties setting the date and time values
programmatically, you first want to check your formatting, and then check if the
input
fields have constraints, e.g. max
or min
value.
<input type="date" id="date" name="trip-start" min="2021-01-01" max="2021-12-31" />
The input
field above has a constraint for the min
and max
specified
Dates
.
input
in your browser it would not allow you to select a date out of the specified range.While you might be able to set a different value programmatically, it's something to keep in mind.
Another thing to note is that if you submit the time using an HTTP GET
request, the colon character needs to be escaped when included in the URL
parameters, e.g. time=2021-12-31T08%3A30
.
You can use the encodeURI() function to encode a URI and replace the colon with an escape sequence of UTF-8 encoded characters.
Here is an example that sets the seconds of the time and datetime-local
inputs.
const [date, time] = formatDate(new Date()).split(' '); console.log(date); // ποΈ "2021-12-31" console.log(time); // ποΈ "10:43:36" // β Set Date input Value const dateInput = document.getElementById('date'); dateInput.value = date; // ποΈ "2021-12-31" console.log('dateInput value: ', dateInput.value); // β Set time input value const timeInput = document.getElementById('time'); timeInput.value = time; // ποΈ "10:43:42" console.log('timeInput value: ', timeInput.value); // β Set datetime-local input value const datetimeLocalInput = document.getElementById('datetime-local'); datetimeLocalInput.value = date + 'T' + time; // ποΈ "2021-12-31T10:43:42" console.log('dateTimeLocalInput value: ', datetimeLocalInput.value); // ποΈ Format Date as yyyy-mm-dd hh:mm:ss function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date) { return ( [ date.getFullYear(), padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), ].join('-') + ' ' + [ padTo2Digits(date.getHours()), padTo2Digits(date.getMinutes()), padTo2Digits(date.getSeconds()), ].join(':') ); } // ποΈ 2022-07-31 09:36 formatDate(new Date()); // ποΈ 2025-05-04 05:24 formatDate(new Date('May 04, 2025 05:24:07'));
And here is how the output with seconds looks in my browser.
All we did is uncomment the line that grabs the seconds from the Date
object
in the formatDate
function.