Search code examples
angulareonasdan-datetimepicker

ng2-eonasdan-datetimepicker css not being applied properly

Got the ng2-eonasdan-datetimepicker into my project, but I don't think the CSS is being applied properly and I'm not sure why. This is what it looks like now, vs what it SHOULD look like...

enter image description here

In my component I use:

styleUrls: ['../../../css/bootstrap.min.css',
            '../../../css/bootstrap-datetimepicker.min.css']

and I have those files in-place copied from a cdn.

It seems that "bootstrap.min.css" is working, because when I remove it the calendar won't open at all, but if I remove "bootstrap-datetimepicker.min.css" than it looks EXACTLY the same, so I think the problem is there.

HTML:

                <div class="form-group">
                <div class="input-group">
                    <input class="form-control" 
                    a2e-datetimepicker
                    [date]="date"
                    [options]="a2eOptions"
                    (onChange)="dateChange($event)"
                    (onClick)="dateClick()"
                    />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
            </div>

Class:

export class DateTimePicker implements OnInit {

  date: moment.Moment;
  a2eOptions: any;

  dateChange(date) {
    this.date = date;
  }

  dateClick() {
    console.log('click click!')
  }

  getTime() {
    alert('Selected time is:' + this.date);
  };

  addTime(val, selector) {
    this.date = moment(this.date.add(val, selector));
  };

  clearTime() {
    this.date = null;
  };

  constructor(){
      this.date = moment();
      this.a2eOptions = {format: 'YYYY/MM/DD HH:mm'};
  }

  ngOnInit(): void {
    console.log(datetimepicker);
  }

}

Not getting any errors.

UPDATE:

I want to keep the stypes in this component only. Tried doing this, but it leaked out and ruins the page of any component that includes it.

styles: ['
    @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
    @import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css";
']
Solution

  • You need to remove the styleUrl for your date picker and just add the cdn to your index.html file. here is the cdn

    href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepick‌​er/4.17.43/build/css‌​/bootstrap-datetimep‌​icker.min.css">