Implement custom datepicker for Birth Date field

marvac · Feb 1, 2019 · fb19215 · fb19215
1 parent 50de1bf
commit fb19215
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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,13 +14,18 @@ export class RegisterComponent implements OnInit {
 
   model: any = {};
   registerForm: FormGroup;
+  bsConfig: Partial<BsDatepickerConfig>;
 
   constructor(
     private authService: AuthService,
     private alertify: AlertifyService,
     private formBuilder: FormBuilder) { }
 
   ngOnInit() {
+    this.bsConfig = {
+      containerClass: 'theme-red'
+    };
+
     this.createRegisterForm();
   }
 

diff --git 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;