Angular.js绑定日期时间选择器中的值
[英]Angularjs Bind values from Datetime Picker
问题描述
I can't display datetime from DateTime picker. 
我无法从DateTime选择器中显示日期时间。 This is My HTML COde : 这是我的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>
If i am typing some values in this input its showing that values but when i am picking date from datetime picker does not showing that date or time. 如果我在此输入中键入一些值，则其显示该值，但是当我从datetime选择器中选择日期时，则不显示该日期或时间。
I want to show the time in {{reporting_time}} ... Please help me.. Thanks 我想在{{reporting_time}}显示时间...请帮助我。
3 个解决方案
解决方案1
1 已采纳 2017-06-26 11:43:25
This function should get you going, As the module is in jquery,it may be working outside of angular scope you may not be getting it's value in the controller so you have to manually set it with help of jquery 这个函数应该可以帮助您，因为模块在jquery中，它可能不在角度范围内工作，所以您可能无法在控制器中获取它的值，因此必须在jquery的帮助下手动进行设置
$('.form_datetime')
.datetimepicker()
.on('changeDate', function(ev){
$scope.reporting_time = ev.date.valueOf();
console.log($scope.reporting_time);
});
Also input type date works perfectly for me in this plunker 同样输入类型的日期对我来说也很适合
https://plnkr.co/edit/LhF4PBSsQoFOctc0Q5g5?p=preview https://plnkr.co/edit/LhF4PBSsQoFOctc0Q5g5?p=preview
解决方案2
0 2017-06-26 11:41:04
You need to initialize your datetime input as a datetime picker. 您需要将日期时间输入初始化为日期时间选择器。 I would suggest to replace this 我建议取代这个
$('.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');
}
});
with 与
$('#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
0 2017-06-26 11:56:43
function(date){
$scope.date = date;
$scope.formatteddate = ...//format your date as string here
$scope.$apply();
}
And bind your ng-model to the formated date. 并将您的ng-model绑定到格式化日期。
Why the $apply() ? 为什么$ apply（）？ Because angular watch and react only for events that he manages and so will refresh the binded values, since your datepicker is not managed by angular, input value will not be synced. 由于角度监视仅对他管理的事件做出反应，因此将刷新绑定的值，因为日期选择器不受角度管理，所以输入值将不会同步。 You need to tell him that something changed and he needs to do its stuff, which is the purpose of $apply. 您需要告诉他某些事情发生了变化，他需要做一些事情，这就是$ apply的目的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.