0

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.)

bliako
  • 977
  • 1
  • 5
  • 16
  • Does this help? [https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) – Rob Moll Apr 30 '20 at 17:25
  • Does this answer your question? [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) – Heretic Monkey Apr 30 '20 at 18:34
  • See also [how to display a javascript var in html body](https://stackoverflow.com/q/40858456/215552) – Heretic Monkey Apr 30 '20 at 18:37
  • Heretic Monkey thanks that 2nd link looks promising basically is what @Federico Moretti suggesting. Can it be a bit more opaque and hide details from the user? – bliako Apr 30 '20 at 19:42

1 Answers1

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.

Federico Moretti
  • 527
  • 1
  • 11
  • 22
  • perhaps I was not clear but I do want to control how it is displayed. Suppose the date value comes from ajax. And fills the div. Now suppose that it comes unformatted and I want as soon as the div senses that the value has changed, to format it using the format and display it like this, formatted. – bliako Apr 30 '20 at 19:37