Change Timepicker => DONE

src/app/search/components/criteria/datetime.component.css

+ng-select {
+    width: 80px;
+}
\ No newline at end of file

src/app/search/components/criteria/datetime.component.html

 <div class="form-group row">
     <label class="col-3 col-form-label">{{ label }}</label>
     <div class="col">
-        <input type="text" [placeholder]="getPlaceholder()" class="form-control" [formControl]="date"
-            [bsValue]="date.value" [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }" (bsValueChange)="change()"
+        <input type="text" placeholder="Pick a date..." class="form-control" [formControl]="date"
+            [bsValue]="date.value" [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }" (change)="change()"
             bsDatepicker>
     </div>
     <div class="col">
-        <timepicker [(ngModel)]="time" [showMeridian]="false" [showSpinners]="false" [disabled]="isTimeDisabled"
-            (change)="change()"></timepicker>
+        <div class="row">
+            <div class="col-auto pr-2">
+                <ng-select (change)="change()" [formControl]="hh" [multiple]="false" placeholder="HH...">
+                    <ng-option *ngFor="let hour of hours" [value]="hour">{{ hour }}</ng-option>
+                </ng-select>
+            </div>
+            <div class="col-auto p-0">:</div>
+            <div class="col-auto pl-2">
+                <ng-select (change)="change()" [formControl]="mm" [multiple]="false" placeholder="MM...">
+                    <ng-option *ngFor="let min of minutes" [value]="min">{{ min }}</ng-option>
+                </ng-select>
+            </div>
+        </div>
     </div>
     <div class="col-2 align-self-center text-center">
