Date, Time field
// Date range (min, max)
setMinMaxDate() {
const currentDate = new Date();
const formattedDate = currentDate.toISOString().split('T')[0];
this.minDate = formattedDate;
let next30days = this.addDays(currentDate, 90);
this.maxDate = next30days.toISOString().split('T')[0];
}
addDays(date: Date, days: number): Date {
let result = new Date(date);
result.setDate(date.getDate() + days);
return result;
}
<input class="form-control" type="date" min={{minDate}} max="{{maxDate}}" formControlName="entryDate">
// Date
UI display:
<td class="text-info">{{dataItem.startDate | date: 'dd/MM/yyyy'}}</td>
Update:
startDate: [data.toDate, Validators.required],
<div class="form-group mb-3">
<label>To Date</label> <span style="color: red;"> *</span>
<input type="date" class="form-control" formControlName="toDate" >
</div>
ViewModel:
public string ToDate { get; set; }
Mapping:
.ForMember(dest => dest.ToDate, opt => opt.MapFrom(src => String.Format("{0:yyyy-MM-dd}", src.ToDate)));
// time
UI display:
<td class="text-warning">{{dataItem.startTime | date: 'HH:mm'}}</td>
Update:
startTime: [this.getFormattedTime(data.sampleCheckSetting.startTime), Validators.required],
getFormattedTime(dateString: string): string | null {
return this.datePipe.transform(dateString, 'HH:mm'); // 输出 "17:38"
}
<div class="form-group mb-2">
<label>Start Time</label> <span style="color: red;"> *</span>
<input type="time" class="form-control" formControlName="startTime" >
</div>
ViewModel:
public string StartTime { get; set; }
Mapping:
.ForMember(dest => dest.StartTime, opt => opt.MapFrom(src => String.Format("{0:yyyy-MM-dd HH:mm:ss}", src.StartTime)))
Last updated
Was this helpful?