制作AngularUI日期选择器的实际指令 [英] Making AngularUI datepicker an actual directive

问题描述

我试图把角UI的日期选择器成实际的指令。

I'm trying to turn angular-ui's date-picker into an actual directive.

我可以用正确的模型和格式显示在页面上，但这种切换不会为我工作（尝试通过属性来命名它）。

I can display it on the page with the correct model and format, but the toggling doesn't work for me (trying to name it via the attributes).

下面是我的code：
我的HTML

Here is my code: My html

<date-picker data-format="dd/MM/yyyy" data-model-name="dateReviewed" data-ng-model="oneWMS.dateReviewed" data-status="statusDateReviewed" data-opened="openDateReviewed"></date-picker> 

我的指令

function datePicker() {
          return {
            restrict: 'AE',
            require: 'ngModel',
            scope: {
                format: '@',
                mod: '=ngModel',
                status: '@',
                opened: '@'

                },
            template: '<div class="input-group">' +
                     '<input type="text" class="form-control" datepicker-popup="{{format}}" data-ng-model="mod" is-open="status.opened" ng-required="true" close-text="Close" />' +
                     '<span class="input-group-btn">' +
                     '<button type="button" class="btn btn-default" ng-click="opened($event)"><i class="glyphicon glyphicon-calendar"></i> </button>' +
                     '</span>' +
                 '</div>',
            link: function(scope, iElement, iAttrs) {
                    // all the directive code
                    console.log(iAttrs.format); // dd/MM/yyyy
                    console.log(iAttrs.ngModel); //  oneWMS.dateReviewed
                    console.log(iAttrs.status); // statusDateReviewed
                    console.log(iAttrs.opened); // openDateReviewed
                    console.log(iAttrs.modelName); // dateReviewed

                    var modelStatusDate = iAttrs.status;
                    var modelOpenDate = iAttrs.opened;
                    var modelName = iAttrs.modelName;

                    scope.today = function() {
                        scope.modelName = new Date();
                        scope.dateApproved = new Date();
                      scope.today();

                      scope.clear = function () {
                        scope.modelName = null;
                      };

                      scope.modelOpenDate = function($event) {
                        scope.modelStatusDate.opened = true;
                      };

                      scope.modelStatusDate = {
                        opened: false
                      };


                      scope.getDayClass = function(date, mode) {
                        if (mode === 'day') {
                          var dayToCheck = new Date(date).setHours(0,0,0,0);

                          for (var i=0;i<scope.events.length;i++){
                            var currentDay = new Date(scope.events[i].date).setHours(0,0,0,0);

                            if (dayToCheck === currentDay) {
                              return scope.events[i].status;
                            }
                          }
                        }

                        return '';
                      };

                } // link
          } // return
    } // picker
    }

不知道是不是刚刚开放的选择器不工作或日期选择也将失败。

Don't know if just opening the picker doesn't work or if the date selecting will fail as well.

推荐答案

我已经用angularui日期选择器自定义日期指令。看看，这可能是对你有用。这里是plunkr URL。 http://plnkr.co/edit/FDigEjyMYm5SVYnQyZGp 。

I have made a custom date directive using angularui date-picker. Have a look, it might be useful to you. Here is plunkr url . http://plnkr.co/edit/FDigEjyMYm5SVYnQyZGp.

这篇关于制作AngularUI日期选择器的实际指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！