AngularJS UI Bootstrap DatePicker Not Functioning Correctly

Question

I have a directive defined as follows:

Template

<div class="date-picker">
    <div class="row">
        <div class="col-md-6">
            <label for="{{datePickerId}}">{{labelText}}</label>
            <p class="input-group">
                <input type="text"
                       id="{{datePickerId}}"
                       class="form-control"
                       datepicker-popup="{{format}}"
                       ng-model="dt"
                       is-open="opened"
                       datepicker-options="dateOptions"
                       disabled="disabled"
                       ng-required="true"
                       close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
        </div>
    </div>
</div>

Directive

//TypeScript

module MyApp.Directives {
    /** Scope for Messaging directive. */
    export interface IMaDatePickerScope extends ng.IScope {
        dt: Date;
        today(): void;
        clear(): void;
        disabled(date, mode): boolean;
        open($event): void;
        opened: boolean;
        dateOptions;
        formats: string[];
        format: string;
    }


    export class MaDatePicker implements ng.IDirective {
        restrict = "E";
        templateUrl = TEMPLATES + 'ma-date-picker.html';
        replace = true;
        transclude = true;
        scope = {
            labelText: '@',
            datePickerId: '='
        }
        link = (scope: IMaDatePickerScope) => {
            scope.today = () => {
                scope.dt = new Date();
            }
            scope.today();

            scope.clear = () => {
                scope.dt = null;
            }
            scope.disabled = (date: Date, mode) => {
                return (mode == 'day' && (date.getDay() === 0 || date.getDay() === 6)); //disable Saturday and Sunday
            }
            scope.open = ($event) => {
                $event.preventDefault();
                $event.stopPropagation();
                scope.opened = true;
            }

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

            scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
            scope.format = scope.formats[0];            
        }
        controller = ($scope: IMaDatePickerScope) => {

        }
    }
}

It is taken from the DatePicker section here and is supposed to function like the popup version shown on that page. Whenever I click the calendar button to initiate the directive, however, the calendar appears in a broken way. Additionally, the calendar keeps expanding to the left when I click on the "next month" arrow in the popup calendar. Is there something wrong in my code? I didn't add any styling with this, as there doesn't seem to be any according to the site, but I wanted to check if there was anything obviously wrong with the code before taking apart my existing styling.

Answer 1

Without seeing which CSS files you may be including, I can't say exactly what the culprit is, although if you are using Twitter Bootstrap along with some other CSS libraries in addition to Angular UI Bootstrap, you most likely have style conflicts from one or more of these other CSS files. The easiest way I have found to isolate these issues is by using the Chrome browser developer tools to examine the CSS overrides and their sources and see exactly where the conflicts were and then updating my custom CSS to fix them. I don't recommend modifying the OTB CSS libraries like Twitter Bootstrap for maintainability. Always use your own custom CSS file. I did have similar issues with the date picker and it took a little digging to find out where they were. It's a hazard of using multiple CSS libraries, if that indeed is what your situation is. Happy hunting!