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

时间:2016-11-24 12:29:50

标签: angularjs date datetime time

我正在开发一个angularjs Web应用程序,它使用REST层与后端进行通信。我必须显示作业的日期和时间,但我会以毫秒格式收到它。如何转换值以在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发送到控制器中。请帮忙。

4 个答案:

答案 0 :(得分:0)

查看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();

<强> EDITS

如果要设置特定时区,

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

MOMENT.JS DOCS

另请参阅timezone identifier

答案 1 :(得分:0)

这是一个实现您需要的简单示例,

使用

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

请运行以上代码段

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

Here is a fiddle

答案 2 :(得分:0)

根据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) {

}]);

答案 3 :(得分:0)

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

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