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(),
],
})