javascript - 选择后显示日期时间

Question

我使用 XDSoft 日期时间选择器作为内联

<form id="dateForm" action="" method="post">

    <div id="test">
    {{ form }}
    </div>
    <script>
        $(function () 
        {
            $("#id_scheduled_time").datetimepicker
            ({
                format: 'd - m - Y H:i',
                inline:true,
                ...
            });
        });
    </script>
</form>

如何在日历旁边显示所选的日期时间值？

我已经尝试过这个:

var logic = function( currentDateTime )
    {
        div = document.getElementById( 'test' )
        div.insertAdjacentHTML( 'beforeend', currentDateTime );
    };

但日历旁边没有显示任何内容。

这有效，但我不想使用警报:

var logic = function( currentDateTime )
    {
       alert( currentDateTime );
    };

Answer 1

我知道您需要在带有 id 测试的 div 之后放置一个以所选日期作为文本内容的新元素。如果是这样，您可以尝试以下方法

function logic(currentDateTime) {
  const test = document.querySelector("div#test");
  let span = test.nextElementSibling;

  if (span.nodeName === "SPAN" && span.textContent.trim() === currentDateTime)
    return;

  if (span.nodeName === "SPAN" && span.textContent.trim() !== currentDateTime) {
    span.textContent = currentDateTime;

    return;
  }

  const node = document.createElement("span");

  node.textContent = currentDateTime;

  test.parentNode.insertBefore(node, test.nextSibling);
}