feat(Validation): use date pipe

terminus-ui/file-upload/src/file-upload.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { TsDatePipe } from '@terminus/ui/pipes';
 import { TsDocumentService } from '@terminus/ngx-tools';
 import { TsButtonModule } from '@terminus/ui/button';
 import { TsIconButtonModule } from '@terminus/ui/icon-button';
@@ -37,6 +38,7 @@ export * from './selected-file';
     TsFileUploadComponent,
   ],
   providers: [
+    TsDatePipe,
     TsDocumentService,
     TsDropProtectionService,
   ],

terminus-ui/input/src/input.component.ts

@@ -48,11 +48,11 @@ import {
   MAT_DATE_FORMATS,
 } from '@angular/material/core';
 import {
-  format as formatDate,
   isValid as isValidDate,
 } from 'date-fns';
 import { Subject } from 'rxjs';
 import { TS_SPACING } from '@terminus/ui/spacing';
+import { TsDatePipe } from '@terminus/ui/pipes';
 import { TsFormFieldControl } from '@terminus/ui/form-field';
 import {
   inputHasChanged,
@@ -288,7 +288,7 @@ export class TsInputComponent implements
   /**
    * Define the default format for the date mask
    */
-  private defaultDateFormat = 'mm/dd/yyyy';
+  private defaultDateFormat = 'mm-dd-yyyy';
 
   /**
    * Store a reference to the document object
@@ -993,6 +993,7 @@ export class TsInputComponent implements
     protected platform: Platform,
     private ngZone: NgZone,
     private documentService: TsDocumentService,
+    private datePipe: TsDatePipe,
     @Optional() @Self() @Inject(TS_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
     @Optional() public dateAdapter: DateAdapter<Date>,
     @Optional() @Self() public ngControl: NgControl,
@@ -1527,7 +1528,7 @@ export class TsInputComponent implements
         let stringifiedDate: string | undefined;
 
         if (this.mask === 'date') {
-          stringifiedDate = this.isValidDateString(value) ? formatDate(value, 'MM-dd-yyyy') : value;
+          stringifiedDate = this.isValidDateString(value) ? this.datePipe.transform(value, 'short') : value;
         }
 
         value = stringifiedDate || value;

terminus-ui/input/src/input.module.ts

@@ -14,6 +14,7 @@ import { TsFormFieldModule } from '@terminus/ui/form-field';
 import { TsIconModule } from '@terminus/ui/icon';
 import { TsValidationMessagesModule } from '@terminus/ui/validation-messages';
 import { TsValidatorsService } from '@terminus/ui/validators';
+import { TsDatePipe } from '@terminus/ui/pipes';
 
 import { TsInputComponent } from './input.component';
 import { TS_DATE_FORMATS } from './date-adapter';
@@ -37,6 +38,7 @@ export * from './input.component';
   ],
   providers: [
     TsValidatorsService,
+    TsDatePipe,
     {
       provide: MAT_DATE_FORMATS,
       useValue: TS_DATE_FORMATS,

terminus-ui/pipes/src/date/date.pipe.spec.ts

@@ -38,15 +38,15 @@ describe(`TsDatePipe`, function() {
 
     it(`should format a date`, () => {
       const actual = pipe(new Date(date), 'short');
-      const expected = '02/08/2018';
+      const expected = '02-08-2018';
 
       expect(actual).toEqual(expected);
     });
 
 
     it(`should format a date string`, () => {
       const actual = pipe(date, 'short');
-      const expected = '02/08/2018';
+      const expected = '02-08-2018';
 
       expect(actual).toEqual(expected);
     });

terminus-ui/pipes/src/date/date.pipe.ts

@@ -13,7 +13,7 @@ import {
  * Define the allowed date formats for the {@link TsDatePipe}.
  */
 export type TsDateTypes =
-  // Short: 02/08/2018
+  // Short: 02-08-2018
   'short'
   // Medium: Feb 8th, 2018
   | 'medium'
@@ -66,7 +66,7 @@ export class TsDatePipe implements PipeTransform {
     // Set the formatted date or an empty string if no format is matched
     const dateString =
       (format === 'short')
-      ? formatDate(date, 'MM/dd/yyyy')
+      ? formatDate(date, 'MM-dd-yyyy')
       : (format === 'medium')
       ? formatDate(date, 'MMM do, yyyy')
       : (format === 'extended')

terminus-ui/validation-messages/src/validation-messages.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
+import { TsDatePipe, TsPipesModule } from '@terminus/ui/pipes';
 import { TsValidationMessagesService } from './validation-messages.service';
 import { TsValidationMessagesComponent } from './validation-messages.component';
 
@@ -13,6 +14,7 @@ export * from './validation-messages.component';
   imports: [
     CommonModule,
     FormsModule,
+    TsPipesModule,
   ],
   providers: [
     TsValidationMessagesService,

terminus-ui/validation-messages/src/validation-messages.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { format as formatDate } from 'date-fns';
+import { TsDatePipe } from '@terminus/ui/pipes';
 
 
 /**
@@ -87,14 +87,12 @@ export class TsValidationMessagesService {
       inCollection: `${validatorValue.actual} is not an accepted item.`,
     };
 
-    // TODO: Convert to use our date pipe. Blocked by https://github.com/GetTerminus/terminus-ui/issues/753
     if (validatorName === 'maxDate') {
-      config.maxDate = `Date must be before ${formatDate(validatorValue.maxDate, 'MM/dd/yyyy')}`;
+      config.maxDate = `Date must be before ${this.datePipe.transform(validatorValue.maxDate, 'short')}`;
     }
 
-    // TODO: Convert to use our date pipe. Blocked by https://github.com/GetTerminus/terminus-ui/issues/753
     if (validatorName === 'minDate') {
-      config.minDate = `Date must be after ${formatDate(validatorValue.minDate, 'MM/dd/yyyy')}`;
+      config.minDate = `Date must be after ${this.datePipe.transform(validatorValue.minDate, 'short')}`;
     }
 
     if (validatorName === 'imageDimensions') {
@@ -108,4 +106,6 @@ export class TsValidationMessagesService {
     return config[validatorName];
   }
 
+  constructor(private datePipe: TsDatePipe) { }
+
 }

terminus-ui/validation-messages/src/validation-messages.services.spec.ts

@@ -1,13 +1,13 @@
-import { format } from 'date-fns';
-
+import { TsDatePipe } from '@terminus/ui/pipes';
 import { TsValidationMessagesService } from './validation-messages.service';
 
 
 describe(`TsValidationMessagesService`, function() {
   let service: TsValidationMessagesService;
+  const datePipe = new TsDatePipe();
 
   beforeEach(() => {
-    service = new TsValidationMessagesService();
+    service = new TsValidationMessagesService(datePipe);
   });
 
 
@@ -59,7 +59,7 @@ describe(`TsValidationMessagesService`, function() {
         maxDate: maxDate,
       };
       const actual = service.getValidatorErrorMessage('maxDate', validatorValueMock);
-      const expected = `Date must be before ${format(maxDate, 'MM/dd/yyyy')}`;
+      const expected = `Date must be before ${datePipe.transform(maxDate, 'short')}`;
 
       expect(actual).toEqual(expected);
     });
@@ -73,7 +73,7 @@ describe(`TsValidationMessagesService`, function() {
         minDate: minDate,
       };
       const actual = service.getValidatorErrorMessage('minDate', validatorValueMock);
-      const expected = `Date must be after ${format(minDate, 'MM/dd/yyyy')}`;
+      const expected = `Date must be after ${datePipe.transform(minDate, 'short')}`;
 
       expect(actual).toEqual(expected);
     });