Elm-从js更新日期输入字段不起作用

Elm - Update date input field from js does not work

本文关键字：输入 字段 不起作用 日期 更新 js Elm-      更新时间：2023-09-26

我正在使用elm进行一个项目，但目前我遇到了以下问题：我想更新elm 生成的输入字段

newDate address =
    header
      [ id "header" ]
      [ input
          [ id "datePicker"
          , autofocus False
          , type' "date"
          , onEnter address Add
          ]
          []
      ]

我最初的想法是将.elm代码与html集成，我成功地做到了这一点，使我能够创建自定义的js脚本来与dom交互。

但是，添加以下脚本（将日期设置为当前日期）时，似乎不会更新日期字段。

    $(document).ready( function() {
        var now = new Date();
        var day = ("0" + now.getDate()).slice(-2);
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
        $('#datePicker').val(today);
    });

但是，如果我在浏览器控制台中执行这些代码，它确实有效。

有什么想法吗？

提前感谢！

-K

添加：应要求将elm集成到html 中

<html>
  <head>
    <title>Embedded Elm</title>
    <script type="text/javascript" src="elm.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
    <body>
        <div id="main" style="width:50%; height:400px;"></div>
    </body>
    <script type="text/javascript">
    var mainDiv = document.getElementById('main');
    Elm.embed(Elm.Main, mainDiv);
    $(document).ready( function() {
        var now = new Date();
        var day = ("0" + now.getDate()).slice(-2);
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
       $('#datePicker').val(today);
    });

    </script>
</html>

我想我最初的直觉是准确的，即Elm.embed的行为比我们希望的更异步，并且ready回调在元素出现在DOM中之前就启动了。观察调试器中的事件序列以验证这一点是值得的。

编辑：我自己刚刚快速查看了一下，看起来就像第一个elm帧可以通过调用embed同步渲染。您确信应用程序的初始状态会导致包含该表单组件吗？

在任何情况下，如果你想实现的是用当前日期初始化字段一次，这个问题可能很有用：用当前日期初始化模型

编辑2：另一件可能导致某些问题的事情是在<body>标记关闭后包含<script>标记。这个问题似乎表明这不是一个好主意；也许您也可以尝试在<body>关闭之前包含它？

相关文章：