ui-datepicker-div is empty in angular directive

Question

I am using ui-datepicker and it is working fine on chrome but not on safari. I have also tried by putting CSS file first and then JS file in my main index.html file. It is generating ui-datepicker-div in bottom but it is empty on Safari.

Here is HTML i am using:

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

and here is JavaScript i am using:

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

the above code is working fine in Chrome, but not in Safari.

Can anyone help me please.

I think problem in input type please check that by change input type text in place of image. — Sourabh
– Sourabh, Commented Nov 22, 2017 at 15:39

Sourabh · Accepted Answer · 2017-11-22 16:18:01Z

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;" />

edited Nov 22, 2017 at 16:18

answered Nov 22, 2017 at 15:54

Sourabh

5002 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ui-datepicker-div is empty in angular directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related