54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild} from "@angular/core";
|
|
import {MatDatepicker} from "@angular/material/datepicker";
|
|
import {NgxMaterialTimepickerComponent, NgxMaterialTimepickerToggleComponent} from "ngx-material-timepicker";
|
|
import {FormControl, Validators} from "@angular/forms";
|
|
import * as moment from "moment";
|
|
|
|
@Component({
|
|
selector: 'app-date-time-picker',
|
|
templateUrl: './date-time-picker.component.html',
|
|
styleUrls: ['./date-time-picker.component.css']
|
|
})
|
|
export class DateTimePickerComponent implements OnInit, OnChanges{
|
|
@ViewChild('picker') picker?: MatDatepicker<any>;
|
|
@ViewChild('toggleTimepicker') toggleTimepicker?: NgxMaterialTimepickerComponent
|
|
@Output('onTimeSet') timeSet: EventEmitter<Date> = new EventEmitter<Date>();
|
|
|
|
@Input('date') date: Date | undefined
|
|
|
|
dateControl: FormControl = new FormControl('', [Validators.required])
|
|
timeControl: FormControl = new FormControl('', [Validators.required])
|
|
constructor() { }
|
|
|
|
ngOnInit() {
|
|
|
|
}
|
|
|
|
ngOnChanges() {
|
|
if(this.date != undefined) {
|
|
this.setDateTime(this.date);
|
|
}
|
|
}
|
|
|
|
setDateTime(date: Date) {
|
|
console.log(date)
|
|
this.dateControl.setValue(date);
|
|
const timeString = date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
|
|
this.timeControl.setValue(timeString);
|
|
}
|
|
|
|
openTimePicker() {
|
|
this.toggleTimepicker!.open();
|
|
}
|
|
|
|
onTimeSet(time: string) {
|
|
let selectedDate = new Date(this.dateControl.value)
|
|
const [hours, minutes] = time.split(":")
|
|
selectedDate.setHours(parseInt(hours, 10));
|
|
selectedDate.setMinutes(parseInt(minutes, 10));
|
|
this.timeSet.emit(selectedDate);
|
|
|
|
|
|
}
|
|
}
|