2

I try to use ngx-daterangepicker-material in my angular project. I installed it with npm, add it to app-module, and add it to the input-field, but it doesn't shows up in the browser. What have I done wrong?

html (not the entire file)

<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 ( not the entire file)

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 (not the entire file)

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

@NgModule({
  imports: [
    NgxDaterangepickerMd.forRoot(),
  ],
})
Ferenc Bablena
  • 445
  • 1
  • 4
  • 12
  • Add some more detail. Share your app.module.ts file and also the ts file of the respective HTML file where you are using ngxDaterangepickerMd. It is very difficult to identify by only seeing the HTML. – AhmerMH Apr 08 '20 at 12:20
  • thanks Xissor! I hope its enough. – Ferenc Bablena Apr 08 '20 at 14:36
  • Thanks for adding more information. I don't see anything wrong in your code. Try creating a stackblitz demo. If it does not happen on stackblitz, then there is some conflict in your field names/ ids. Also check if the dynamic ID that you are trying to make is working or not. – AhmerMH Apr 08 '20 at 15:32

0 Answers0