Set the Values of Input type Date and Time using JavaScript | bobbyhadz

PHOTO EMBED

Fri Sep 09 2022 16:00:42 GMT+0000 (Coordinated Universal Time)

Saved by @luiso #javascript

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(':')
  );
}

// πŸ‘‡οΈ 2022-07-22 08:50:39
console.log(formatDate(new Date()))

// πŸ‘‡οΈ 2025-05-04 05:24
console.log(formatDate(new Date('May 04, 2025 05:24:07')))
content_copyCOPY

https://bobbyhadz.com/blog/javascript-set-values-input-date-time