HTML/JS: datetime display-er

Question

Is there available a component, a div class, anything which uses pure JS or bootstrap in order to display a date string which formats as per instructions? For example:

<div
  class="my-datetime-formatter-and-display-er"
  value="Thu 30 Apr 20:12:08 EEST 2020"
  format="%M/%Y"
></div>

and display "04-2020"? But for the same value, when format changes it displays something else? The idea is that the value is the same all the time.

All I get in my searches are date-pickers.

Alternatively, if I already have a js function which formats a datestr, e.g. formatdata("Thu 30 Apr 20:12:08 EEST 2020", "%M/%Y"), how can I call it on a div onload(?) to format the value and fill it in at creation time? (provided that it does not interfere with already installed onclick etc.)

Answer 1

Wait, Bootstrap has nothing to do with it. Bootstrap can handle how it’s displayed, but it can’t alter the date format (and I can’t see a Bootstrap class in your code): plus, the <div> element doesn’t have a value attribute by default in HTML. You should use <date> instead, eventually with datetime="Thu 30 Apr 20:12:08 EET 2020" as an attribute. That said, my suggestion is to manage it by JavaScript.

<div class="my-datetime-formatter-and-display-er">
  <date datetime="04-2020">Thu 30 Apr 20:12:08 EET 2020</date>
</div>

You can modify the datetime or the innerHTML of <date> with a JavaScript function, calling the class .my-datetime-formatter-and-display-er as a DOM node. You can let the <date> element empty and show just its datetime attribute as well. Calling your function, if existing, from onload depends just on which event listener you choose in JavaScript. I mean, like:

window.addEventListener('load', formatData('Thu 30 Apr 20:12:08 EET 2020', '%M-%Y'));

…to have it at the window loading event. How to show the date on the page is up to you. I hope this can help you, although I’m not sure I understood your question.