选择后显示日期时间

Question

我使用XDSoft datetime picker作为内联

<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

为了避免每次选择时都将datetime值附加到HTML中，我执行了以下操作：

        var span= document.getElementById("Div1");
        if (typeof(span) != 'undefined' && span!= null)
        {
           span.textContent = currentDateTime;
        }
        else
        {
            span= document.createElement("div");
            span.setAttribute("id", "Div1");
            span.textContent = currentDateTime;
        }

        const test = document.querySelector("div#test");
        test.parentNode.insertBefore(span, test.nextSibling)

Answer 2

我知道您需要在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);
}