javascript - ui-datepicker-div 在 Angular Directive(指令)中为空

Question

我正在使用 ui-datepicker，它在 chrome 上运行良好，但在 safari 上运行不佳。我还尝试过先将 CSS 文件放在主 index.html 文件中，然后再将 JS 文件放在主文件中。它在底部生成 ui-datepicker-div，但在 Safari 上它是空的。

这是我正在使用的 HTML:

<input type="image" src="images/calendar-icon.jpg" ng-model="selectedWeek" weekpicker format="yy-mm-dd" style="margin-left:10px;" />

这是我正在使用的 JavaScript:

myApp.directive('weekpicker', function () {
        function link(scope, element, attrs, ngModelCtrl, $rootScope) {
            var frmt = "mm/dd/yy";
            if (attrs.format != undefined) {
                    frmt = attrs.format;
            } else if (attrs.placeholder != undefined) {
                    frmt = attrs.placeholder;
            }

            scope.getSunday = function(fromDate) {
                    var curr = new Date(fromDate); // get current date
                    var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
                    var firstday = new Date(curr.setDate(first)).toUTCString();
                    return firstday;
            };
            scope.getWeekDaysRange = function (inputDateString) {
                    return scope.getDates(new Date(inputDateString), (new Date(inputDateString)).addDays(6));
            };
            scope.getDates =    function(startDate, stopDate) {
                    var dateArray = new Array();
                    var currentDate = startDate;
                    while (currentDate <= stopDate) {
                            var curdate = new Date(currentDate);
                            var dateElements = {
                                    day : cal_days_labels[curdate.getDay()],
                                    date : curdate.getDate(),
                                    month : cal_months_labels[curdate.getMonth()],
                                    year : curdate.getFullYear(),
                                    datestamp : curdate.getFullYear()+''+scope.padWithZero(curdate.getMonth()+1)+''+scope.padWithZero(curdate.getDate())
                            };
                            dateArray.push(dateElements);
                            currentDate = currentDate.addDays(1);
                    }
                    return dateArray;
            };

            scope.padWithZero = function(number) {
                    if(number>-10 && number<10) {
                            number = '0'+number;
                    }
                    return number;
            };


            $(element).datepicker({             
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                beforeShow: function(dateText, inst) { 
                },
                onSelect : function(dateText, inst) {
                    current = {day: inst.currentDay, month : inst.currentMonth, year : inst.currentYear};

                    var selectedDateString = new Date(current.year+'-' + (1+current.month) + '-' + current.day);
                    var weekBoundryDates = selectedDateString.getWeekBoundryDaysFromToday();

                    var weekBoundries = weekString(weekBoundryDates);
                    scope.$apply(function() {
                        scope.selectedWeek = weekBoundries;
                    });
                    scope.$digest();
                    scope.$emit("weekselected", inst);
                },
                onClose: function(dateText, inst) {
                }
            });
            scope.$watch(function(scope){
                return scope.selectedWeek;
            }, function(newVal, oldVal){
            });
        };

    return {
        restrict: 'A',
        require: 'ngModel',
        link: link
    };
});

上面的代码在 Chrome 中运行良好，但在 Safari 中则不行。

谁能帮帮我。

Answer 1

Change input type image to text it will work :) 

<input type="text" src="images/calendar-icon.jpg" ng-model="selectedWeek" weekpicker format="yy-mm-dd" style="margin-left:10px;" />