IE Datepicker too long - html

Question

I have a date picker that is to be IE friendly. However when I use it, it's displaying far too long.
HTML:
<label class="mr-sm-2" for="startDate">Start Date:</label>
<date-picker
class="mr-sm-2"
name="startDate"
formControlName="startDate">
</date-picker>
datepicker.component.ts:
import * as _ from "lodash" ;
import * as moment from 'moment';
import { Component, Input, forwardRef, ViewEncapsulation } from '#angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '#angular/forms';
#Component({
selector: 'date-picker',
template: `
<ng-container *ngIf="isGoodBrowser; else datePickerFallback">
<input
type="date"
class="form-control text-right"
[class.is-invalid]="invalid"
[(ngModel)]="value"
[disabled]="disabled"
/>
</ng-container>
<ng-template #datePickerFallback>
<div class="fallback-date-picker" [class.invalid]="invalid">
<my-date-picker
[options]="options"
[disabled]="disabled"
[(ngModel)]="value"
(dateChanged)="value = $event">
</my-date-picker>
</div>
</ng-template>
`,
encapsulation: ViewEncapsulation.None,
styles: [
`.fallback-date-picker.invalid .mydp {
border-color: #dc3545;
}`,
`.fallback-date-picker .mydp .selection {
text-align: right;
padding-right: 65px;
}`
],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
}
]
})
export class DatePickerComponent implements ControlValueAccessor {
private _value: any = null;
private propagateChange = _.identity;
isGoodBrowser: boolean = true;
disabled: boolean = false;
options: any = {
dateFormat: 'dd/mm/yyyy',
editableDateField: false
};
constructor() {
const userAgent = window.navigator.userAgent;
if (userAgent.indexOf('MSIE') >= 0) this.isGoodBrowser = false;
if (userAgent.indexOf('Trident') >= 0) this.isGoodBrowser = false;
if (userAgent.indexOf('Edge') >= 0) this.isGoodBrowser = true;
}
#Input() invalid: boolean = false;
#Input()
set value(v: any) {
if (v) {
if (_.isString(v)) {
const mDate = moment(v);
if (this.isGoodBrowser) {
this._value = v;
} else {
this._value = {
date: {
year: mDate.year(),
month: mDate.month() + 1,
day: mDate.date()
}
};
}
this.propagateChange(v);
} else if (v && v.jsdate) {
const mDate = moment(v.jsdate);
this.propagateChange(mDate.format('YYYY-MM-DD'));
} else {
this.propagateChange(null);
}
} else {
this._value = null;
this.propagateChange(null);
}
}
get value() {
return this._value;
}
writeValue(value: any) {
this.value = value ? value : null;
}
registerOnChange(fn: any) {
this.propagateChange = fn;
}
registerOnTouched() { }
setDisabledState(isDisabled: boolean) {
this.disabled = isDisabled;
}
}
The images shows how the date picker displays, it goes across off the screen.
I feel like the problem might be in the html layout as this doesn't happen everytime I use the date picker.

Answer 1

I have solved the issue and it has nothing to do with the code shown.