htmx - 浏览器区域设置的格式日期

Posted 2023-05-07

【中文标题】htmx - 浏览器区域设置的格式日期

【英文标题】：htmx - format date for browser locale

【发布时间】：2021-07-01 11:08:33

【问题描述】：

我已尝试以下方法在浏览器的区域设置中格式化日期：

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

但是，基于这个问题Document.write clears page，它似乎是在文档流关闭后写入，从而打开一个新流并替换我页面上的内容。

使用 htmx 是否有推荐的方法将日期格式化为浏览器区域设置？

是否有一个 htmx 标签可以让我安全地执行这个 javascript？

这是我用来调用 htmx 的 html：

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

-吉姆

【问题讨论】：

你确定你的意思是这种htmx吗？ htmx.org

是的，我就是这个意思。

您的问题与 htmx 有什么关系？抱歉，我到现在都没看到。您使用的是 htmx 的哪个功能？

我有这个 html: 在从调用 open_orders 返回的 html 中有一些javascript，如原始问题中所述。返回 html 时，将执行 javascript。但是，它发生在文档流关闭后，因此打开一个新流并替换页面上已经存在的所有内容。 -吉姆

我已经用调用 htmx 的 html 更新了问题。

【参考方案1】：

正如你所提到的，document.write() 不能很好地与 htmx 配合使用。对于想要控制在浏览器窗口中显示的内容的大多数前端库/工具包/框架来说都是如此。

相反，您可以通过多种方式执行此操作：

尝试在您的服务器上渲染时间并通过 htmx 简单地显示该值。当您尽可能让服务器负责时，此库效果最佳。如果可以的话，我建议从这个开始，而不是通过 Javascript 呈现日期。

如果您确实需要在浏览器上更新此信息（例如，要在数据更改时更新显示，请改为写入特定的 DOM 元素：

<span id="time">&nbsp;</span>
<script>
    document.getElementById('time').innerHTML = currentTime();
</script>

您还可以连接到广泛的events that htmx triggers。如果您想在 htmx 执行某些操作时更新浏览器上的信息，这很有效 - 例如，您可以在 htmx 将新的 html 片段加载到 DOM 时更新显示的日期/时间。