Javascript: how to convert datetime from yyyy-mm-ddThh:mm:ss to m/d/yyyy h:mm am/pm

Question

I currently have an HTML form that I have put together that takes the input from the user and creates an Email to be sent off to a distro list. I am having an issue with getting the date from the form to convert nicely to a different format. The current output shows and "YYYY-MM-DDTHH:MM" and I am looking to have it show "MM/DD/YYYY H:MM AM/PM"

Here is the line of Codes in HTML

<body>
<div class="row">
    <div class="cell">Event Start:</div>
    <div class="cell">
        <div class="cell"><input type="datetime-local" id="start_dt" /></div>
    </div>
</div>

<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell" style="text-align: center;"><button type="submit" style="width: 90%;" class="SubmitButton" onClick="createEmail();">Generate Email</button></div>
</div>
                
<script src="JS\testemail.js"></script>

</body>

And hers is my JavaScript

function createEmail() { 

let f = document.getElementById("start_dt").value.replace("T", " ");

let m_to = "Distro_List"
let m_cc = "CC_List"


document.location.href = "mailto:" + encodeURIComponent(m_to) + "?cc=" + encodeURIComponent(m_cc)
+ " &subject=Storm Mode"
+ " "
+ "&body=" 
+ "%0D%0A%0D%0A"
+ "Event Start: " + encodeURIComponent(f) + "%0D%0A"
        }

I have tried a few of the solutions found on SO using Librarys with momement.js, but I can not download this onto my work machine. Here is the solution from SO that I tried to implement How to format a JavaScript date and I tried using this site https://www.valentinog.com/blog/datetime/

I know my lack of knowledge on HTML and JS has me stumped on what I should do next. Any direction or pointers to help me on my way will be greatly appreciated.

Sorry for the messy code, I am still learning

This is basically the same as the question you've linked to, [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date). There are 53 answers to that question, and the accepted answer has a detailed explanation of how to do format a date. Perhaps you can explain more about what you tried from those answers so that we don't end up writing the same answers over again. — Heretic Monkey, Aug 13 '20 at 15:27
I believe I am having an issue with getting the input from the form to be converted. Every example has var d = new date. I have tried `let f = document.getElementById("start_dt").value` and then converting from there but nothing happens — Tony, Aug 13 '20 at 15:34
Try `let d = new Date(f);` and go from there (without the `replace`). — Heretic Monkey, Aug 13 '20 at 15:38
UGH...I thought I tried that. Thank you. I will continue to look through the solutions to get the time formatted correctly. — Tony, Aug 13 '20 at 15:45

Lionel Rowe · Accepted Answer · 2020-08-13T17:18:59.753

If you're working in the browser, you can avoid importing giant libraries like moment.js by using the native Intl.DateTimeFormat constructor. The following options look to be pretty close to what you want:

const formatter = new Intl.DateTimeFormat('en-us', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: 'numeric',
  minute: 'numeric',
  hour12: true,
})

const iStillDontUnderstandWhyAnyoneThoughtMonthDayYearWasAGoodIdeaForADateFormatButWhatDoIKnow
  = formatter.format(new Date()) // "08/13/2020, 4:46 PM"

Optionally, you could also get rid of the comma with

iStillDontUnderstandWhyAnyoneThoughtMonthDayYearWasAGoodIdeaForADateFormatButWhatDoIKnow
  .replace(',', '') // "08/13/2020 4:52 PM"

Thank you, this does everything I need it to. and with the help from Hectic Monkey, I was able to integrate it in with no issues. I agree with the variable name — Tony, Aug 13 '20 at 17:12

Javascript: how to convert datetime from yyyy-mm-ddThh:mm:ss to m/d/yyyy h:mm am/pm

1 Answers1