Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts

   1 import {Component, OnInit, Input, Output, ViewChild, EventEmitter, forwardRef} from '@angular/core';
   2 import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
   3 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
   4
   5 /**
   6  * RE: displaying locale dates in the input field:
   7  * https://github.com/ng-bootstrap/ng-bootstrap/issues/754
   8  * https://stackoverflow.com/questions/40664523/angular2-ngbdatepicker-how-to-format-date-in-inputfield
   9  */
  10
  11 @Component({
  12   selector: 'eg-date-select',
  13   templateUrl: './date-select.component.html',
  14   styleUrls: ['date-select.component.css'],
  15   providers: [ {
  16       provide: NG_VALUE_ACCESSOR,
  17       useExisting: forwardRef(() => DateSelectComponent),
  18       multi: true
  19   } ]
  20 })
  21 export class DateSelectComponent implements OnInit, ControlValueAccessor {
  22
  23     @Input() initialIso: string; // ISO string
  24     @Input() initialYmd: string; // YYYY-MM-DD (uses local time zone)
  25     @Input() initialDate: Date;  // Date object
  26     @Input() required: boolean;
  27     @Input() fieldName: string;
  28     @Input() domId = '';
  29     @Input() disabled: boolean;
  30     @Input() readOnly: boolean;
  31
  32     current: NgbDateStruct;
  33
  34     @Output() onChangeAsDate: EventEmitter<Date>;
  35     @Output() onChangeAsIso: EventEmitter<string>;
  36     @Output() onChangeAsYmd: EventEmitter<string>;
  37     @Output() onCleared: EventEmitter<string>;
  38
  39     // convenience methods to access current selected date
  40     currentAsYmd(): string {
  41         if (this.current == null) { return null; }
  42         if (!this.isValidDate(this.current)) { return null; }
  43         return `${this.current.year}-${String(this.current.month).padStart(2, '0')}-${String(this.current.day).padStart(2, '0')}`;
  44     }
  45     currentAsIso(): string {
  46         if (this.current == null) { return null; }
  47         if (!this.isValidDate(this.current)) { return null; }
  48         const ymd = `${this.current.year}-${String(this.current.month).padStart(2, '0')}-${String(this.current.day).padStart(2, '0')}`;
  49         const date = this.localDateFromYmd(ymd);
  50         const iso = date.toISOString();
  51         return iso;
  52     }
  53     currentAsDate(): Date {
  54         if (this.current == null) { return null; }
  55         if (!this.isValidDate(this.current)) { return null; }
  56         const ymd = `${this.current.year}-${String(this.current.month).padStart(2, '0')}-${String(this.current.day).padStart(2, '0')}`;
  57         const date = this.localDateFromYmd(ymd);
  58         return date;
  59     }
  60
  61     // Stub functions required by ControlValueAccessor
  62     propagateChange = (_: any) => {};
  63     propagateTouch = () => {};
  64
  65     constructor() {
  66         this.onChangeAsDate = new EventEmitter<Date>();
  67         this.onChangeAsIso = new EventEmitter<string>();
  68         this.onChangeAsYmd = new EventEmitter<string>();
  69         this.onCleared = new EventEmitter<string>();
  70     }
  71
  72     ngOnInit() {
  73
  74         if (this.initialYmd) {
  75             this.initialDate = this.localDateFromYmd(this.initialYmd);
  76
  77         } else if (this.initialIso) {
  78             this.initialDate = new Date(this.initialIso);
  79         }
  80
  81         if (this.initialDate) {
  82             this.writeValue(this.initialDate);
  83         }
  84     }
  85
  86     isValidDate(dt: NgbDateStruct): dt is NgbDateStruct {
  87         if (!dt) { return false; }
  88         return (<NgbDateStruct>dt).year !== undefined;
  89     }
  90
  91     onDateEnter() {
  92         if (this.current === null) {
  93             this.onCleared.emit('cleared');
  94         } else if (this.isValidDate(this.current)) {
  95             this.onDateSelect(this.current);
  96         }
  97         // ignoring invalid input for now
  98     }
  99
 100     onDateSelect(evt) {
 101         const ymd = `${evt.year}-${String(evt.month).padStart(2, '0')}-${String(evt.day).padStart(2, '0')}`;
 102         const date = this.localDateFromYmd(ymd);
 103         const iso = date.toISOString();
 104         this.onChangeAsDate.emit(date);
 105         this.onChangeAsYmd.emit(ymd);
 106         this.onChangeAsIso.emit(iso);
 107         this.propagateChange(date);
 108     }
 109
 110     // Create a date in the local time zone with selected YMD values.
 111     // TODO: Consider moving this to a date service...
 112     localDateFromYmd(ymd: string): Date {
 113         const parts = ymd.split('-');
 114         return new Date(
 115             Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
 116     }
 117
 118     reset() {
 119         this.current = {
 120             year: null,
 121             month: null,
 122             day: null
 123         };
 124     }
 125
 126     writeValue(value: Date) {
 127         if (value) {
 128             this.current = {
 129                 year: value.getFullYear(),
 130                 month: value.getMonth() + 1,
 131                 day: value.getDate()
 132             };
 133         }
 134     }
 135
 136     registerOnChange(fn) {
 137         this.propagateChange = fn;
 138     }
 139
 140     registerOnTouched(fn) {
 141         this.propagateTouch = fn;
 142     }
 143 }
 144
 145