如何将 Bootstrap-datepicker 元素与 angularjs ng-model 绑定？答案

【问题标题】：how to bind Bootstrap-datepicker element with angularjs ng-model?如何将 Bootstrap-datepicker 元素与 angularjs ng-model 绑定？
【发布时间】：2016-04-19 03:21:24
【问题描述】：

这是日期字段的 html：

<div class='form-group'>
  <label>Check out</label>
    <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out">
</div>
<script>
$('#check-out').datepicker();
</script>

日期选择器显示在输入字段中。但是，如果我在我的控制器中这样做：

console.log($scope.checkOut);

我收到undefined in the javascript console。如何解决这个问题？
有没有更好的方法来使用bootstrap-datepicker 和angularjs ？

我不想使用 angular-ui/angular-strap，因为我的项目充满了 javascript 库。

【问题讨论】：

试试ng-model="$parent.checkOut"
您不能在$digest 循环之外绑定到datepicker()。
尝试将 Angular-UI-Bootstrap 的 datepicker 指令与 Bootstrap 一起使用，我已经将它与 Bootstrap 2 和 3 一起使用并且效果很好 - angular-ui.github.io/bootstrap/#/datepicker（我应该注意你可以只包含指令脚本如果你担心库膨胀，Angular-UI-Bootstrap 日期选择器）
您可以在此处仅使用日期选择器创建自定义 Angular-UI-Bootstrap 缩小库：angular-ui.github.io/bootstrap/#/getting_started
我想指出，如果您使用的是 AngularJS 1.3+，则 angular-ui 引导程序目前不是一个可行的选择这是一个已知问题：github.com/angular-ui/bootstrap/issues/2830

标签： javascript jquery twitter-bootstrap angularjs datepicker

【解决方案1】：

正如@lort 建议的那样，您无法从控制器访问 datepicker 模型，因为 datepicker 有自己的私有范围。

如果你设置：ng-model="parent.checkOut"

并在控制器中定义：$scope.parent = {checkOut:''};

您可以使用以下方式访问日期选择器：$scope.parent.checkOut

【讨论】：

@lort 对 ng-model="$parent.checkOut" 的建议对我有用。
把我的脑袋搞坏了——查看isolateScope以获得更好的理解
我不太明白你的回答，我们应该乱写你写的东西吗？或者在父 div 中设置 ng-model 指令

【解决方案2】：

我正在使用 bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/ 和 angularjs，我在使用 ng-model 时遇到了同样的问题，所以我使用 bootstrap jquery 函数获取输入日期值，下面是我控制器中的代码，它对我有用。

HTML

<input class="form-control" name="date" id="datetimepicker" placeholder="select date">

控制器

$(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);

    });

 });

【讨论】：

只是想说这是唯一接近为我工作的答案。 +1，谢谢
这对我有用，除了调用 val() 不起作用的小例外。该事件收到一个包含新日期（作为时刻实例）的“e”参数，所以我的代码是 $scope.selecteddate = e.date.toDate();
截至 2018 年 2 月，这仍然是最好的解决方法，我现在无法表达这对我有多大帮助。

【解决方案3】：

我自己刚刚找到了解决方案。我只是将模型名称传递给指令（我在网上找到了大部分）。这将在日期更改时设置模型的值。

<input data-ng-model="datepickertext" type="text" date-picker="datepickertext" />{{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
    }
});

【讨论】：

【解决方案4】：

我正在使用来自https://eonasdan.github.io/bootstrap-datetimepicker/ 的 Angular JS 1.5.0 和 Bootstrap 3 Datetimepicker

经过一段时间的努力，我终于找到了一个解决方案如何让它为我工作:)

JSFiddle：http://jsfiddle.net/aortega/k6ke9n2c/

HTML 代码：

  <div class="form-group col-sm-4" >
     <label for="birthdate" class="col-sm-4">Birthday</label>
     <div class="col-sm-8">
       <div class="input-group date" id="birthdate"  ng-model="vm.Birthdate" date-picker>
         <input type="text" class="form-control netto-input"  ng-model="vm.Birthdate" date-picker-input>

         <span class="input-group-addon">
           <span class="glyphicon glyphicon-calendar"></span>
         </span>
       </div>
     </div>
  </div>
 <div class="form-group col-sm-4">
     <label for="birthdateText" class="col-sm-4">Model:</label>
     <div class="col-sm-8">
         <input type="text" class="form-control netto-input"  ng-model="vm.Birthdate">
     </div>
  </div>
</body>

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");
                }
            });
        }
    };
});

【讨论】：

【解决方案5】：

我有同样的问题，这样解决

在html部分添加

<input class="someting" id="datepicker" type="text" placeholder="Dae" ng-model=""/>

控制器调用简单

$scope.btnPost = function () {

          var dateFromHTML = $('#datepicker').val();

【讨论】：

【解决方案6】：

您尝试过 AngularUI 引导程序吗？它具有以角度重写的所有引导模块（包括日期选择器）：http://angular-ui.github.io/bootstrap/

【讨论】：

这不再适用于 AngularJS 1.3+，请参阅：github.com/angular-ui/bootstrap/issues/2830
我不知道日期选择器，但我正在使用其他一些 ui-bootstrap 模块和 Angular 1.3.15 并且我没有遇到任何问题。

【解决方案7】：

一种解决方法：将id字段设置为输入，然后调用document.getElementById('input_name').value获取输入字段的值。

【讨论】：

【解决方案8】：

使用this datepicker 我遇到了同样的问题。我用一个小技巧解决了它。

在输入标签中我添加了一个新属性（dp-model）：

<input class="form-control dp" type="text" dp-model="0" />
<input class="form-control dp" type="text" dp-model="1" />
...

然后在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();
});

【讨论】：

【解决方案9】：

这对我有用：

设置

ng-model="日期"

在您的角度控制器上：

$scope.date = ''; $('#check-out').datepicker().on('changeDate', function (ev) { $scope.date= $('#check-out').val(); $scope.$digest(); $scope.$watch('date', function (newValue, oldValue) { $scope.date=新值； }); });

我真正的麻烦是模型的价值直到范围上的另一个组件被改变时才反映。

【讨论】：

【解决方案10】：

我使用 this 和我的代码：

    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();
        });

    });

【讨论】：

【解决方案11】：

为了解决这个问题，我的 HTML 如下所示：

<div class='input-group date' id='datetimepicker1'>
<input type='text' ng-model="date.arrival" name="arrival" id="arrival" 
     class="form-control" required />
     <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
     </span>
</div>

我的 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
});

【讨论】：