angular_components
angular_components copied to clipboard
more time options for TimePicker
My customer wants more time options in the TimePicker like every 30 minutes and not only each hour.
I came up with a solution to introduce a stepsPerHour property. Default is 1.
int _stepsPerHour = 1;
/// Steps per hours. 4 steps will generate an entry every 15 minutes
@Input()
set stepsPerHour(int value) {
_stepsPerHour = value;
_generateTimeOptions();
}
TimePickerComponent(@Inject(datepickerClock) this._clock) {
_generateTimeOptions();
}
void _generateTimeOptions() {
timeOptions = TimeSelectionOptions(
List<DateTime>.generate(24 * _stepsPerHour, (step) {
int hour = (step / _stepsPerHour).floor();
int minute = (step - (hour * _stepsPerHour)) * (60 / _stepsPerHour).round();
return _utc ? _utcTime(hour, minute) : _localTime(hour, minute);
})
);
}
Also it would be nice to have some TimePicker config class that holds all the config properties like minTime, maxTime and stepsPerHour. This way you don't have to change the DateTimePicker if a new property is added to TimePicker because the config object can be passed through.