как показать выходное значение в браузере

Question

привет м, получая вывод временных интервалов в консоли (в режиме разработчика) я просто хочу показать его в браузере, но он не отображается, вот скриншот моей работы https://ibb.co/9gBH3WL я просто хочу получить вывод с консоли на браузер

код:

   <p>Selected DateTime: <b><span id="showdatetime">[date]</span></b></p>


   dt1 = new Date(st);
dt2 = new Date(en);
alert(dt1);
var timeslot=Math.abs(Math.round(diff_hours(dt1, dt2)/timesslot));
console.log(timeslot);

var temp = [];
var newc=new Date(st);
for( i=0; i<timeslot;i++){

  var current=add_minutes(newc, timesslot);
  newc=current;
  temp[i] = newc.toString();

}

 for(var j = 0; j<temp.length; j++){

 console.log(temp[j]);


 }

  });

  $('.start').click(function() {
     var btn = $(".start").val();
     if(btn=='') {

     $('#field1').text("Enter Some Text In Input Field");
   }
   else{
     alert(btn);
     }
     if(btn=='') {

     $('#field1').text("Enter Some Text In Input Field");
   }
   else{
     alert(btn);
     }
  });


  //$('#showdatetime').text(event.label);
  $('#showdatetime').innerHTML(event.label);

Answer 1

Рассмотрим следующий пример, основанный на примере с jQuery Datepicker.

$(function() {
  // Functions
  function addZero(i) {
    /*--
    Input:
      Integer
    Output:
      String formatted with preceding 0
    --*/
    return (i < 10 ? "0" + i : i);
  }

  function getTime(dObj, m) {
    /*--
    Input:
      Date Object
      Military Format (Boolean) [Option, default: true]
    Output:
      Time (String)
    --*/
    var t;
    if (m == undefined) {
      m = true;
    }
    if (m) {
      var hh = addZero(dObj.getHours());
      var mm = addZero(dObj.getMinutes());
      t = hh + ":" + mm;
    } else {
      t = dObj.toLocaleTimeString();
    }
    return t;
  }

  function addMin(dt, m) {
    /*--
    Input:
      Date Object
      Minutes (Integer)
    Output:
      Sum of Date + Minutes as Date Object
    --*/
    var t = dt.getTime();
    t = t + (1000 * 60 * m);
    return new Date(t);
  }

  function getMinDiff(a, b) {
    /*--
    Input:
      Date Object
      Date Object
    Output:
      Calculated difference of minutes as Integer
    --*/
    var h = b.getHours() - a.getHours();
    var m = b.getMinutes() - a.getMinutes();
    m = m + (h * 60);
    return m;
  }

  function updateTime(d, t, m) {
    /*--
    Input:
      Date Field (Object)
      Time (String)
      Military Format (Boolean) [Optional, Default: true]
    Output:
      Date Object set to Date & Time
    --*/
    if (m == undefined) {
      m = true;
    }
    var hh, mm;
    if (m) {
      // Format: 14:12
      hh = parseInt(t.val().slice(0, 2));
      mm = parseInt(t.val().slice(3));
    } else {
      // Format: 2:12 PM
      var re = /(\d+):(\d+):\d+\s(AM|PM)/i;
      var p = re.exec(t.val());
      hh = parseInt(p[1]);
      mm = parseInt(p[2]);
      if (p[3].toLowerCase() == "pm") {
        if (hh < 12) {
          hh = 12 + hh;
        }
      }
    }
    var ms = Date.parse(d.val());
    var dt = new Date(ms);
    dt.setHours(hh);
    dt.setMinutes(mm);
    dt.setSeconds(0);
    dt.setMilliseconds(0);
    return dt;
  }

  // Initialization
  var dt = $("#datepicker").datepicker({
      onSelect: function(str, obj) {
        var now = new Date();
        now.setSeconds(0);
        now.setMilliseconds(0);
        var then = addMin(now, 30);
        st.val(getTime(now, false)).data("time", now);
        en.val(getTime(then, false)).data("time", then);
      }
    }),
    st = $("#starttime"),
    en = $("#endtime");

  // Event Callbacks
  $(".time").change(function() {
    var nt = updateTime(dt, $(this), false);
    $(this).data("time", nt);
  });

  $("#addevent").click(function() {
    if (dt.val() == "" || st.val() == "") {
      return false;
    }
    $("#showdatetime").html(dt.val() + " " + st.val() + " (" + getMinDiff(st.data("time"), en.data("time")) + " Mins)");
  });
});

.row {
  padding: 0;
  margin: 0;
  list-style: none;
}

.row li em {
  color: red;
}

.row li label {
  display: inline-block;
  width: 100px;
}

.row li input {
  width: 120px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class="row">
  <li><label>Date:</label><input type="text" id="datepicker" class="date" /><em>*</em></li>
  <li><label>Start Time:</label><input type="text" id="starttime" class="time" /><em>*</em></li>
  <li><label>End Time:</label><input type="text" id="endtime" class="time" /><em>*</em></li>
</ul>

<button id="addevent">Add Date</button>
<p>Selected DateTime: <b><span id="showdatetime">[date]</span></b></p>

Чтобы заменить innerHTML элемента на jQuery, вам нужно использовать .html(). Использование .text() устанавливает текстовое содержимое, обновляя textNode, но оно может иметь разные результаты в зависимости от вашей структуры. Обычной практикой является использование .html().

Как видите, вы можете использовать 12 или 24 часа. Существует ряд дополнительных вспомогательных функций для выполнения различных необходимых действий.

Непонятно, чего вы пытаетесь достичь, но я надеюсь, что это поможет. Если вам нужна дополнительная помощь, приведите более полный пример.