Merge pull request #435 from allerta-vvf/master
Replace datepicker with new custom component
This commit is contained in:
commit
498feb8d3c
|
@ -0,0 +1,5 @@
|
|||
<div class="input-group">
|
||||
<input type="text" [disabled]="disabled" placeholder="Premi per selezionare data" class="form-control date-picker"
|
||||
bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD/MM/YYYY' }" [(ngModel)]="date" (ngModelChange)=updateValue()>
|
||||
<input type="time" [disabled]="disabled" class="form-control" [(ngModel)]="time" (change)=updateValue()>
|
||||
</div>
|
|
@ -0,0 +1,3 @@
|
|||
.date-picker {
|
||||
width: 85%
|
||||
}
|
|
@ -0,0 +1,86 @@
|
|||
import { Component, OnInit, forwardRef } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
|
||||
import { defineLocale } from 'ngx-bootstrap/chronos';
|
||||
import { BsLocaleService } from 'ngx-bootstrap/datepicker';
|
||||
import { itLocale } from 'ngx-bootstrap/locale';
|
||||
defineLocale('it', itLocale);
|
||||
|
||||
@Component({
|
||||
selector: 'datetime-picker',
|
||||
templateUrl: './datetime-picker.component.html',
|
||||
styleUrls: ['./datetime-picker.component.scss'],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
multi: true,
|
||||
useExisting: forwardRef(() => DatetimePickerComponent)
|
||||
}
|
||||
]
|
||||
})
|
||||
export class DatetimePickerComponent implements OnInit, ControlValueAccessor {
|
||||
disabled = false;
|
||||
|
||||
date: Date = new Date();
|
||||
time: string = "";
|
||||
|
||||
constructor(private localeService: BsLocaleService) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.localeService.use('it');
|
||||
}
|
||||
|
||||
get value(): Date {
|
||||
let date = this.date;
|
||||
if(this.time) {
|
||||
date.setHours(parseInt(this.time.split(":")[0]));
|
||||
date.setMinutes(parseInt(this.time.split(":")[1]));
|
||||
}
|
||||
date.setSeconds(0, 0);
|
||||
return date;
|
||||
}
|
||||
|
||||
set value(value: Date | number) {
|
||||
console.log("new value", value, "old value", this.value);
|
||||
if(!value || typeof value === "object") return;
|
||||
|
||||
if(typeof value === "number") {
|
||||
this.date = new Date(value);
|
||||
} else {
|
||||
this.date = value;
|
||||
}
|
||||
this.time = this.date.getHours().toString().padStart(2, '0') + ":" + this.date.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
this.onChange(this.value);
|
||||
}
|
||||
|
||||
setDisabledState(isDisabled: boolean): void {
|
||||
this.disabled = isDisabled;
|
||||
}
|
||||
|
||||
updateValue() {
|
||||
this.markAsTouched();
|
||||
this.onChange(this.value);
|
||||
}
|
||||
|
||||
writeValue(new_value: Date | number): void {
|
||||
this.value = new_value;
|
||||
}
|
||||
|
||||
onChange = (value: Date) => {};
|
||||
|
||||
onTouched = () => {};
|
||||
|
||||
registerOnChange(fn: (value: Date) => void): void {
|
||||
this.onChange = fn;
|
||||
}
|
||||
|
||||
registerOnTouched(fn: () => void): void {
|
||||
this.onTouched = fn;
|
||||
fn();
|
||||
}
|
||||
|
||||
markAsTouched() {
|
||||
this.onTouched();
|
||||
}
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
||||
|
||||
import { DatetimePickerComponent } from './datetime-picker.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
DatetimePickerComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
BsDatepickerModule.forRoot()
|
||||
],
|
||||
exports: [
|
||||
DatetimePickerComponent
|
||||
]
|
||||
})
|
||||
export class DatetimePickerModule { }
|
|
@ -4,18 +4,14 @@
|
|||
<div class="container">
|
||||
<div class="form-group has-validation">
|
||||
<label for="date-picker">Inizio</label>
|
||||
<input formControlName="start" [class.is-invalid]="!isFieldValid('start')" type="text"
|
||||
placeholder="Premi per selezionare data e ora" class="form-control" bsDatepicker
|
||||
[bsConfig]="{ adaptivePosition: true, withTimepicker: true, dateInputFormat: 'DD/MM/YYYY, hh:mm' }">
|
||||
<datetime-picker formControlName="start" [class.is-invalid]="!isFieldValid('start')"></datetime-picker>
|
||||
<div class="invalid-feedback" *ngIf="start.errors?.['required']">
|
||||
Seleziona data e ora di inizio dell'intervento
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group has-validation">
|
||||
<label for="date-picker">Fine</label>
|
||||
<input formControlName="end" [class.is-invalid]="!isFieldValid('end')" type="text"
|
||||
placeholder="Premi per selezionare data e ora" class="form-control" bsDatepicker
|
||||
[bsConfig]="{ adaptivePosition: true, withTimepicker: true, dateInputFormat: 'DD/MM/YYYY, hh:mm' }">
|
||||
<datetime-picker formControlName="end" [class.is-invalid]="!isFieldValid('end')"></datetime-picker>
|
||||
<div class="invalid-feedback" *ngIf="end.errors?.['required']">
|
||||
Seleziona data e ora di fine dell'intervento
|
||||
</div>
|
||||
|
|
|
@ -153,6 +153,7 @@ export class EditServiceComponent implements OnInit {
|
|||
}
|
||||
|
||||
formSubmit() {
|
||||
console.log("form values", this.serviceForm.value);
|
||||
this.formSubmitAttempt = true;
|
||||
if(this.serviceForm.valid) {
|
||||
this.submittingForm = true;
|
||||
|
|
|
@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
|
|||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
||||
import { MapPickerModule } from '../map-picker/map-picker.module';
|
||||
import { DatetimePickerModule } from '../datetime-picker/datetime-picker.module';
|
||||
import { BackBtnModule } from '../back-btn/back-btn.module';
|
||||
|
||||
import { EditServiceRoutingModule } from './edit-service-routing.module';
|
||||
|
@ -20,6 +21,7 @@ import { EditServiceComponent } from './edit-service.component';
|
|||
ReactiveFormsModule,
|
||||
BsDatepickerModule.forRoot(),
|
||||
MapPickerModule,
|
||||
DatetimePickerModule,
|
||||
BackBtnModule
|
||||
]
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue