Bootstrap-datepicker 요소를 angularjs ng-model과 바인드하는 방법

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어떻게 해결할 것인가?
더 나은 사용법은 없을까?bootstrap-datepicker와 함께angularjs?

사용하고 싶지 않다angular-ui/angular-strapjavascript 라이브러리로 인해 프로젝트가 비대해졌기 때문입니다.

@lort에서 알 수 있듯이 날짜 선택기에는 자체 개인 범위가 있기 때문에 컨트롤러에서 날짜 선택기 모델에 액세스할 수 없습니다.

설정한 경우:ng-model="parent.checkOut"

및 컨트롤러에서 다음을 정의합니다.$scope.parent = {checkOut:''};

다음 명령을 사용하여 날짜 선택기에 액세스할 수 있습니다.$scope.parent.checkOut

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

    });

 });

제가 방금 해결책을 찾았어요모델명을 디렉티브(대부분의 온라인)에 전달합니다.이렇게 하면 날짜가 변경될 때 모델의 값이 설정됩니다.

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

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:

컨트롤러는 뷰모델 Birtdate 속성을 설정합니다.

var app = angular.module('exampleApp',[]);

app.controller('ExampleCtrl',  ['$scope', function($scope) {
    var vm = this;
    vm.Birthdate = "1988-04-21T18:25:43-05:00";
}]);

첫 번째 디렉티브는 datetime picker 초기화 및 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 부분에 추가

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

컨트롤러 호출이 간단함

$scope.btnPost = function () {

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

앵귤러 먹어봤어?UI 부트스트랩?모든 부트스트랩모듈이 각도(날짜 선택기 포함)로 고쳐져 있습니다.http://angular-ui.github.io/bootstrap/

다음 방법 중 하나로 id 필드를 입력으로 설정하고 document.getElementById('input_name')를 호출합니다.value를 지정하여 입력 필드의 값을 가져옵니다.

이 날짜 선택기를 사용했을 때도 같은 문제가 있었습니다.나는 약간의 속임수를 써서 그것을 해결했다.

속성)을 했습니다.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();
});

이 방법은 효과가 있었습니다.

세트

ng-model="날짜"

각도 컨트롤러:

$138.date = ";
$('#check-out').datepicker().on('changeDate'), 함수(ev) {$194.date= $('#check-out').val();$140입니다.$syslog();$140입니다.$watch('date', 함수(newValue, oldValue) {$138.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을 다음과 같이 설정합니다.

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

언급URL : https://stackoverflow.com/questions/19316937/how-to-bind-bootstrap-datepicker-element-with-angularjs-ng-model