扩展 Angular-UI 日期选择器指令

Question

我经常使用ui-Angular-ui-bootstrap中的ui-datepicker，但每次使用它时，我都需要设置它向上，我每次都这样做。所以我想知道我是否可以创建一个名为 custom-datepicker 的指令，我可以像

<custom-datapicker>

这样我就可以在指令中设置一次，然后在我网站的任何地方重复使用它。

我尝试创建一个如下所示的指令

app.directive('customDatapicker', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        templateUrl: function (elem, attrs) {
            return '/AngularJS/Directives/customDatapicker.html'
        },
        link: function (scope, element, attrs, ngModel) {
        $scope.inlineOptions = {
            showWeeks: true
        };

        $scope.dateOptions = {
            formatYear: 'yy',
            startingDay: 1
        };


        $scope.open = function () {
            $scope.opened = true;
        };

        $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];

        $scope.selected = {
            opened: false
        };

        },
});

我也在尝试使用模板，这样我就可以围绕它做一些自定义 html 包装。到目前为止，除了示例 html from

我什么都没有

模板HTML

<p class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="ngModel" is-open="selected.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>

在模板 html 中，我试图通过执行 ng-mode='ngModel' 在日期选择器的 ng-model 中绑定我的指令输入模型，我认为这不是是正确的方法。

我在我的 html 页面中使用我的指令，其中 data 是一个 JS 日期对象

<custom-datapicker ng-model='data'>

这可以做到吗？

Answer 1

不要在自定义指令上使用 ng-model，而是定义一个自定义属性，然后将该值传递到日期选择器的 ng-model 属性中。

<custom-datepicker customAttrib="val" ...

然后在模板中：

<input ng-model="{{customAttrib}}" ...

Answer 2

有趣的是，我今天一直在看一些非常相似的东西。您可以使用双向绑定传递您的模型，并且它大部分都有效。

<my-datepicker ng-model="myDateModel"></my-datepicker>

指令：

scope: {
    ngModel: '='
}

模板：

<input type="text" ng-model="ngModel" />

问题是，如果您在使用日期选择器之外操作模型，则指令中的模型类（ng-valid、ng-touched 等）不会更新。输入和表单上的类执行...

扩展 Angular-UI 日期选择器指令

Extend Angular-UI Datepicker directive

angularjs

angularjs-directive

angular-ui-bootstrap

angular-ui-datepicker