Объединение строк ввода даты и времени в качестве объекта даты

Question

У меня есть два входных тега для выбора даты и времени от пользователя.

<p>Start Date</p><p> <input ng-model="sdate" type="date" ></p> 
<p>Start Time</p><p> <input ng-model="stime" type="time" ></p> 

Эти два значения передаются в функцию, где я хочу, чтобы объединить эти два входных значения в качестве Date объекта:

new Date(y, m, d, hh, mm, a) 

Что я могу затем использовать для построения детали для события, в календаре. Как я могу объединить эти два значения? Я пробовал:

start:new Date(sdate + stime) 


start:new Date(sdate , stime) 


start: new Date(sdate.getFullYear() + sdate.getMonth() + sdate.getDate() + stime.getHours + stime.getMinutes()) 

Но ни одно из того, что я пробовал, работает.

Как достичь этого при использовании AngularJS?

Answer 1

В Угловое он бы что-то вроде этого:

Контроллер:

function exampleController($scope) { 
    $scope.title = "$Watch sample"; 

    $scope.$watch('sdate', function() { 
     tryCombineDateTime(); 
    }); 

    $scope.$watch('stime', function() { 
     tryCombineDateTime(); 
    }); 

    function tryCombineDateTime() { 
     if($scope.sdate && $scope.stime) { 
      var dateParts = $scope.sdate.split('-'); 
      var timeParts = $scope.stime.split(':'); 

      if(dateParts && timeParts) { 
       dateParts[1] -= 1; 
       $scope.fullDate = new Date(Date.UTC.apply(undefined,dateParts.concat(timeParts))).toISOString(); 
      } 
     } 
    } 
} 

HTML

<div ng-app ng-controller="exampleController"> 
    <h2>{{title}}</h2> 
    <p>Start Date</p><p> <input ng-model="sdate" type="date" ></p> 
    <p>Start Time</p><p> <input ng-model="stime" type="time" ></p> 

    {{fullDate}} 
</div> 

Вы должны использовать в $ часов слушателя на переменную, когда она меняется, а затем вызвать вашу функцию.

Примечание: было бы лучше, если бы вы сделали для этого директиву.

Fidle

Answer 2

Вы можете сделать что-то подобное, хотя это не имеет никакого отношения к AngularJS, и я не могу протестировать старые браузеры. Я предполагаю, что вы вводите дату/время как UTC, и я использую Date для создания метки времени ISO8601 в качестве выхода. Также предполагается, что вы используете современный браузер, который поддерживает HTML5 и ECMA5, в противном случае вам нужно будет изменить код.

HTML

<p>Start Date</p><p> <input id="myDate" ng-model="sdate" type="date" ></p> 
<p>Start Time</p><p> <input id="myTime" ng-model="stime" type="time" ></p> 
<div id="myIso"></div> 

Javasceipt

var myIso = document.getElementById('myIso'), 
    dateParts, 
    timeParts; 

function joinPartsAsDate() { 
    if (dateParts && dateParts.length === 3 && timeParts && timeParts.length === 2) { 
     // dateParts[1] -= 1; could be done here 
     myIso.textContent = new Date(Date.UTC.apply(undefined, dateParts.concat(timeParts))).toISOString(); 
    } else { 
     myIso.textContent = ''; 
    } 
} 

document.getElementById('myDate').addEventListener('change', function (e) { 
    dateParts = e.target.value.split('-'); 
    if (dateParts[1]) { // this could be done in joinPartsAsDate, here for clarity 
     dateParts[1] -= 1; 
    } 

    joinPartsAsDate(); 
}, false); 

document.getElementById('myTime').addEventListener('change', function (e) { 
    timeParts = e.target.value.split(':'); 
    joinPartsAsDate(); 
}, false); 

На jsFiddle

Answer 3

очень наивный подход, чтобы объединить эти два, чтобы разделить финиковые компоненты и временные компоненты и сделать строку. Затем создайте новый объект Date, используя эту строку.

Input взят отсюда:

<p>Start Date</p><p> <input ng-model="sdate" type="date" ></p> 
<p>Start Time</p><p> <input ng-model="stime" type="time" ></p> 

Затем в сценарий части, расщепленные даты и времени компоненты следующим образом:

 var dd = new Date(sdate).getDate(); 
     var mm = new Date(sdate).getMonth()+1; 
     var yy = new Date(sdate).getFullYear(); 
     var hh = new Date(stime).getHours(); 
     var ms = new Date(stime).getMinutes(); 

Затем Объедините эти компоненты, чтобы сформировать строку по мере необходимости (в Календаре):

var x = yy + ',' + mm + ',' + dd + ' ' + hh + ':' + ms; 

Теперь создайте новый объект Date:

var finaldate = new Date(x); 

Answer 4

После тестирования всего, что описано здесь, я нашел очень простое решение. На моем взгляде, у меня есть

<input type="date" ng-model="tsc.untilDate"> 
<input type="time" ng-model="tsc.untilTime"> 

В моем угловом контроллере обе модели элементы объекты типа Date по умолчанию. С типом ввода = "дата" время этого объекта Date всегда 00:00. С типом ввода = «время» дата-дата объекта Date ist всегда установлена ​​на сегодняшний день. Так что я просто прочитал дневной (если установлен) объект TimeDate и установил его в DateObject.

if(tsc.untilTime) 
{ 
    tsc.untilDate.setHours(tsc.untilTime.getHours()); 
    tsc.untilDate.setMinutes(tsc.untilTime.getMinutes()); 
}