Convert date from string to input type date format

Question

I have an HTML input type of "datetime-local" which I then store in a datetime field in a MSSQLServer database. When I load the edit page, I want to populate this HTML date field with the value from the database. When my console prints out the value of the date, it is: "Tuesday, May 16, 2023 15:40:00 GMT+0200 (South African Standard Time)". Has anyone successfully used Javascript to convert a string like this into an acceptable HTML date input format?

P粉788765679 · Answer

Js has built-in methods that you can use to handle dates.

In the following example I:

Use the Date method to convert the input string into a Date object.
Use the getFullYear method to extract the year from the Date object.
Use the getMonth method to extract the month from the Date object.
- Since the getMonth method returns the zero-based month index (January = 0, February = 1, etc.), we must do the following: Result 1.
- Convert month to string.
- Use the padStart method to ensure that the month string is 2 characters long. Example: If extracted value = 1, then month = 01.
Use the getDay method to extract the date from the Date object.
- Convert date to string.
- Use the padStart method to ensure that the date string is 2 characters long. Example: If extracted value = 1, then date = 01.
Format the date so it fits the HTML input format.
Replace the HTML element value with the value we extracted.

const input = "Tue May 19 2024 15:40:00 GMT+0200 (South Africa Standard Time)";
const inputDate = new Date(input);

const year = inputDate.getFullYear();
const month = (inputDate.getMonth() + 1).toString().padStart(2, "0");
const day = inputDate.getDate().toString().padStart(2, "0");

const formattedDate = `${year}-${month}-${day}`;
const datePicker = document.getElementById('datePicker');
datePicker.value = formattedDate;





    
    
    
    Document

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial