Блог

Главная - Вопросы по программированию - Как получить входные данные из календаря и распечатать дату с помощью JavaScript и HTML

Как получить входные данные из календаря и распечатать дату с помощью JavaScript и HTML

#javascript #html

#javascript #HTML

Вопрос:

Прежде всего, я очень новичок в использовании JavaScript с HTML. Прямо сейчас у меня есть календарь, в котором пользователь может выбрать нужную дату. При выборе я хочу, чтобы дата была напечатана на веб-сайте на данный момент. Поэтому, если пользователь выбирает 13.10.2019, я хочу, чтобы 13.10.2019 печатался в моем Я хочу распечатать дату сразу, когда пользователь нажимает нужную дату. Любые советы о том, как это сделать? Вот что у меня есть прямо сейчас.

 <html>

<head>
   <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
   <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
</head>

<body>
<div style= text-align:center>
    <input id="datepicker"  onclick="print()" type="text">
    </div>

<p> Testing my Calender input </p>
<p id="demo"></p>


<script type="text/javascript">

    var datepicker = new ej.calendars.DatePicker({ width: "300px" });
    datepicker.appendTo('#datepicker');



    function print()
    {
      var input = document.getElementById("datepicker").value;

      document.getElementById('demo') = input;

    }

</script>



 </body>

</html>

Комментарии:

1. Вы почти правы, просто добавьте .textContent или .innerText между document.getElementById('demo') и = input; . Кроме того, я рекомендую использовать onchange event вместо onclick …

2. document.getElementById(‘demo’).innerText = input; Я изменил его на это, но я не получаю никаких результатов на своем веб-сайте

3. Используйте событие onchange вместо onclick … и я рекомендую избегать встроенных прослушивателей, но их использование не вызовет проблем.

4. хммм, я изменил его, но он все еще не отображается, я не знаю, что-то не так с моей стороны.

Ответ №1:

Проблема в том, что при выборе даты указатель даты обновит входные данные, но обновление входных данных программно не вызывает change событие.

Я вижу 2 варианта (вероятно, их больше), чтобы исправить это:

  • Приблизительное решение: прослушивание blur события
  • (Более) сложное решение: используйте наблюдателя мутаций в теле и узнайте, когда указатель даты закрыт (элемент удален)