如何使用angularjs ng-model绑定Bootstrap-datepicker元素？
这是日期字段的html：
$('#check-out').datepicker(); datepicker显示在输入字段中。 但是如果我在我的控制器中执行此操作：
console.log($scope.checkOut);
我undefined in the javascript console 。 怎么解决这个？
有没有更好的方法来使用带有angularjs bootstrap-datepicker angularjs ？
我不想使用angular-ui/angular-strap因为我的项目是用javascript库膨胀的。
正如@lort建议的那样，您无法从控制器访问datepicker模型，因为datepicker有自己的私有范围。
如果设置： ng-model="parent.checkOut"
并在控制器中定义： $scope.parent = {checkOut:''};
您可以使用以下$scope.parent.checkOut访问$scope.parent.checkOut ： $scope.parent.checkOut
我正在使用bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/和angularjs，我和ng-model有同样的问题，所以我使用bootstrap jquery函数获取输入日期值，下面是代码我的控制器，它对我有用。
HTML
调节器
$(function() { //for displaying datepicker $('#datetimepicker').datetimepicker({ viewMode: 'years', format: 'DD/MM/YYYY', }); //for getting input value $("#datetimepicker").on("dp.change", function() { $scope.selecteddate = $("#datetimepicker").val(); alert("selected date is " + $scope.selecteddate); }); });
我从https://eonasdan.github.io/bootstrap-datetimepicker/使用Angular JS 1.5.0和Bootstrap 3 Datetimepicker
经过一段时间的努力，我终于找到了一个解决方案，让它对我有用:)
JSFiddle： http ： //jsfiddle.net/aortega/k6ke9n2c/
HTML代码：
App.js：
只需一个控制器设置viewmodels Birtdate属性：
var app = angular.module('exampleApp',[]); app.controller('ExampleCtrl', ['$scope', function($scope) { var vm = this; vm.Birthdate = "1988-04-21T18:25:43-05:00"; }]);
第一个指令是初始化datetimepicker并监听dp.change事件。
更改后 – ngModel也会更新。
// DatePicker -> NgModel app.directive('datePicker', function () { return { require: 'ngModel', link: function (scope, element, attr, ngModel) { $(element).datetimepicker({ locale: 'DE', format: 'DD.MM.YYYY', parseInputDate: function (data) { if (data instanceof Date) { return moment(data); } else { return moment(new Date(data)); } }, maxDate: new Date() }); $(element).on("dp.change", function (e) { ngModel.$viewValue = e.date; ngModel.$commitViewValue(); }); } }; });
第二个指令是观察ngModel，并在更改时触发输入onChange事件。 这也将更新datetimepicker视图值。
// DatePicker Input NgModel->DatePicker app.directive('datePickerInput', function() { return { require: 'ngModel', link: function (scope, element, attr, ngModel) { // Trigger the Input Change Event, so the Datepicker gets refreshed scope.$watch(attr.ngModel, function (value) { if (value) { element.trigger("change"); } }); } }; });
我有同样的问题并且这样解决
添加在HTML部分
在Controller调用中很简单
$scope.btnPost = function () { var dateFromHTML = $('#datepicker').val();
你试过AngularUI bootstrap吗？ 它具有以角度（包括datepicker）重写的所有引导程序模块： http ： //angular-ui.github.io/bootstrap/
我自己就找到了解决方案。 我只是将模型名称传递给指令（我在网上发现了大部分内容）。 这将在日期更改时设置模型的值。
{{datepickertext}} angular.module('app').directive('datePicker', function() { var link = function(scope, element, attrs) { var modelName = attrs['datePicker']; $(element).datepicker( { onSelect: function(dateText) { scope[modelName] = dateText; scope.$apply(); } }); }; return { require: 'ngModel', restrict: 'A', link: link } });
解决方法之一：将id字段设置为输入，然后调用document.getElementById（’input_name’）。value以获取输入字段的值。
使用这个日期选择器我遇到了同样的问题。 我用一个小技巧解决了它。
在输入标签中，我添加了一个新属性（ dp-model ）：
...
然后在js文件中我以这种方式强制绑定：
$scope.formData.dp = []; // arrays of yours datepicker models $('.dp').datepicker().on('changeDate', function(ev){ $scope.formData.dp[$(ev.target).attr('dp-model')] = $(ev.target).val(); });
这对我有用：
组
NG-模型= “日期”
在角度控制器上：
$ scope.date ='';
$（'＃check-out'）。datepicker（）。on（'changeDate'，function（ev）{
$ scope.date = $（'＃check-out'）。val（）;
$ $范围消化（）;
$ scope。$ watch（'date'，function（newValue，oldValue）{
$ scope.date = newValue;
}）;
}）;
我实际遇到的麻烦是模型的价值没有反映，直到范围上的另一个组件发生变化。
我用这个 ，我的代码：
this.todayNow = function () { var rightNow = new Date(); return rightNow.toISOString().slice(0,10); }; $scope.selecteddate = this.todayNow(); $(function() { //for displaying datepicker $('.date').datepicker({ format: 'yyyy-mm-dd', language:'fa' }); //for getting input value $('.date').on("changeDate", function() { $scope.selecteddate = $(".date").val(); }); });
要解决这个问题，我的HTML看起来像这样：
我的ng-model不会更新，所以我用它来修复它：
$("#datetimepicker1").on("dp.change", function (e) { $scope.date.arrival = $("#arrival").val(); // pure magic $('#datetimepicker2').data("DateTimePicker").minDate(e.date); // this line is not relevant for this example });