From fb192156674fc5b94a6a8b27989ce0f71bd6bebd Mon Sep 17 00:00:00 2001
From: Marc Vaccaro <marcgvaccaro@gmail.com>
Date: Thu, 31 Jan 2019 22:15:23 -0800
Subject: [PATCH] Implement custom datepicker for Birth Date field

---
 Client/src/app/app.module.ts                               | 4 +++-
 Client/src/app/components/register/register.component.html | 4 ++--
 Client/src/app/components/register/register.component.ts   | 6 ++++++
 Client/src/styles.css                                      | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/Client/src/app/app.module.ts b/Client/src/app/app.module.ts
index 5f0fb60..10cc423 100644
--- a/Client/src/app/app.module.ts
+++ b/Client/src/app/app.module.ts
@@ -13,7 +13,7 @@ import { HomeComponent } from './components/home/home.component';
 import { RegisterComponent } from './components/register/register.component';
 import { ErrorInterceptorProvider } from './services/error.interceptor';
 import { AlertifyService } from './services/alertify.service';
-import { BsDropdownModule, TabsModule } from 'ngx-bootstrap';
+import { BsDropdownModule, TabsModule, BsDatepickerModule } from 'ngx-bootstrap';
 import { MemberListComponent } from './components/members/member-list/member-list.component';
 import { ListsComponent } from './components/lists/lists.component';
 import { MessagesComponent } from './components/messages/messages.component';
@@ -65,6 +65,8 @@ export function tokenGetter() {
     }),
     TabsModule.forRoot(),
     BsDropdownModule.forRoot(),
+    BsDatepickerModule.forRoot(),
+
     RouterModule.forRoot(appRoutes)
   ],
   providers: [
diff --git a/Client/src/app/components/register/register.component.html b/Client/src/app/components/register/register.component.html
index c6071aa..fdbfd4b 100644
--- a/Client/src/app/components/register/register.component.html
+++ b/Client/src/app/components/register/register.component.html
@@ -28,7 +28,7 @@ <h2 class="text-center text-primary">Sign Up</h2>
 
   <div class="form-group">
     <input [ngClass]="{'is-invalid': registerForm.get('dateOfBirth').errors && registerForm.get('dateOfBirth').touched}" class="form-control"
-           placeholder="Date of Birth" formControlName="dateOfBirth" type="date">
+           placeholder="Date of Birth" formControlName="dateOfBirth" type="text" bsDatepicker [bsConfig]="bsConfig">
     <div class="invalid-feedback" *ngIf="registerForm.get('dateOfBirth').touched && registerForm.get('dateOfBirth').hasError('required')">Date of Birth is required</div>
   </div>
 
@@ -69,7 +69,7 @@ <h2 class="text-center text-primary">Sign Up</h2>
   </div>
 
   <div class="form-group text-center">
-    <button class="btn btn-success" type="submit">Register</button>
+    <button class="btn btn-success" type="submit" [disabled]="!registerForm.valid">Register</button>
     <button class="btn btn-default" type="button" (click)="cancel()">Cancel</button>
   </div>
 
diff --git a/Client/src/app/components/register/register.component.ts b/Client/src/app/components/register/register.component.ts
index e1b8c65..5b993a3 100644
--- a/Client/src/app/components/register/register.component.ts
+++ b/Client/src/app/components/register/register.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { AuthService } from 'src/app/services/auth.service';
 import { AlertifyService } from 'src/app/services/alertify.service';
 import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
 
 @Component({
   selector: 'app-register',
@@ -13,6 +14,7 @@ export class RegisterComponent implements OnInit {
 
   model: any = {};
   registerForm: FormGroup;
+  bsConfig: Partial<BsDatepickerConfig>;
 
   constructor(
     private authService: AuthService,
@@ -20,6 +22,10 @@ export class RegisterComponent implements OnInit {
     private formBuilder: FormBuilder) { }
 
   ngOnInit() {
+    this.bsConfig = {
+      containerClass: 'theme-red'
+    };
+
     this.createRegisterForm();
   }
 
diff --git a/Client/src/styles.css b/Client/src/styles.css
index c58e7a2..4bb8e48 100644
--- a/Client/src/styles.css
+++ b/Client/src/styles.css
@@ -4,7 +4,7 @@
 @import '../node_modules/font-awesome/css/font-awesome.min.css';
 @import '../node_modules/alertifyjs/build/css/alertify.min.css';
 @import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';
-
+@import "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css";
 
 .tab-panel {
   border: 1px solid #ddd;