SHARE
TWEET

Untitled

a guest Feb 21st, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="form-inline">
  2.     <input matInput [matDatepicker]="picker"
  3.            [value]="dateValue"
  4.            [min]="minDate"
  5.            [max]="maxDate"
  6.            [style.width]="inputWidth"
  7.            class="form-control"
  8.            [textMask]="{mask: maskDateNum}"
  9.            autocomplete="off"
  10.            (dateInput)="addEvent('input', $event)"
  11.            [placeholder]="placeholder">
  12.  
  13.  
  14.     <mat-icon
  15.       id="clear-btn"
  16.       *ngIf="!disabled && (dateValue != null)"
  17.       (click)="clearDate()" >clear</mat-icon>
  18.   <mat-icon
  19.     *ngIf="disabled || (dateValue == null)"></mat-icon>
  20.   <mat-datepicker-toggle matSuffix [hidden]="disabled" [for]="picker"></mat-datepicker-toggle>
  21.   <mat-datepicker #picker></mat-datepicker>
  22.   <p *ngIf="!isInputValid()">Input is invalid</p>
  23. </div>
  24.      
  25. import {Component, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild} from '@angular/core';
  26. import {
  27.   AbstractControl,
  28.   ControlValueAccessor, FormControl,
  29.   NG_VALIDATORS,
  30.   NG_VALUE_ACCESSOR, NgModel,
  31.   ValidationErrors,
  32.   Validator
  33. } from '@angular/forms';
  34.  
  35. import {MatDatepickerInputEvent} from '@angular/material/datepicker';
  36. import * as moment_ from 'moment';
  37.  
  38. const moment = moment_;
  39.  
  40. @Component({
  41.   selector: './datepicker',
  42.   templateUrl: './datepicker.html',
  43.   styleUrls: ['./datepicker.css'],
  44.   providers: [
  45.     {
  46.       provide: NG_VALUE_ACCESSOR,
  47.       useExisting: forwardRef(() =>
  48.      
  49. /**
  50.    * Set the value of the date set by user, notice the underscore infront of the datevalue
  51.    */
  52.  
  53.   @Input() _dateValue: string = null;
  54.  
  55.   /**
  56.    * Placeholder value for the material control input
  57.    */
  58.   @Input() public placeholder: string = null;
  59.  
  60.   /**
  61.    * The date format to use with default format but allowing you to pass a custom date format
  62.    */
  63.   @Input() private format = 'YYYY-MM-DD';
  64.   private inFormat = 'M/D/YYYY';
  65.   private orFormat = 'YYYY-MM-DD';
  66.   /**
  67.    * setting matFormField to true wraps the input in a matformfield
  68.    */
  69.   @Input() matFormField = false;
  70.  
  71.   @Output()
  72.   change = new EventEmitter();
  73.  
  74.   get dateValue() {
  75.     const v = moment(this._dateValue, this.inFormat);
  76.     if (this._dateValue === 'Invalid date' || !v.isValid()) {
  77.       return null;
  78.     }
  79.     if (v.isValid() && v.format(this.format) !== 'Invalid date') {
  80.       return v;
  81.     }
  82.     return null;
  83.   }
  84.  
  85.   set dateValue(val) {
  86.     if (moment(val).format(this.inFormat) === 'Invalid date') {
  87.       this._dateValue = null;
  88.     } else {
  89.       this._dateValue = moment(val).format(this.inFormat);
  90.     }
  91.  
  92.     this.propagateChange(this._dateValue);
  93.   }
  94.  
  95.   addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
  96.     if (event.value === null) {
  97.       this.dateValue = null;
  98.     }
  99.     if (event.value.toString().length > 8) {
  100.       this.dateValue = moment(event.value, this.orFormat);
  101.     }
  102.   }
  103.  
  104.  
  105.   writeValue(value: any) {
  106.     if (value !== undefined && value !== null) {
  107.       this.dateValue = moment(value, this.inFormat);
  108.     }
  109.     if (value === null) {
  110.       this.dateValue = null;
  111.     }
  112.   }
  113.  
  114.   propagateChange = (_: any) => {
  115.     this.change.emit();
  116.   }
  117.  
  118.   registerOnChange(fn) {
  119.     this.propagateChange = fn;
  120.   }
  121.  
  122.   registerOnTouched() {
  123.   }
  124.  
  125.   clearDate() {
  126.     this.dateValue = null;
  127.   }
  128.  
  129.   registerOnValidatorChange(fn: () => void): void {
  130.   }
  131.  
  132.   setDisabledState(isDisabled: boolean): void {
  133.   }
  134.  
  135.   validate(control: AbstractControl): ValidationErrors | null {
  136.     const val = control.value;
  137.     console.log(val);
  138.     if ((val == null || val == undefined || val == 'Invalid date' || val == '') && this.required) {
  139.       return {
  140.         required: true
  141.       };
  142.     }
  143.     return null;
  144.   }
  145.  
  146.  
  147.   isInputValid(): boolean {
  148.     return this.validate(new FormControl(
  149.       this.dateValue
  150.     )) === null;
  151.  
  152.   }
  153.  
  154.   ngOnInit(): void {
  155.  
  156.   }
  157. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top