[英]How to disabled picked date in daterangepicker connected to database
[英]how to get date value of ngx-daterangepicker-material?
我正在使用 ngx-daterangepicker-material 创建范围日期。 我想在按下提交按钮后获取开始日期和结束日期值来过滤表格!
HTML代码
<form [formGroup]="filtreForm" (ngSubmit)="onSubmit()">
<div style=" display: flex; flex-wrap: wrap; justify-content: center;">
<!-- <div style="display: flex; flex-wrap: wrap; justify-content: center;">-->
<!-- <div style=" width: 140px; display: flex; padding-left: 10px; padding-right: 10px;">-->
<!-- <mat-form-field>-->
<!-- <input matInput [matDatepicker]="picker" formControlName="dateDu" style=" color: #333333;">-->
<!-- <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>-->
<!-- <mat-datepicker touchUi #picker disabled="false"></mat-datepicker>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div style=" width: 140px; display: flex; padding-left: 10px; padding-right: 10px;">-->
<!-- <mat-form-field>-->
<!-- <input matInput [matDatepicker]="picker1" formControlName="dateAu" style=" color: #333333;">-->
<!-- <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>-->
<!-- <mat-datepicker touchUi #picker1 disabled="false"></mat-datepicker>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </div>-->
<!-- Start-DatePicker-->
<div class="row">
<div class="col s6">
<input type="text"
ngxDaterangepickerMd
[(ngModel)]="selected"
[showCustomRangeLabel]="true"
[alwaysShowCalendars]="alwaysShowCalendars"
[ranges]="ranges"
[showClearButton]="true"
[showCancel]="true"
[linkedCalendars]="true"
[isTooltipDate] = "isTooltipDate"
[isInvalidDate] = "isInvalidDate"
[locale]="{applyLabel: 'Done'}"
(rangeClicked)="rangeClicked($event)"
(datesUpdated)="datesUpdated($event)"
[keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
[showRangeLabelOnInput]="showRangeLabelOnInput"
class="form-control"
placeholder="Select please..."/>
</div>
</div>
<!--End -DatePicker-->
<div style="min-width: max-content; max-width: max-content;">
<button type="submit" mat-mini-fab color="primary"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
键入脚本文件:
//Datepicker
selected: any;
alwaysShowCalendars: boolean;
showRangeLabelOnInput: boolean;
keepCalendarOpeningWithRange: boolean;
maxDate: dayjs.Dayjs;
minDate: dayjs.Dayjs;
invalidDates: dayjs.Dayjs[] = [];
tooltips = [
{date: dayjs(), text: 'Today is just unselectable'},
{date: dayjs().add(2, 'days'), text: 'Yeeeees!!!'}
];
inlineDateTime;
ranges: any = {
Today: [dayjs(), dayjs()],
Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
'Last 7 Days': [dayjs().subtract(6, 'days'), dayjs()],
'Last 30 Days': [dayjs().subtract(29, 'days'), dayjs()],
'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
'Last Month': [
dayjs()
.subtract(1, 'month')
.startOf('month'),
dayjs()
.subtract(1, 'month')
.endOf('month')
],
'Last 3 Month': [
dayjs()
.subtract(3, 'month')
.startOf('month'),
dayjs()
.subtract(1, 'month')
.endOf('month')
]
};
isInvalidDate = (m: dayjs.Dayjs) => {
return this.invalidDates.some(d => d.isSame(m, 'day') );
}
isTooltipDate = (m: dayjs.Dayjs) => {
const tooltip = this.tooltips.find(tt => tt.date.isSame(m, 'day'));
if (tooltip) {
return tooltip.text;
} else {
return false;
}
}
constructor(private dialog: MatDialog, private inventaireService: InventaireService, private columnsService: ColumnsService, private formBuilder: FormBuilder, private userServ: UserService, private datepipe: DatePipe, private http: HttpClient) {
//DatePicker
this.maxDate = dayjs().add(2, 'weeks');
this.minDate = dayjs().subtract(3, 'days');
this.alwaysShowCalendars = true;
this.keepCalendarOpeningWithRange = true;
this.showRangeLabelOnInput = true;
this.selected = {
startDate: dayjs().subtract(1, 'days').set('hours', 0).set('minutes', 0),
endDate: dayjs().subtract(1, 'days').set('hours', 23).set('minutes', 59)
};}
//DatePicker
rangeClicked(range) {
console.log('[rangeClicked] range is : ', range);
}
datesUpdated(range) {
console.log('[datesUpdated] range is : ', range);
}
choosedDateTime(e) {
this.inlineDateTime = e;
}
ngOnInit() {
//this.selected=this.datepipe.transform(this.selected.startDate, 'yyyy-MM-dd HH:mm:ss');
//this.selected=this.datepipe.transform(this.selected.endDate, 'yyyy-MM-dd HH:mm:ss');
this.getSelectedColumns();
this.userServ.getDroit(this.idTier, 'Inventaire').then((res) => {
this.button = res[0];
});
//this.initForm();
this.onSubmit();
}
initForm() {
this.filtreForm = this.formBuilder.group({
dateAu : new FormControl({value: this.dateAu, disabled: true}, Validators.required),
dateDu: new FormControl({value: this.dateDu, disabled: true}, Validators.required)
});
}
getSelectedColumns() {
let user = sessionStorage.getItem('id');
this.columnsService.getSelectedColumns(user, 'inventaire').subscribe(res => {
if (res.length === 0) {
this.selectedColumns = this.cols;
} else {
this.selectedColumns = res;
}
})
}
onSubmit() {
let obj = this.filtreForm.value;
this.loading = true;
let du = this.datepipe.transform(this.dateAu, 'yyyy-MM-dd HH:mm:ss');
let au = this.datepipe.transform(this.dateDu, 'yyyy-MM-dd HH:mm:ss');
this.http.get<any>(environment.BASE_URL + 'Inventaire/findAllByPeriode/' + du + '/' + au + ' 23:59:59',
{}
).subscribe(resp => {
if (resp.status === "success") {
this.list = resp.data;
}
this.loading = false;
});
}
我在 github https://github.com/fetrarij/ngx-daterangepicker-material/tree/master/demo/src/app/custom-ranges 中使用本教程
也许这样你就可以取值 (choosedDate)="choosedDate($event)"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.