diff --git a/src/timepicker/reducer/timepicker.actions.ts b/src/timepicker/reducer/timepicker.actions.ts index a04b13acc0..6229eb5115 100644 --- a/src/timepicker/reducer/timepicker.actions.ts +++ b/src/timepicker/reducer/timepicker.actions.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { Action } from '../../mini-ngrx/index'; -import { TimeChangeEvent, TimepickerComponentState, TimeUnit } from '../timepicker.models'; +import { TimeChangeEvent, TimepickerComponentState, Time } from '../timepicker.models'; @Injectable() export class TimepickerActions { @@ -39,7 +39,7 @@ export class TimepickerActions { }; } - setTimeUnit(value: TimeUnit): Action { + setTime(value: Time): Action { return { type: TimepickerActions.SET_TIME_UNIT, payload: value diff --git a/src/timepicker/timepicker.component.ts b/src/timepicker/timepicker.component.ts index a00b169980..edd4507150 100644 --- a/src/timepicker/timepicker.component.ts +++ b/src/timepicker/timepicker.component.ts @@ -69,14 +69,12 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = { class="form-control text-center" placeholder="HH" maxlength="2" - #input_hours [readonly]="readonlyInput" [value]="hours" (wheel)="prevDef($event);changeHours(hourStep * wheelSign($event), 'wheel')" (keydown.ArrowUp)="changeHours(hourStep, 'key')" (keydown.ArrowDown)="changeHours(-hourStep, 'key')" - (keydown.Enter)="updateHours(input_hours.value)" - (change)="updateHours(input_hours.value)"> + (change)="updateHours($event.target.value)">  :  @@ -85,13 +83,12 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = { class="form-control text-center" placeholder="MM" maxlength="2" - #input_minutes [readonly]="readonlyInput" [value]="minutes" (wheel)="prevDef($event);changeMinutes(minuteStep * wheelSign($event), 'wheel')" (keydown.ArrowUp)="changeMinutes(minuteStep, 'key')" (keydown.ArrowDown)="changeMinutes(-minuteStep, 'key')" - (change)="updateMinutes(input_minutes.value)"> + (change)="updateMinutes($event.target.value)">  :  @@ -101,13 +98,12 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = { class="form-control text-center" placeholder="SS" maxlength="2" - #input_seconds [readonly]="readonlyInput" [value]="seconds" (wheel)="prevDef($event);changeSeconds(secondsStep * wheelSign($event), 'wheel')" (keydown.ArrowUp)="changeSeconds(secondsStep, 'key')" (keydown.ArrowDown)="changeSeconds(-secondsStep, 'key')" - (change)="updateSeconds(input_seconds.value)"> + (change)="updateSeconds($event.target.value)">     @@ -255,58 +251,29 @@ export class TimepickerComponent implements ControlValueAccessor, TimepickerComp this._store.dispatch(this._timepickerActions.changeSeconds({step, source})); } - updateHours(hour: string): void { - const dex = 10; - const _hoursPerDay = 24; - const _newHour = parseInt(hour, dex); - this.hours = hour; - - if (isNaN(_newHour) || _newHour < 0 || _newHour > _hoursPerDay) { - this.hours = ''; - this.invalidHours = true; - this.onChange(null); - - return; - } - this.invalidHours = false; - this._store.dispatch(this._timepickerActions - .setTimeUnit({hour: _newHour % _hoursPerDay})); + updateHours(hours: string): void { + this.hours = hours; + this._updateTime(); } - updateMinutes(minute: string) { - const dex = 10; - const _minutesPerHour = 60; - const _newMinute = parseInt(minute, dex); - - if (isNaN(_newMinute) || _newMinute < 0 || _newMinute > _minutesPerHour) { - this.minutes = ''; - this.invalidMinutes = true; - this.onChange(null); - - return; - } - - this.invalidMinutes = false; - console.log(this.hours); - this._store.dispatch(this._timepickerActions - .setTimeUnit({minute: _newMinute % _minutesPerHour})); + updateMinutes(minutes: string) { + this.minutes = minutes; + this._updateTime(); } updateSeconds(seconds: string) { - const dex = 10; - const _secondsPerMinute = 60; - const _newSeconds = parseInt(seconds, dex); - - if (isNaN(_newSeconds) || _newSeconds < 0 || _newSeconds > _secondsPerMinute) { - this.minutes = ''; - this.invalidMinutes = true; - - return; - } + this.seconds = seconds; + this._updateTime(); + } - this.invalidMinutes = false; + _updateTime() { + // const isPM = this.showMeridian && this.meridian === this.meridians[1]; this._store.dispatch(this._timepickerActions - .setTimeUnit({seconds: _newSeconds % _secondsPerMinute})); + .setTime({ + hour: this.hours, + minute: this.minutes, + seconds: this.seconds + })); } toggleMeridian(): void { diff --git a/src/timepicker/timepicker.models.ts b/src/timepicker/timepicker.models.ts index 8df79d5814..3c186c9395 100644 --- a/src/timepicker/timepicker.models.ts +++ b/src/timepicker/timepicker.models.ts @@ -1,7 +1,7 @@ -export interface TimeUnit { - hour?: number; - minute?: number; - seconds?: number; +export interface Time { + hour?: string | number; + minute?: string | number; + seconds?: string | number; } export interface TimepickerControls { diff --git a/src/timepicker/timepicker.utils.ts b/src/timepicker/timepicker.utils.ts index 992b2f82a0..77a2eef05b 100644 --- a/src/timepicker/timepicker.utils.ts +++ b/src/timepicker/timepicker.utils.ts @@ -1,4 +1,10 @@ -import { TimeUnit } from './timepicker.models'; +import { Time } from './timepicker.models'; + +const dex = 10; +const hoursPerDay = 24; +const hoursPerDayHalf = 12; +const minutesPerHour = 60; +const secondsPerMinute = 60; export function isValidDate(value?: string | Date): boolean { if (!value) { @@ -16,6 +22,45 @@ export function isValidDate(value?: string | Date): boolean { return true; } +export function toNumber(value: string | number): number { + if (typeof value === 'number') { + return value; + } + + return parseInt(value, dex); +} + +export function isNumber(value: string): boolean { + return !isNaN(toNumber(value)); +} + +export function parseHours(value: string | number): number { + const hour = toNumber(value); + if (isNaN(hour) || hour < 0 || hour > hoursPerDay) { + return NaN; + } + + return hour; +} + +export function parseMinutes(value: string | number): number { + const minute = toNumber(value); + if (isNaN(minute) || minute < 0 || minute > minutesPerHour) { + return NaN; + } + + return minute; +} + +export function parseSeconds(value: string | number): number { + const seconds = toNumber(value); + if (isNaN(seconds) || seconds < 0 || seconds > secondsPerMinute) { + return NaN; + } + + return seconds; +} + export function parseTime(value: string | Date): Date { if (typeof value === 'string') { return new Date(value); @@ -24,60 +69,57 @@ export function parseTime(value: string | Date): Date { return value; } -export function changeTime(value: Date, diff: TimeUnit): Date { +export function changeTime(value: Date, diff: Time): Date { if (!value) { - const _value = new Date(); - - return changeTime(new Date(_value.getFullYear(), _value.getMonth(), _value.getDate(), - 0, 0, 0, _value.getMilliseconds()), diff); + return changeTime(createDate(new Date(),0,0, 0), diff); } - const _hoursPerDay = 24; - // const _minutesPerHour = 60; - // const _secondsPerMinute = 60; - let hour = value.getHours(); let minutes = value.getMinutes(); let seconds = value.getSeconds(); if (diff.hour) { - hour = (hour + diff.hour) % _hoursPerDay; + hour = (hour + toNumber(diff.hour)) % hoursPerDay; if (hour < 0) { - hour += _hoursPerDay; + hour += hoursPerDay; } } if (diff.minute) { - minutes = (minutes + diff.minute); - // minutes = (minutes + diff.minute) % _minutesPerHour; - // if (minutes < 0) { - // minutes += _minutesPerHour; - // } + minutes = (minutes + toNumber(diff.minute)); } if (diff.seconds) { - seconds = (seconds + diff.seconds); - // seconds = (seconds + diff.seconds) % _secondsPerMinute; - // if (seconds < 0) { - // seconds += _secondsPerMinute; - // } + seconds = (seconds + toNumber(diff.seconds)); } - return new Date(value.getFullYear(), value.getMonth(), value.getDate(), - hour, minutes, seconds, value.getMilliseconds()); + return createDate(value, hour, minutes, seconds); } -export function setTime(value: Date, opts: TimeUnit): Date { +export function setTime(value: Date, opts: Time): Date { + const hour = parseHours(opts.hour); + const minute = parseMinutes(opts.minute); + const seconds = parseSeconds(opts.seconds) || 0; + if (!value) { + if (!isNaN(hour) && !isNaN(minute)) { + return createDate(new Date(), hour, minute, seconds); + } + return value; } + // todo: add is nan check + // const hour = (opts.hour || opts.hour === 0) ? opts.hour : value.getHours(); + // const minute = (opts.minute || opts.minute === 0) ? opts.minute : value.getMinutes(); + // const seconds = (opts.seconds || opts.seconds === 0) ? opts.seconds : value.getSeconds(); - const hour = (opts.hour || opts.hour === 0) ? opts.hour : value.getHours(); - const minute = (opts.minute || opts.minute === 0) ? opts.minute : value.getMinutes(); - const seconds = (opts.seconds || opts.seconds === 0) ? opts.seconds : value.getSeconds(); + return createDate(value, hour, minute, seconds); +} - return new Date(value.getFullYear(), value.getMonth(), value.getDate(), - hour, minute, seconds, value.getMilliseconds()); +export function createDate(value: Date, hours: number, minutes: number, seconds: number): Date { + const _value = value || new Date(); + return new Date(_value.getFullYear(), _value.getMonth(), _value.getDate(), + hours, minutes, seconds, _value.getMilliseconds()); } export function padNumber(value: number): string {