Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(timepicker): reseting timepicker if ng-model set to null #2914

Closed
wants to merge 3 commits into from
Closed

feat(timepicker): reseting timepicker if ng-model set to null #2914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b2a2f8
Solution: issue #2907
Oct 25, 2017
a041dce
Update demo-datepicker.module.ts
valorkin Nov 2, 2017
d3c00a5
Merge branch 'development' into development
valorkin Nov 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions demo/src/app/components/+datepicker/demo-datepicker.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ import { routes } from './demo-datepicker.routes';

import { defineLocale } from 'ngx-bootstrap/bs-moment';
import {
ar, cs, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, ptBr, sv, ru, zhCn, tr
ar, cs, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, ptBr, ru, sv, zhCn, tr
} from 'ngx-bootstrap/locale';

const locales = [ar, cs, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, ptBr, sv, ru, zhCn, tr];
const locales = [ar, cs, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, ptBr, ru, sv, zhCn, tr];

locales.forEach(locale => defineLocale(locale.abbr, locale));

Expand Down
226 changes: 112 additions & 114 deletions src/timepicker/timepicker.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,120 +1,118 @@
<table>
<tbody>
<tr class="text-center" [class.hidden]="!isSpinnersVisible">
<!-- increment hours button-->
<td>
<a class="btn btn-link" [class.disabled]="!canIncrementHours"
(click)="changeHours(hourStep)"
><span class="bs-chevron bs-chevron-up"></span></a>
</td>
<!-- divider -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- increment minutes button -->
<td>
<a class="btn btn-link" [class.disabled]="!canIncrementMinutes"
(click)="changeMinutes(minuteStep)"
><span class="bs-chevron bs-chevron-up"></span></a>
</td>
<!-- divider -->
<td *ngIf="showSeconds">&nbsp;</td>
<!-- increment seconds button -->
<td *ngIf="showSeconds">
<a class="btn btn-link" [class.disabled]="!canIncrementSeconds"
(click)="changeSeconds(secondsStep)">
<span class="bs-chevron bs-chevron-up"></span>
</a>
</td>
<!-- space between -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- meridian placeholder-->
<td *ngIf="showMeridian"></td>
</tr>
<tr>
<!-- hours -->
<td class="form-group" [class.has-error]="invalidHours">
<input type="text"
class="form-control text-center bs-timepicker-field"
placeholder="HH"
maxlength="2"
[readonly]="readonlyInput"
[value]="hours"
(wheel)="prevDef($event);changeHours(hourStep * wheelSign($event), 'wheel')"
(keydown.ArrowUp)="changeHours(hourStep, 'key')"
(keydown.ArrowDown)="changeHours(-hourStep, 'key')"
(change)="updateHours($event.target.value)"></td>
<!-- divider -->
<td>&nbsp;:&nbsp;</td>
<!-- minutes -->
<td class="form-group" [class.has-error]="invalidMinutes">
<input type="text"
class="form-control text-center bs-timepicker-field"
placeholder="MM"
maxlength="2"
[readonly]="readonlyInput"
[value]="minutes"
(wheel)="prevDef($event);changeMinutes(minuteStep * wheelSign($event), 'wheel')"
(keydown.ArrowUp)="changeMinutes(minuteStep, 'key')"
(keydown.ArrowDown)="changeMinutes(-minuteStep, 'key')"
(change)="updateMinutes($event.target.value)">
</td>
<!-- divider -->
<td *ngIf="showSeconds">&nbsp;:&nbsp;</td>
<tr class="text-center" [class.hidden]="!isSpinnersVisible">
<!-- increment hours button-->
<td>
<a class="btn btn-link" [class.disabled]="!canIncrementHours"
(click)="changeHours(hourStep)"
><span class="bs-chevron bs-chevron-up"></span></a>
</td>
<!-- divider -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- increment minutes button -->
<td>
<a class="btn btn-link" [class.disabled]="!canIncrementMinutes"
(click)="changeMinutes(minuteStep)"
><span class="bs-chevron bs-chevron-up"></span></a>
</td>
<!-- divider -->
<td *ngIf="showSeconds">&nbsp;</td>
<!-- increment seconds button -->
<td *ngIf="showSeconds">
<a class="btn btn-link" [class.disabled]="!canIncrementSeconds"
(click)="changeSeconds(secondsStep)">
<span class="bs-chevron bs-chevron-up"></span>
</a>
</td>
<!-- space between -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- meridian placeholder-->
<td *ngIf="showMeridian || showReset"></td>
</tr>
<tr>
<!-- hours -->
<td class="form-group" [class.has-error]="invalidHours">
<input type="text"
class="form-control text-center bs-timepicker-field"
placeholder="HH"
maxlength="2"
[readonly]="readonlyInput"
[value]="hours"
(wheel)="prevDef($event);changeHours(hourStep * wheelSign($event), 'wheel')"
(keydown.ArrowUp)="changeHours(hourStep, 'key')"
(keydown.ArrowDown)="changeHours(-hourStep, 'key')"
(change)="updateHours($event.target.value)"></td>
<!-- divider -->
<td>&nbsp;:&nbsp;</td>
<!-- minutes -->
<td class="form-group" [class.has-error]="invalidMinutes">
<input type="text"
class="form-control text-center bs-timepicker-field"
placeholder="MM"
maxlength="2"
[readonly]="readonlyInput"
[value]="minutes"
(wheel)="prevDef($event);changeMinutes(minuteStep * wheelSign($event), 'wheel')"
(keydown.ArrowUp)="changeMinutes(minuteStep, 'key')"
(keydown.ArrowDown)="changeMinutes(-minuteStep, 'key')"
(change)="updateMinutes($event.target.value)">
</td>
<!-- divider -->
<td *ngIf="showSeconds">&nbsp;:&nbsp;</td>
<!-- seconds -->
<td class="form-group" *ngIf="showSeconds"
[class.has-error]="invalidSeconds">
<input type="text"
class="form-control text-center bs-timepicker-field"
placeholder="SS"
maxlength="2"
[readonly]="readonlyInput"
[value]="seconds"
(wheel)="prevDef($event);changeSeconds(secondsStep * wheelSign($event), 'wheel')"
(keydown.ArrowUp)="changeSeconds(secondsStep, 'key')"
(keydown.ArrowDown)="changeSeconds(-secondsStep, 'key')"
(change)="updateSeconds($event.target.value)">
</td>
<!-- space between -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- meridian -->
<td *ngIf="showMeridian">
<button type="button" class="btn btn-default text-center"
[disabled]="readonlyInput"
[class.disabled]="readonlyInput"
(click)="toggleMeridian()"
>{{ meridian }}
</button>
</td>
</tr>
<tr class="text-center" [class.hidden]="!isSpinnersVisible">
<!-- decrement hours button-->
<td>
<a class="btn btn-link" [class.disabled]="!canDecrementHours"
(click)="changeHours(-hourStep)">
<span class="bs-chevron bs-chevron-down"></span>
</a>
</td>
<!-- divider -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- decrement minutes button-->
<td>
<a class="btn btn-link" [class.disabled]="!canDecrementMinutes"
(click)="changeMinutes(-minuteStep)">
<span class="bs-chevron bs-chevron-down"></span>
</a>
</td>
<!-- divider -->
<td *ngIf="showSeconds">&nbsp;</td>
<!-- decrement seconds button-->
<td *ngIf="showSeconds">
<a class="btn btn-link" [class.disabled]="!canDecrementSeconds"
(click)="changeSeconds(-secondsStep)">
<span class="bs-chevron bs-chevron-down"></span>
</a>
</td>
<!-- space between -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- meridian placeholder-->
<td *ngIf="showMeridian"></td>
</tr>
[class.has-error]="invalidSeconds">
<input type="text"
class="form-control text-center bs-timepicker-field"
placeholder="SS"
maxlength="2"
[readonly]="readonlyInput"
[value]="seconds"
(wheel)="prevDef($event);changeSeconds(secondsStep * wheelSign($event), 'wheel')"
(keydown.ArrowUp)="changeSeconds(secondsStep, 'key')"
(keydown.ArrowDown)="changeSeconds(-secondsStep, 'key')"
(change)="updateSeconds($event.target.value)">
</td>
<!-- space between -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- meridian / reset -->
<td *ngIf="showMeridian || showReset">
<button *ngIf="showReset" type="button" class="btn btn-default text-center" [disabled]="readonlyInput" [class.disabled]="readonlyInput" (click)="toggleMeridian()">{{ meridian }}
</button>
<button *ngIf="showReset" type="button" class="btn btn-default text-center" (click)="reset()">Reset
</button>
</td>
</tr>
<tr class="text-center" [class.hidden]="!isSpinnersVisible">
<!-- decrement hours button-->
<td>
<a class="btn btn-link" [class.disabled]="!canDecrementHours"
(click)="changeHours(-hourStep)">
<span class="bs-chevron bs-chevron-down"></span>
</a>
</td>
<!-- divider -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- decrement minutes button-->
<td>
<a class="btn btn-link" [class.disabled]="!canDecrementMinutes"
(click)="changeMinutes(-minuteStep)">
<span class="bs-chevron bs-chevron-down"></span>
</a>
</td>
<!-- divider -->
<td *ngIf="showSeconds">&nbsp;</td>
<!-- decrement seconds button-->
<td *ngIf="showSeconds">
<a class="btn btn-link" [class.disabled]="!canDecrementSeconds"
(click)="changeSeconds(-secondsStep)">
<span class="bs-chevron bs-chevron-down"></span>
</a>
</td>
<!-- space between -->
<td>&nbsp;&nbsp;&nbsp;</td>
<!-- meridian placeholder-->
<td *ngIf="showMeridian || showReset"></td>
</tr>
</tbody>
</table>
14 changes: 11 additions & 3 deletions src/timepicker/timepicker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = {
})
export class TimepickerComponent
implements ControlValueAccessor,
TimepickerComponentState,
TimepickerControls,
OnChanges {
TimepickerComponentState,
TimepickerControls,
OnChanges {
/** hours change step */
@Input() hourStep: number;
/** hours change step */
Expand All @@ -85,6 +85,7 @@ export class TimepickerComponent
/** if true spinner arrows above and below the inputs will be shown */
@Input() showSpinners: boolean;
@Input() showMeridian: boolean;
@Input() showReset: boolean;
@Input() showSeconds: boolean;

/** meridian labels based on locale */
Expand Down Expand Up @@ -240,6 +241,13 @@ export class TimepickerComponent
if (isValidDate(obj)) {
this._store.dispatch(this._timepickerActions.writeValue(parseTime(obj)));
}
else {
this.reset();
}
}

public reset(): void {
this._store.dispatch(this._timepickerActions.writeValue(null));
}

/**
Expand Down