web-dev-qa-db-ja.com

Bootstrap-datepicker要素をangularjs ng-modelにバインドする方法は？

日付フィールドの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を取得します。これを解決するには？
_angularjsでbootstrap-datepickerを使用するより良い方法はありますか？

私のプロジェクトはjavascriptライブラリで肥大化しているため、angular-ui/angular-strapを使用したくありません。

javascriptjquerytwitter-bootstrapangularjsdatepicker
29
Deepankar Bajpeyi

@lortが示唆するように、datepickerには独自のプライベートスコープがあるため、コントローラーからdatepickerモデルにアクセスできません。

設定した場合：ng-model="parent.checkOut"

コントローラーで定義します：$scope.parent = {checkOut:''};

を使用して日付ピッカーにアクセスできます：$scope.parent.checkOut

23
michaelpoltorak

私は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);

    });

 });
21
Sreekanth Karini

私は同じ問題を抱えており、このように解決します

htmlパーツに追加

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

コントローラー呼び出しでシンプル

$scope.btnPost = function () {

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

私自身、これに対する解決策を見つけました。モデル名をディレクティブに渡すだけです（ほとんどの場合はオンラインで見つけました）。これにより、日付が変更されたときにモデルの値が設定されます。

<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
    }
});
2
user5045936

私はAngular JS 1.5.0 and Bootstrap 3 Datetimepicker from https://eonasdan.github.io/bootstrap- 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();
            });
        }
    };
});

2番目のディレクティブは、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");
                }
            });
        }
    };
});
2
Angelo Ortega

AngularUIブートストラップを試しましたか？これには、すべてのbootstrap角度で書き換えられたモジュール（datepickerを含む）： http://angular-ui.github.io/bootstrap/

1
Jon Snow

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

これは私のために働いた：

セット

ng-model = "date"

angularコントローラで：

 
 $ scope.date = ''; 
 
 $（ '＃check-out'）。datepicker（）。on（ 'changeDate'、function（ ev）{
 $ scope.date = $（ '＃check-out'）。val（）; 
 $ scope。$ digest（）; 
 $ scope。$ watch （ 'date'、function（newValue、oldValue）{
 $ scope.date = newValue; 
}）; 
}）;

私の実際の問題は、スコープの別のコンポーネントが変更されるまでモデルの値が反映されないことでした。

0
user3574453

this を使用するim、および私のコード：

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

    });
0
Hossein Aghatabar

これを解決するために、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モデルは更新されないので、これを使用して修正しました：

$("#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
});
0
Frederik Alexander Vygg Larsen

回避方法の1つ：idフィールドを入力に設定し、document.getElementById（ 'input_name'）。valueを呼び出して入力フィールドの値を取得します。

0
user2789261