使用datepicker选择日期值不绑定到模型Angular js

时间:2013-11-15 00:37:59

标签: javascript angularjs datepicker

我正在使用datepicker但是这里面临着关于模型值没有绑定到模型的问题,当我选择日期时没有发生任何事情,任何人都可以告诉我在哪里做错了必须得到赞赏。在这里我发送我的代码。在选择日期值并且不绑定到ng-model =“user.dob”之后,显示日期选择器只是问题。

signUpview.html

<div class="col-md-6">
<label for="datepicker" class="col-lg-5 form-label">Date Of Birth:</label>
    <div class="col-lg-7">
 <input type="text" class="form-control dateBirth" ng-model="user.dob" id="datepicker" name="datepicker" datepicker placeholder="Date Of Birth" required/>
 <div class="error" ng-show="newUser_form.datepicker.$dirty && newUser_form.datepicker.$invalid">
 <small class="error errorFields" ng-show="newUser_form.datepicker.$error.required"> Date is required.</small>
                                </div>
                            </div>
</div>

datepickerDirective.js

app.directive('datepicker', function() {
    var linker = function(scope, element, attrs) {
        element.datepicker().on('changeDate', function(){
            console.log(scope);

            $(".datepicker").hide();
        });
    }
    return {
        require: 'ngModel',
        restrict: 'A',
        link: linker
    }
});

1 个答案:

答案 0 :(得分:0)

您可以使用ngModel.$setViewValue更新模型属性

app.directive('datepicker', function() {
    var linker = function(scope, element, attrs,ngModelCtrl) {
        element.datepicker().on('changeDate', function(){
            console.log(scope);
            ngModelCtrl.$setViewValue(value);//value is datepicker selected date;
            $(".datepicker").hide();
        });
    }
    return {
        require: 'ngModel',
        restrict: 'A',
        link: linker
    }
});