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>

当变量发生变化时，你需要在变量上使用$ watch监听器，然后调用你的函数。

注意：如果你为此做出指示会更好。

Fidle

Answer 2

将这两者结合起来的一种非常天真的方法是分割日期组件和时间组件并创建一个字符串。然后使用此字符串创建一个新的Date对象。

输入来自此处：

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

在我的Angular Controller中，默认情况下，两个模型元素都是Date类型的对象。输入类型=＆＃34;日期＆＃34;此Date对象的时间始终为00:00。输入类型=＆＃34;时间＆＃34; Date对象的日期部分总是设置为今天。所以我只读取TimeDate对象的白天（如果已设置）并将其设置在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';

然后只需使用流畅的界面组成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());

将Date和Time输入字符串组合为Date对象

6 个答案: