Angularjs 从日期时间选择器绑定值

Question

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

Answer 1

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

$('.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 2

这个函数应该可以让你继续，因为模块在 jquery 中，它可能在 angular 范围之外工作，你可能无法在控制器中获得它的值，所以你必须手动在 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

Answer 3

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

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

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

Angularjs 从日期时间选择器绑定值

Angularjs Bind values from Datetime Picker

javascript

datetime

angularjs

bootstrap-datetimepicker