1

I've tried the following to format a date in the locale of the browser:

<script>document.write((new Date(2021, 4, 14)).toLocaleString().split(",")[0])</script>

However, based on this question Document.write clears page it seems like it is writing after the document stream is closed, thereby opening a new stream and replacing the content on my page.

Using htmx is there a recommended way of formatting dates to the browser locale?

Is there an htmx tag that allows me to execute this javascript safely?

This is the html I'm using to invoke htmx:

 <div hx-get="/open_orders" 
      hx-trigger="load" 
      hx-target="this" 
      hx-swap="outerHTML"> 
     <img class="htmx-indicator" 
          src="[[=URL('static', 'images/spinner.gif')]]" 
          height="20"/> 
 </div>

-Jim

Jim
  • 21
  • 3
  • Are you sure you mean this kind of htmx? https://htmx.org/ – guettli Apr 06 '21 at 11:22
  • Yes, that is what I mean. – Jim Apr 06 '21 at 13:43
  • How does your question related to htmx? Sorry, I don't see it up to now. Which feature of htmx are you using? – guettli Apr 06 '21 at 19:46
  • I have this html:
    In the html being returned from the call to open_orders there is some javascript, as noted in the original question. When the html is returned, the javascript executes. But, it happens after the document stream is closed, therefore opening a new stream and replacing all the content that was already on the page. -Jim     – Jim Apr 06 '21 at 20:15
  • 1
    I've updated the question with the html that invokes htmx. – Jim Apr 08 '21 at 15:26
  • I have never used `document.write()`. Why don't you use innerHTML https://developer.mozilla.org/docs/Web/API/Element/innerHTML – guettli Apr 08 '21 at 16:06
  • "Using htmx is there a recommended way of formatting dates to the browser locale?" This is not the job of htmx. You can send the brower's locale to the server, and there use your favorite tools to create the desired output. – guettli Apr 08 '21 at 16:07
  • Thanks for the comments and idea. I will try this out and get back with what I find. – Jim Apr 08 '21 at 20:26

1 Answers1

0

As you mentioned, document.write() does not play well with htmx. This is true for most front-end libraries/toolkits/frameworks that want to control what is displayed in the browser window.

Instead, there are a number of ways you could do this instead:

  1. Try rendering the time on your server and simply displaying the value via htmx. This library works best when you put the server in charge whenever you can. I would recommend starting with this, if you can, instead of rendering a date via Javascript.

  2. If you really need to update this information on the browser (for instance, to update the display as the data changes, write to a specific DOM element instead:

<span id="time">&nbsp;</span>
<script>
    document.getElementById('time').innerHTML = currentTime();
</script>
  1. You can also hook in to a wide range of events that htmx triggers. This works well if you want to update information on the browser whenever htmx does something -- for instance, you can update the date/time displayed whenever htmx loads a new html fragment into the DOM.
Ben Pate
  • 161
  • 1
  • 2