Проблемы с датой/временем - Moment.js

Я новичок в JS и работал над этой деятельностью, которая, основываясь на пользовательском вводе, создает таблицу для времени поездов (время прибытия/частота/время до следующего поезда) и т. д. У меня возникли проблемы с получением времени, чтобы правильно отображаться, когда я вводил время прибытия (HH: mm - военное время), оно не форматируется правильно, а время не совпадает с введенным временем.Проблемы с датой/временем - Moment.js

Мой JS код:

var trainCounter = 0; 
$(document).on("click", '#addTrain', function() { 

    var nameGiven = $('#trainName').val().trim(); 
    var placeGiven = $('#place').val().trim(); 
    var timeGiven = $('#trainTime').val().trim(); 
    var freqGiven = $('#freq').val().trim(); 
    freqGiven = parseInt(freqGiven); 

    console.log("Name/Place/Time/Frequency: " + nameGiven + "|" + placeGiven + "|" + timeGiven + "|" + freqGiven); 

    var firstTimeConverted = moment(timeGiven, "HH:mm").subtract(1, "years"); 
    console.log("TIME CONVERTED: " + firstTimeConverted); 

    var diffTime = moment().diff(moment(firstTimeConverted), "minutes"); 
    console.log("DIFFERENCE IN TIME: " + diffTime); 

    var timeRemaining = diffTime % freqGiven; 
    console.log(timeRemaining); 

    var minTilTrain = freqGiven - timeRemaining; 
    console.log("MINUTES TILL TRAIN: " + minTilTrain); 

    var nextTrain = moment().add(minTilTrain, "minutes"); 
    console.log("ARRIVAL TIME: " + moment(nextTrain).format("HH:mm")); 

    var row = $('<tr>'); 

    var trainName = $('<td>'); 
    trainName.text(nameGiven); 
    row.append(trainName); 

    var trainPlace = $('<td>'); 
    trainPlace.text(placeGiven); 
    row.append(trainPlace); 

    var trainTime = $('<td>'); 
    moment(nextTrain).format("HH:mm"); 
    trainTime.text(nextTrain); 
    row.append(trainTime); 

    var trainFreq = $('<td>'); 
    trainFreq.text(freqGiven); 
    row.append(trainFreq); 

    var minutesUntilNext = $('<td>'); 
    minutesUntilNext.text(minTilTrain); 
    row.append(minutesUntilNext); 

    var trainLocalStorage = row.prop('outerHTML'); 
    console.log(trainLocalStorage); 
    localStorage.setItem("data-train-" + trainCounter, trainLocalStorage); 

    nameGiven = $('#trainName').val(""); 
    placeGiven = $('#place').val(""); 
    timeGiven = $('#trainTime').val(""); 
    freqGiven = $('#freq').val(""); 

    $('#trainTable').append(trainLocalStorage); 
    trainCounter++; 

    return false; 

}); 

$(document).ready(function() { 

    for(var i = 0; i < localStorage.length; i++) 
    { 
     $('#trainTable').append(localStorage.getItem("data-train-" + trainCounter)); 
     trainCounter++; 
    } 
});

И мой HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Train Schedule</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script> 
    <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="assets/css/style.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 jumbotron"> 
      <h1 class="text-center">TRAIN TIME</h1> 
      <h2 class="text-center">Chooooo Chooooo</h3> 
      <h5 class="text-center">Sheldon Cooper goes wild.</h5> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="panel panel-primary"> 
       <div class="panel-heading"> 
       Current Train Schedule 
       </div> 
        <div class="panel-body" id="trainTableContainer"> 
         <table class="table table-striped" id="trainTable"> 
          <thead> 
           <tr> 
           <th>Train Name</th> 
           <th>Destination</th> 
           <th>Next Arrival</th> 
           <th>Frequency (min)</th> 
           <th>Minutes Away</th> 
           </tr> 
           <tr id="addToThis"> 
           </tr> 
          </thead> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="panel panel-primary"> 
       <div class="panel-heading"> 
       Add Train 
       </div> 
        <div class="panel-body"> 
         <form id="userForm"> 
          <label for="userInput" class="changeText">Train Name</label><br> 
          <input type="text" class="userInput" id="trainName"><br> 
          <label for="userInput" class="changeText">Destination</label><br> 
          <input type="text" class="userInput" id="place"><br> 
          <label for="userInput" class="changeText">First Train Time (HH:mm - military time)</label><br> 
          <input type="text" class="userInput" id="trainTime"><br> 
          <label for="userInput" class="changeText">Frequency (min)</label><br> 
          <input type="text" class="userInput" id="freq"><br> 
          <br> 
          <input id="addTrain" type="submit" class="btn-primary" value="Submit"> 
         </form>     
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
<script type="text/javascript" src="assets/javascript/app.js"></script> 
</body> 
</html>

Если кто-то может взять быстрый взгляд и дайте мне знать, что я пропустил (я смотрел на это для некоторое время, и, возможно, переглядело что-то маленькое), это было бы очень полезно! Кроме того, если это помогает, я создал для него JSFiddle: Fiddle

Спасибо!

источник

2016-08-05 LearningJS888

Проблема в том, что вы не показываете время формования. Изменение

moment(nextTrain).format("HH:mm"); 
trainTime.text(nextTrain);

к:

trainTime.text(moment(nextTrain).format("HH:mm"));

и расчет для NextTrain выключен.

источник

2016-08-05 15:43:05

Я ценю это. Я изменил его на "trainTime.text (moment (nextTrain) .format (" HH: mm "));'. Что неверно в расчете для nextTrain? @ bjr-jean – LearningJS888

«nextTrain» допускает отрицательное время, поэтому, если время начинается с 14 часов, и в настоящее время 12 часов, я могу получить поезд до этого времени .. и метод time.js 'diff' возвращает miliseconds будет модулем на' freqGiven' находится в minuites. Вот скрипка, которую я разветвил: [Рабочее решение] (https://jsfiddle.net/z2o8274h/2/) –

Большое спасибо, @ bjr-jean – LearningJS888

Проблемы с датой/временем - Moment.js

ответ

Смежные вопросы