Jquery: 如何在 Angular 表带 datetimepicker 值更改时设置监听器?
Jquery: How to put a listener on Angular strap datetimepicker value change?
我必须聆听 angular 表带日期时间选择器值从 jquery
的变化
(不能在angular application/controllers中添加代码或使用anuglar代码).
请提供一种仅使用 Jquery/JScript 的方法。非常感谢
AngularStrap DatetimePicker Documentation
我试过的
$("#datepk").bind('input', function(){alert('value changed');})
$("#datepk").bind('change', function(){alert('value changed');})
$("#datepk").bind('DOMSubtreeModified', function(){alert('value changed');})
以上方法无效。此外,还有一件事是 val()
函数正在返回值,但是当我尝试从 .attr('value')
获取值时,它是 undefined
.
$("#datepk").val(); /// nicely retruning the value
$("#datepk").attr('value'); /// returning undefined
虚拟应用程序
<htm>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script>
var myapp = angular.module('myapp', ['ngAnimate', 'mgcrea.ngStrap']);
myapp.config(function($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd/MM/yyyy',
startWeek: 1
})
});
myapp.controller('myctrl', ['$scope', '$datepicker',
function($scope, $datepicker) {
$scope.selectedDate = "2016-04-28T09:57:58.274Z"; // <- [object Date]
$scope.selectedDateAsNumber = 509414400000; // <- [object Number]
$scope.fromDate = "2016-04-08T18:30:00.000Z"; // <- [object Date]
$scope.untilDate = ''; // <- [object Undefined]
}
]);
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<form name="datepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small>
</label>
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
</div>
</form>
</body>
</htm>
我认为以下几点会对您有所帮助。
将 ng-change
添加到您的输入中。
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker ng-change="myChange()">
并在您的控制器中添加:
$scope.myChange= function(){
console.log($scope.selectedDate);
};
ng-change
每次值改变时都会调用myChange
。
为什么不在日期更改时调用 JavaScript 函数。
var myapp = angular.module('myapp', ['ngAnimate', 'mgcrea.ngStrap']);
myapp.config(function($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd/MM/yyyy',
startWeek: 1
})
});
myapp.controller('myctrl', ['$scope', '$datepicker',
function($scope, $datepicker) {
$scope.selectedDate = "2016-04-28T09:57:58.274Z"; // <- [object Date]
$scope.selectedDateAsNumber = 509414400000; // <- [object Number]
$scope.fromDate = "2016-04-08T18:30:00.000Z"; // <- [object Date]
$scope.untilDate = ''; // <- [object Undefined]
}
]);
$(document).ready(function() {
$("#datepk").on("click", function() {
$(".datepicker table tr td").on("click tap", function(event) {
alert($("#datepk").val())
})
})
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<form name="datepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small>
</label>
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
</div>
</form>
</body>
</html>
我必须聆听 angular 表带日期时间选择器值从 jquery
(不能在angular application/controllers中添加代码或使用anuglar代码).
请提供一种仅使用 Jquery/JScript 的方法。非常感谢
AngularStrap DatetimePicker Documentation
我试过的
$("#datepk").bind('input', function(){alert('value changed');})
$("#datepk").bind('change', function(){alert('value changed');})
$("#datepk").bind('DOMSubtreeModified', function(){alert('value changed');})
以上方法无效。此外,还有一件事是 val()
函数正在返回值,但是当我尝试从 .attr('value')
获取值时,它是 undefined
.
$("#datepk").val(); /// nicely retruning the value
$("#datepk").attr('value'); /// returning undefined
虚拟应用程序
<htm>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script>
var myapp = angular.module('myapp', ['ngAnimate', 'mgcrea.ngStrap']);
myapp.config(function($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd/MM/yyyy',
startWeek: 1
})
});
myapp.controller('myctrl', ['$scope', '$datepicker',
function($scope, $datepicker) {
$scope.selectedDate = "2016-04-28T09:57:58.274Z"; // <- [object Date]
$scope.selectedDateAsNumber = 509414400000; // <- [object Number]
$scope.fromDate = "2016-04-08T18:30:00.000Z"; // <- [object Date]
$scope.untilDate = ''; // <- [object Undefined]
}
]);
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<form name="datepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small>
</label>
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
</div>
</form>
</body>
</htm>
我认为以下几点会对您有所帮助。
将 ng-change
添加到您的输入中。
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker ng-change="myChange()">
并在您的控制器中添加:
$scope.myChange= function(){
console.log($scope.selectedDate);
};
ng-change
每次值改变时都会调用myChange
。
为什么不在日期更改时调用 JavaScript 函数。
var myapp = angular.module('myapp', ['ngAnimate', 'mgcrea.ngStrap']);
myapp.config(function($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd/MM/yyyy',
startWeek: 1
})
});
myapp.controller('myctrl', ['$scope', '$datepicker',
function($scope, $datepicker) {
$scope.selectedDate = "2016-04-28T09:57:58.274Z"; // <- [object Date]
$scope.selectedDateAsNumber = 509414400000; // <- [object Number]
$scope.fromDate = "2016-04-08T18:30:00.000Z"; // <- [object Date]
$scope.untilDate = ''; // <- [object Undefined]
}
]);
$(document).ready(function() {
$("#datepk").on("click", function() {
$(".datepicker table tr td").on("click tap", function(event) {
alert($("#datepk").val())
})
})
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<form name="datepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small>
</label>
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
</div>
</form>
</body>
</html>