2

我尝试在我的角度项目中使用 ngx-daterangepicker-material。我用 npm 安装了它，将它添加到 app-module，并将其添加到输入字段，但它没有显示在浏览器中。我做错了什么？

html（不是整个文件）

<input
    ngxDaterangepickerMd
    [(ngModel)]="selected"
    type="text"
    class="form-control"
    [class.invalid]="model.validationErrors.includes(field_name)"
    [name]="field_name + '_' + random"
    [id]="field_name + '_' + random"
    [placeholder]="getPlaceholder()"
    [title]="getTitle()"
    [disabled]="disabled"
    (change)="change($event)"
  />

component.ts（不是整个文件）

import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { BaseModel } from 'src/app/models/base-model/base-model.model';
import { ValidatorService } from 'src/app/services/validator/validator.service';
import { Moment } from 'moment';
import { LocaleConfig } from 'ngx-daterangepicker-material';

@Component({
  selector: 'app-date-field',
  templateUrl: './date-field.component.html',
  styleUrls: ['./date-field.component.scss']
})
export class DateFieldComponent implements OnInit, OnChanges {
  selected: {startDate: Moment, endDate: Moment};
  @Input() field_name = 'date_field_name_not_defined';
  @Input() model: BaseModel = new BaseModel();
  @Input() disabled = false;

  alwaysShowCalendars: boolean;

  locale: LocaleConfig = {
    format: 'YYY-MM-DD',
    displayFormat: 'YYYY MMMM DD',
    separator: ' To ',
    cancelLabel: 'Mégse',
    applyLabel: 'Ok',
  };

  constructor(private validatorService: ValidatorService,) {
    this.alwaysShowCalendars = true;
  }

  ngOnInit() {}

  // ngx-daterangepicker-material
  isInvalidDate(date) {
    return date.weekday() === 0;
  }
  isCustomDate(date) {
    return  (
      date.weekday() === 0 ||
      date.weekday() === 6
    )  ? 'mycustomdate' : false;
  }

  change(vat) {
    console.log(vat);
  }

  validateField() {
    if (!this.validatorService.validate(this.model[this.field_name], this.model.validationRules[this.field_name])) {
      if (!this.model.validationErrors.includes(this.field_name)) {
        this.model.validationErrors.push(this.field_name);
      }
    } else {
      if (this.model.validationErrors.includes(this.field_name)) {
        this.model.validationErrors.splice( this.model.validationErrors.indexOf(this.field_name), 1);
      }
    }
  }

  getTitle() { return this.field_name; }
  getLabel() { return this.field_name; }
  getPlaceholder() { return this.field_name; }

}

app.module.ts（不是整个文件）

import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';

@NgModule({
  imports: [
    NgxDaterangepickerMd.forRoot(),
  ],
})
4

0 回答 0