Kaynağa Gözat

date time

master
FlorianEisenmenger 10 ay önce
ebeveyn
işleme
f6d09e2b0c
2 değiştirilmiş dosya ile 42 ekleme ve 41 silme
  1. +3
    -2
      angular/src/app/_components/datetime-picker/datetime-picker.component.html
  2. +39
    -39
      angular/src/app/_components/datetime-picker/datetime-picker.component.ts

+ 3
- 2
angular/src/app/_components/datetime-picker/datetime-picker.component.html Dosyayı Görüntüle

@@ -1,10 +1,11 @@
<div [formGroup]="form" class="row">
<div [formGroup]="form" class="row g-1">
<div class="col-6">
<label for="{{ inputId }}-date">{{ label }} ({{ 'basic.date' | translate }}):</label>
<input type="date" id="{{ inputId }}-date" class="form-control" formControlName="date" [readonly]="readonly">
</div>
<div class="col-6">
<label for="{{ inputId }}-time">{{ label }} ({{ 'basic.time' | translate }}):</label>
<input type="time" id="{{ inputId }}-time" class="form-control" formControlName="time" [step]="showSeconds ? 1 : 60" [readonly]="readonly">
<input type="time" id="{{ inputId }}-time" class="form-control" formControlName="time"
[step]="showSeconds ? 1 : 60" [readonly]="readonly">
</div>
</div>

+ 39
- 39
angular/src/app/_components/datetime-picker/datetime-picker.component.ts Dosyayı Görüntüle

@@ -2,54 +2,54 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormBuilder, FormGroup} from "@angular/forms";

@Component({
selector: 'app-datetime-picker',
templateUrl: './datetime-picker.component.html',
styleUrl: './datetime-picker.component.scss'
selector: 'app-datetime-picker',
templateUrl: './datetime-picker.component.html',
styleUrl: './datetime-picker.component.scss'
})
export class DatetimePickerComponent implements OnInit {
@Input() label: string = 'Date and Time';
@Input() inputId: string = 'myId';
@Input() initialValue: string | null = null;
@Input() readonly: boolean = false;
@Input() showSeconds: boolean = false;
@Output() dateTimeChange = new EventEmitter<string | null>();
@Input() label: string = 'Date and Time';
@Input() inputId: string = 'myId';
@Input() initialValue: string | null = null;
@Input() readonly: boolean = false;
@Input() showSeconds: boolean = false;
@Output() dateTimeChange = new EventEmitter<string | null>();

form: FormGroup;
form: FormGroup;

constructor(private fb: FormBuilder) {
this.form = this.fb.group({
date: [''],
time: ['']
});
}

ngOnInit() {
if (this.initialValue) {
const date = new Date(this.initialValue);
this.form.patchValue({
date: this.formatDate(date),
time: this.formatTime(date)
});
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
date: [''],
time: ['']
});
}

if (this.readonly) {
this.form.disable();
}
ngOnInit() {
if (this.initialValue) {
const date = new Date(this.initialValue);
this.form.patchValue({
date: this.formatDate(date),
time: this.formatTime(date)
});
}

this.form.valueChanges.subscribe(() => {
if (!this.readonly) {
this.emitDateTime();
}
});
}
if (this.readonly) {
this.form.disable();
}

private formatDate(date: Date): string {
return date.toLocaleDateString('en-CA');
}
this.form.valueChanges.subscribe(() => {
if (!this.readonly) {
this.emitDateTime();
}
});
}

private formatDate(date: Date): string {
return date.toLocaleDateString('en-CA');
}

private formatTime(date: Date): string {
if (this.showSeconds) {
return date.toLocaleTimeString('en-GB', { hour12: false });
return date.toLocaleTimeString('en-GB', {hour12: false});
} else {
// Nur Stunden und Minuten zurückgeben
return date.toLocaleTimeString('en-GB', {
@@ -61,7 +61,7 @@ export class DatetimePickerComponent implements OnInit {
}

private emitDateTime() {
const { date, time } = this.form.value;
const {date, time} = this.form.value;
if (date && time) {
const [year, month, day] = date.split('-');

@@ -84,7 +84,7 @@ export class DatetimePickerComponent implements OnInit {
);

// Format the date to match the loaded format
const formattedDate = dateTime.toLocaleString('sv-SE', { timeZone: 'Europe/Berlin' }).replace(' ', 'T') + '+02:00';
const formattedDate = dateTime.toLocaleString('sv-SE', {timeZone: 'Europe/Berlin'}).replace(' ', 'T') + '+02:00';

this.dateTimeChange.emit(formattedDate);
} else {


Yükleniyor…
İptal
Kaydet