Angularjs 绑定来自日期时间选择器的值答案

【问题标题】：Angularjs Bind values from Datetime PickerAngularjs 绑定来自日期时间选择器的值
【发布时间】：2017-06-26 11:02:54
【问题描述】：

我无法从日期时间选择器中显示日期时间。这是我的 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>

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

【问题讨论】：

你能放一个plunker吗？或提供您正在使用的日期时间选择器模块的链接。必须查看您正在使用的模块，因为从中无法调试或了解正在发生的事情。如果您没有特定要求将外部模块用于日期时间选择器。我建议您仅使用 input type=date ，因为它适用于 angularjs
我正在使用这个 datetimepicker http://www.malot.fr/bootstrap-datetimepicker/ 我已经尝试过 type=date 但没有工作...

标签： javascript angularjs datetime bootstrap-datetimepicker

【解决方案1】：

这个函数应该可以帮助你，因为模块在 jquery 中，它可能在角度范围之外工作，你可能无法在控制器中获得它的值，所以你必须在 jquery 的帮助下手动设置它

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

在这个 plunker 中，输入类型日期也非常适合我

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

【讨论】：

【解决方案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');   
     }   
});

【讨论】：

【解决方案3】：

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

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

为什么是 $apply() ？因为角度观察和反应只针对他管理的事件，所以会刷新绑定的值，因为你的日期选择器不是由角度管理的，所以输入值不会被同步。你需要告诉他有些事情发生了变化，他需要做它的事情，这就是 $apply 的目的。

【讨论】：