angular - ngx daterangepicker 材料不起作用
问题描述
我尝试在我的角度项目中使用 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(),
],
})
解决方案
推荐阅读
- list - 我如何发送带有音乐列表 discord.js 的分页嵌入
- php - Froala PHP SDK 错误:字段名不正确。必须是:文件
- sql - 如何根据不同的条件从其他表中选择字段
- css - 我正在尝试制作圆形虚线,但我在 css 中变得正方形
- ionic-framework - 离子推送通知打开页面,但页面导航混乱
- amazon-web-services - 尝试在 Dynamo DB 中执行数据迁移的奇怪行为
- woocommerce - 使用 WooCommerce wc_get_products 按价格范围过滤产品
- javascript - 添加到 Bull 队列后,对象不再是 Class 的实例
- flutter - 如何触发另一个类的有状态小部件中的函数(当 onUnityAdsFinish 时)?
- azure-devops - 无法从工作帐户管理 Azure DevOps,即使我是组织所有者