[英]how to trigger angular controller function after bootstrap datetimepicker changes
I want to trigger a function inside my angular controller after I change a input with my datetimepicker. 我想用datetimepicker更改输入后在我的角度控制器中触发一个函数。 But how can I implement this?
但是我该如何实现呢? Here is my code so far:
到目前为止,这是我的代码:
HTML: HTML:
<div class="col-md-6">
<div class="input-group">
<input id="fromDateFilter"
type="hidden"
class="input-sm form-control"
placeholder="{{trans('mission/mission.fields.from') }}"
name="from"
/>
<input type="text" class="form-control" id="datepickerFromFilter" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input id="toDateFilter"
type="hidden"
class="input-sm form-control"
placeholder="{{trans('mission/mission.fields.to') }}"
name="to"
/>
<input type="text" class="form-control" id="datepickerToFilter" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Jquery: jQuery的:
$( document ).ready(function() {
var fromFilter = $('#fromDateFilter').val(),
toFilter = $('#toDateFilter').val();
var fromDateFilter = new Date(Date.parse(fromFilter.replace('-','/','g'))),
toDateFilter = new Date(Date.parse(toFilter.replace('-','/','g')));
$('#datepickerFromFilter').datetimepicker({
beforeShow: function (input, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: 100
});
}, 0);
},
dateFormat: "dd.mm.yy",
timeFormat: "HH:mm:ss",
altFormat: "yy-mm-dd",
altTimeFormat: "HH:mm:ss",
altFieldTimeOnly: false,
showSecond: false,
stepMinute: 15,
altField: "#fromDateFilter"
}).datetimepicker("setDate", fromDateFilter);
$('#datepickerToFilter').datetimepicker({
beforeShow: function (input, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: 100
});
}, 0);
},
dateFormat: "dd.mm.yy",
timeFormat: "HH:mm:ss",
altFormat: "yy-mm-dd",
altTimeFormat: "HH:mm:ss",
altFieldTimeOnly: false,
showSecond: false,
stepMinute: 15,
altField: "#toDateFilter"
}).datetimepicker("setDate", toDateFilter);
});
AngularJS: AngularJS:
app.controller('missionController', function($scope, $http, $attrs) {
$scope.apiUrl = '/ajax/mission';
$scope.missions = [];
$scope.searchActualMissions = function(from, to) {
$http.post($scope.apiUrl+'/actual', {
from: from,
to: to
}).success(function(data, status, headers, config) {
$scope.missions = data;
});
};
});
I strongly recommend you to look into ui-bootstrap
, it's a collection of angular-directives with bootstrap functions, this way you can do all of your bootstrap stuff the 'angular way'. 我强烈建议您研究
ui-bootstrap
,它是具有自举功能的角度指令的集合,这样您就可以“角度方式”进行所有自举。
https://angular-ui.github.io/bootstrap/ https://angular-ui.github.io/bootstrap/
HTML
HTML
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" ng-change="fun()" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" ng-change="fun()" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
JS
JS
$scope.fun=function()
{
console.log('hellllllllllllo');
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.