在angularjs中将日期和时间转换为毫秒格式的问题答案

【问题标题】：issue with converting date and time to millisecond format in angularjs在angularjs中将日期和时间转换为毫秒格式的问题
【发布时间】：2016-11-24 12:29:49
【问题描述】：

我正在开发一个使用 REST 层与后端通信的 angularjs Web 应用程序。我必须显示工作的日期和时间，但我以毫秒格式接收它。如何转换值以在 UI 上显示日期和时间。

1479982860000     // input
11/24/16          //output date
10:21 AM          //output time

两者都必须存储在 DataModel.date 和 DataModel.time 中。

另外，用户输入一个日期和时间，我必须将它们组合起来，并以相同的毫秒格式发送到 REST 层。我该怎么做？

<input type="time" id="exampleInput1" ng-model="DataModel.time"
                                                placeholder="HH:mm:ss" required/>

<input type="date" id="exampleInput2" ng-model="DataModel.date"
                                                placeholder="yyyy-mm-dd" required/>

我必须将两者结合起来并将其作为 Datamodel.date 发送到控制器中。请帮忙。

【问题讨论】：

标签： angularjs date datetime time

【解决方案1】：

根据documentation，你可以在你的控制器中转换值。

$scope.date = new Date($scope.DataModel.time);
$scope.date= $filter('date')(new Date($scope.DataModel.time), 'yyyy-mm-dd');

和视图：

<input type="date" id="exampleInput2" ng-model="date" placeholder="yyyy-mm-dd" required/>

不要忘记在依赖项中添加 $filter：

app.controller('YourController', ['$scope','$filter', function($scope, $filter) {

}]);

【讨论】：

【解决方案2】：

[这可能适用于您的问题]

https://docs.angularjs.org/api/ng/filter/date

【讨论】：

【解决方案3】：

这里有一个简单的例子来实现你所需要的，

使用

(new Date($scope.milli_seconds)) 获取完整日期。

(new Date($scope.milli_seconds)).toDateString() to get the date from it

(new Date($scope.milli_seconds)).toTimeString() 从中获取时间

(new Date($scope.milli_seconds)).getTime() 将 bact 转换为毫秒

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

  "milliseconds" : {{milli_seconds}} <br>
"full_date" : {{full_date}} <br>
"date" : {{date}} <br>
"time" : {{time}} <br>
"millisecondsreverse" : {{milli_seconds_reverse}} <br>
<br><br>                                               
<input type="time" id="exampleInput1" ng-model="DataModel.time"
                                                placeholder="HH:mm:ss" required/>

<input type="date" id="exampleInput2" ng-model="DataModel.date"
                                                placeholder="yyyy-mm-dd" required/>
                                                
<input type="submit" ng-click="submit_values()" value="getmilliseconds"/> <br>                                               
<span ng-if="milli">Your milliseconds: {{milli}}</span>


</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
		$scope.DataModel = {}
    $scope.milli_seconds = 1479982860000;
    $scope.full_date = (new Date($scope.milli_seconds))
    $scope.date = $scope.full_date.toDateString()
    $scope.time = $scope.full_date.toTimeString()
    $scope.milli_seconds_reverse = $scope.full_date.getTime();
    
    $scope.submit_values = function()
    {
    date = new Date($scope.DataModel.time).toTimeString()
    time = new Date($scope.DataModel.date).toDateString()
    date_time = (new Date($scope.DataModel.date).toDateString())+" "+ (new Date($scope.DataModel.time).toTimeString())
    alert(new Date(date_time).getTime());
    $scope.milli = new Date(date_time).getTime();
    }
});
</script>

</body>
</html>

请运行上面的sn-p

您可以使用过滤器将其转换为您喜欢的不同格式。

Here is a fiddle

【讨论】：

以及如何将输入的日期和时间转换为毫秒
只需使用,getTime(); 方法。 $scope.full_date.getTime();。更新了我的答案。请检查
如何将日期和时间输入转换为毫秒
请立即查看答案
你建议如何结合用户输入的日期和时间来获得完整日期

【解决方案4】：

看看moment.js

在你的 JS 文件中添加配置

/*Configuration to change the date format*/
angular.module('myapp')
    .config(function($mdDateLocaleProvider) {
        $mdDateLocaleProvider.formatDate = function(date) {
            return date ? moment(date).format('DD/MM/YYYY') : '';
     };

        $mdDateLocaleProvider.parseDate = function(dateString) {
            var m = moment(dateString, 'DD/MM/YYYY', true);
            return m.isValid() ? m.toDate() : new Date(NaN);
        };
    })

随心所欲地改变格式

var newFormatDate =moment(oldFormatDate).format();

编辑

如果你想设置特定的时区，

moment().tz("America/Los_Angeles");

MOMENT.JS DOCS

也看timezone identifier

【讨论】：

我有一个疑问。我现在正在使用 moment.js
我需要在美国时区显示日期和时间。所以对于日期我这样做了
DataModel.date=moment(new Date(milliseconds)).tz("Time Zone");
但是我该怎么做呢？我试着用同样的方式来做，但没有用