将日期和时间输入字符串与日期对象相结合

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

在Angular中它会像这样：

控制器：

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>

您需要在变量更改时使用$ Watch侦听器，然后调用您的功能。

注意：如果您为此制定指令，那会更好。

fidle

Answer 2

结合这两个的非常天真的方法是拆分日期组件和时间组件并制作一个字符串。然后使用此字符串进行新的日期对象。

输入是从这里获取的：

<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;

现在创建一个新的日期对象：

var finaldate = new Date(x);

Answer 3

您可以做这样的事情，尽管这与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 4

测试此处描述的所有内容后，我找到了一个非常简单的解决方案。我认为我有

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

在我的角控制器中，两个模型元素默认情况下是类型日期的对象。输入类型=" date"此日期对象的时间始终为00:00。输入类型=" time"日期对象的日期部分设置为今天。因此，我只是阅读定时对象的白天（如果设置）并将其设置在DateObject上。

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

Answer 5

对于那些寻求紧凑版本的人安装Momentjs库。

npm install moment --save 

将其添加到您的文件标题中。

import * as moment from 'moment';

然后只用fluent接口组成 dateTime对象。

let dateTime = moment(this.sdate)
    .startOf('day')
    .set('hour', this.sTime.getHours())
    .set('minute', this.sTime.getMinutes() )
    .toDate();

Answer 6

尝试此

const timeAndDate = moment(this.sdate + ' ' + this.sTime.getHours() + ' '  +  this.sTime.getMinutes());
console.log(timeAndDate.toDate());