-        <button class="btn btn-outline-success" *ngIf="!date.disabled" [hidden]="!isValidFields"
+        <button class="btn btn-outline-success" *ngIf="!date.disabled || !hh.disabled || !mm.disabled" [hidden]="!isValidFields"
             (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
     </div>
 </div>
\ No newline at end of file

src/app/search/components/criteria/datetime.component.ts

@@ -6,7 +6,7 @@ import { Criterion, DatetimeCriterion } from '../../store/model';
 @Component({
     selector: 'app-datetime',
     templateUrl: 'datetime.component.html',
-    styleUrls: ['time.component.css'],
+    styleUrls: ['datetime.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DatetimeComponent {
@@ -19,12 +19,20 @@ export class DatetimeComponent {
     }
     @Output() add: EventEmitter<DatetimeCriterion> = new EventEmitter();
 
+    hours: string[] = [];
+    minutes: string[] = [];
+
     date = new FormControl('');
-    time: Date = null;
-    isTimeDisabled: boolean;
-    isValidFields: boolean = false;
+    hh = new FormControl();
+    mm = new FormControl();
+    isValidFields = false;
     datetime: Date = new Date();
 
+    constructor() {
+        this.hours = this.initTime(24);
+        this.minutes = this.initTime(60);
+    }
+
     addCriterion() {
         const fd = new DatetimeCriterion(this.id, this.datetime);
         this.add.emit(fd);
@@ -34,30 +42,36 @@ export class DatetimeComponent {
         if (!criterion) {
             this.date.setValue('');
             this.date.enable();
-            this.time = null;
-            this.isTimeDisabled = false;
+            this.hh.reset();
+            this.hh.enable();
+            this.mm.reset();
+            this.mm.enable();
             this.isValidFields = false;
         } else {
-            console.log('pas vide');
             const c = criterion as DatetimeCriterion;
+            const hour = ('0' + (c.value.getHours())).slice(-2);
+            const minute = ('0' + (c.value.getMinutes())).slice(-2);
             this.date.setValue(c.value);
             this.date.disable();
-            this.time = c.value;
-            this.isTimeDisabled = true;
+            this.hh.setValue(hour);
+            this.hh.disable();
+            this.mm.setValue(minute);
+            this.mm.disable();
             this.isValidFields = true;
         }
     }
 
-    getPlaceholder(): string {
-        if (!this.placeholder) {
-            return '';
-        } else {
-            return this.placeholder;
+    initTime(time: number): string[] {
+        const array: string[] = [];
+        for (let i = 0; i < time; i++) {
+            const t = ('0' + i).slice(-2);
+            array.push(t);
         }
+        return array;
     }
 
     change(): void {
-        if (!this.time || !this.date.value) {
+        if (!this.date.value || !this.hh.value || !this.mm.value) {
             this.isValidFields = false;
         } else {
             this.isValidFields = true;
@@ -66,8 +80,8 @@ export class DatetimeComponent {
                 this.date.value.getMonth(),
                 this.date.value.getDate());
             this.datetime.setHours(
-                this.time.getHours(),
-                this.time.getMinutes());
+                this.hh.value,
+                this.mm.value);
         }
     }
 }

src/app/search/components/criteria/time.component.css

+ng-select {
+    width: 80px;
+}
\ No newline at end of file

src/app/search/components/criteria/time.component.html

 <div class="form-group row">
     <label class="col-3 col-form-label">{{label}}</label>
     <div class="col">
-        <timepicker [(ngModel)]="time" [showMeridian]="false" [showSpinners]="false" [disabled]="isTimeDisabled"
-            (change)="change()"></timepicker>
+        <div class="row">
+            <div class="col-auto pr-2">
+                <ng-select [formControl]="hh" [multiple]="false" placeholder="HH...">
+                    <ng-option *ngFor="let hour of hours" [value]="hour">{{ hour }}</ng-option>
+                </ng-select>
+            </div>
+            <div class="col-auto p-0">:</div>
+            <div class="col-auto pl-2">
+                <ng-select [formControl]="mm" [multiple]="false" placeholder="MM...">
+                    <ng-option *ngFor="let min of minutes" [value]="min">{{ min }}</ng-option>
+                </ng-select>
+            </div>
+        </div>
     </div>
     <div class="col-2 align-self-center text-center">
-        <button class="btn btn-outline-success" *ngIf="!isTimeDisabled" [hidden]="!isValidTime"
-            (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
+        <button class="btn btn-outline-success" *ngIf="!hh.disabled || !mm.disabled" [hidden]="!hh.value || !mm.value"
+            (click)="addCriterion()">
+            <i class="fas fa-plus-circle"></i>
+        </button>
     </div>
 </div>
\ No newline at end of file

src/app/search/components/criteria/time.component.ts

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 import { Criterion, TimeCriterion } from '../../store/model';
 
@@ -17,33 +18,43 @@ export class TimeComponent {
     }
     @Output() add: EventEmitter<TimeCriterion> = new EventEmitter();
 
-    time: Date = null;
-    isTimeDisabled: boolean;
-    isValidTime: boolean = false;
+    public hours: string[] = [];
+    public minutes: string[] = [];
+
+    hh = new FormControl();
+    mm = new FormControl();
+
+    constructor() {
+        this.hours = this.initTime(24);
+        this.minutes = this.initTime(60);
+    }
 
     addCriterion() {
-        const fd = new TimeCriterion(this.id, this.time);
-        this.add.emit(fd);
+        const time = new TimeCriterion(this.id, this.hh.value + ':' + this.mm.value);
+        this.add.emit(time);
     }
 
     getDefault(criterion: Criterion): void {
         if (!criterion) {
-            this.time = null;
-            this.isTimeDisabled = false;
-            this.isValidTime = false;
+            this.hh.reset();
+            this.hh.enable();
+            this.mm.reset();
+            this.mm.enable();
         } else {
             const c = criterion as TimeCriterion;
-            this.time = c.value;
-            this.isTimeDisabled = true;
-            this.isValidTime = true;
+            this.hh.setValue(c.value.slice(0, 2));
+            this.hh.disable();
+            this.mm.setValue(c.value.slice(3, 5));
+            this.mm.disable();
         }
     }
 
-    change(): void {
-        if (!this.time) {
-            this.isValidTime = false;
-        } else {
-            this.isValidTime = true;
+    initTime(time: number): string[] {
+        const array: string[] = [];
+        for (let i = 0; i < time; i++) {
+            const t = ('0' + i).slice(-2);
+            array.push(t);
         }
+        return array;
     }
 }

src/app/search/store/model/datetime-criterion.model.ts

@@ -9,16 +9,22 @@ export class DatetimeCriterion extends Criterion {
     }
 
     printCriterion(): string {
-        const month = ('0'+(this.value.getMonth()+1)).slice(-2);
-        const date = this.value.getFullYear() + '-' + month + '-' + this.value.getDate();
-        const time = this.value.getHours() + ':' + this.value.getMinutes();
+        const month = ('0' + (this.value.getMonth() + 1)).slice(-2);
+        const day = ('0' + (this.value.getDate())).slice(-2);
+        const hour = ('0' + (this.value.getHours())).slice(-2);
+        const minute = ('0' + (this.value.getMinutes())).slice(-2);
+        const date = this.value.getFullYear() + '-' + month + '-' + day;
+        const time = hour + ':' + minute;
         return date + ' ' + time;
     }
 
     getCriterionStr(): string {
-        const month = ('0'+(this.value.getMonth()+1)).slice(-2);
-        const date = this.value.getFullYear() + '-' + month + '-' + this.value.getDate();
-        const time = this.value.getHours() + ':' + this.value.getMinutes();
+        const month = ('0' + (this.value.getMonth() + 1)).slice(-2);
+        const day = ('0' + (this.value.getDate())).slice(-2);
+        const hour = ('0' + (this.value.getHours())).slice(-2);
+        const minute = ('0' + (this.value.getMinutes())).slice(-2);
+        const date = this.value.getFullYear() + '-' + month + '-' + day;
+        const time = hour + ':' + minute;
         return this.id + ':eq:' + date + '.' + time;
     }
 }

src/app/search/store/model/time-criterion.model.ts

 import { Criterion } from './criterion.model';
 
 export class TimeCriterion extends Criterion {
-    value: Date;
+    value: string;
 
-    constructor(id: number, value: Date) {
+    constructor(id: number, value: string) {
         super(id);
         this.value = value;
     }
 
     printCriterion(): string {
-        return this.value.getHours() + ':' + this.value.getMinutes();
+        return this.value;
     }
 
     getCriterionStr(): string {
-        return this.id + ':gt:' + this.value.getHours() + '.' + this.value.getMinutes();
+        return this.id + ':gt:' + this.value;
     }
 }

src/app/shared/shared.module.ts

@@ -4,9 +4,17 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { ToastrModule } from 'ngx-toastr';
-import { ModalModule, TabsModule, AccordionModule, CollapseModule, PopoverModule, PaginationModule, BsDatepickerModule, TimepickerModule } from 'ngx-bootstrap';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { NgSelectModule } from '@ng-select/ng-select';
+import {
+    ModalModule,
+    TabsModule,
+    AccordionModule,
+    CollapseModule,
+    PopoverModule,
+    PaginationModule,
+    BsDatepickerModule
+} from 'ngx-bootstrap';
 
 @NgModule({
     imports: [
@@ -21,7 +29,6 @@ import { NgSelectModule } from '@ng-select/ng-select';
         PopoverModule.forRoot(),
         PaginationModule.forRoot(),
         BsDatepickerModule.forRoot(),
-        TimepickerModule.forRoot(),
         NgSelectModule,
         RouterModule
     ],
@@ -37,7 +44,6 @@ import { NgSelectModule } from '@ng-select/ng-select';
         PopoverModule,
         PaginationModule,
         BsDatepickerModule,
-        TimepickerModule,
         NgSelectModule
     ],
     providers: [BsModalService]