html - IE 日期选择器太长

问题描述

我有一个对 IE 友好的日期选择器。但是，当我使用它时，它显示的时间太长了。

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

图像显示了日期选择器的显示方式，它穿过屏幕。我觉得问题可能出在 html 布局中，因为每次我使用日期选择器时都不会发生这种情况。

标签： htmlangularinternet-explorerdatepicker

html - IE 日期选择器太长

问题描述

解决方案

推荐阅读