Angular.js绑定日期时间选择器中的值

Question

我无法从DateTime选择器中显示日期时间。 这是我的HTML代码：

<body ng-app="app" ng-controller="mtCtrl"> 
<div class="col-sm-6">
<label style="font-size:12px" for="" class="">Reporting Time</label>
<div class="input-group date form_datetime" data-date-format="HH:ii P" data-link-field="dtp_reporting_time">
<input ng-model="reportingtime" name="reportingtime" id="reportingtime" class="form-control" size="16" type="text">
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_reporting_time" /><br/>    
</div>

Time : {{reporting_time}}

<script>
var app = angular.module("app", []);
app.controller("mtCtrl", function ($scope) {
$('.form_datetime').datetimepicker({
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
onSelect: function(date){
    angular.element($('#reportingtime')).triggerHandler('input');   
}   
});
$scope.reporting_time = $scope.reportingtime
});
</body>

如果我在此输入中键入一些值，则其显示该值，但是当我从datetime选择器中选择日期时，则不显示该日期或时间。
我想在{{reporting_time}}显示时间...请帮助我。

Answer 1

这个函数应该可以帮助您，因为模块在jquery中，它可能不在角度范围内工作，所以您可能无法在控制器中获取它的值，因此必须在jquery的帮助下手动进行设置

$('.form_datetime')
.datetimepicker()
.on('changeDate', function(ev){
    $scope.reporting_time = ev.date.valueOf();
    console.log($scope.reporting_time);
});

同样输入类型的日期对我来说也很适合

https://plnkr.co/edit/LhF4PBSsQoFOctc0Q5g5?p=preview

Answer 2

您需要将日期时间输入初始化为日期时间选择器。 我建议取代这个

$('.form_datetime').datetimepicker({
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
    onSelect: function(date){
        angular.element($('#reportingtime')).triggerHandler('input');   
     }   
});

与

$('#reportingtime').datetimepicker({
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
    onSelect: function(date){
        angular.element($('#reportingtime')).triggerHandler('input');   
     }   
});

Answer 3

function(date){
    $scope.date = date;
    $scope.formatteddate = ...//format your date as string here
    $scope.$apply();  
}

并将您的ng-model绑定到格式化日期。

为什么$ apply（）？ 由于角度监视仅对他管理的事件做出反应，因此将刷新绑定的值，因为日期选择器不受角度管理，所以输入值将不会同步。 您需要告诉他某些事情发生了变化，他需要做一些事情，这就是$ apply的目的。

Angular.js绑定日期时间选择器中的值

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-06-26 11:43:25

解决方案2
0 2017-06-26 11:41:04

解决方案3
0 2017-06-26 11:56:43

Angular.js绑定日期时间选择器中的值

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-06-26 11:43:25

解决方案2 0 2017-06-26 11:41:04

解决方案3 0 2017-06-26 11:56:43

解决方案1
1 已采纳 2017-06-26 11:43:25

解决方案2
0 2017-06-26 11:41:04

解决方案3
0 2017-06-26 11:56:43