chore(demo): add reactive forms in demo

demo/src/app/app.component.html

@@ -6,6 +6,7 @@
     <ul class="left hide-on-small-only">
       <li routerLinkActive="active"><a [routerLink]="['simple']">Simple</a></li>
       <li routerLinkActive="active"><a [routerLink]="['single-datepicker']">Single datepicker</a></li>
+      <li routerLinkActive="active"><a [routerLink]="['reactive-forms']">Reactive forms</a></li>
       <li routerLinkActive="active"><a [routerLink]="['with-timepicker']">With timepicker</a></li>
       <li routerLinkActive="active"><a [routerLink]="['custom-ranges']">Custom ranges</a></li>
       <li routerLinkActive="active"><a [routerLink]="['full']">Full options</a></li>

demo/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { AppRoutes } from './app.routing';
 import {
@@ -21,6 +21,7 @@ import { FullComponent } from './full/full.component';
 import { SingleDatepickerComponent } from './single-datepicker/single-datepicker.component';
 import { CustomRangesComponent } from './custom-ranges/custom-ranges.component';
 import { TimepickerComponent } from './timepicker/timepicker.component';
+import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
 
 
 @NgModule({
@@ -30,12 +31,14 @@ import { TimepickerComponent } from './timepicker/timepicker.component';
     FullComponent,
     SingleDatepickerComponent,
     CustomRangesComponent,
+    ReactiveFormComponent,
     TimepickerComponent
   ],
   imports: [
     BrowserModule,
     NoopAnimationsModule,
     FormsModule,
+    ReactiveFormsModule,
     MatButtonModule,
     MatCheckboxModule,
     MatToolbarModule,
@@ -44,7 +47,8 @@ import { TimepickerComponent } from './timepicker/timepicker.component';
     MatInputModule,
     MatSelectModule,
     NgxDaterangepickerMd.forRoot({
-      applyLabel: 'Okay'
+      applyLabel: 'Okay',
+      firstDay: 3
     }),
     RouterModule.forRoot(AppRoutes),
   ],

demo/src/app/app.routing.ts

@@ -4,6 +4,7 @@ import { FullComponent } from './full/full.component';
 import { CustomRangesComponent } from './custom-ranges/custom-ranges.component';
 import { SingleDatepickerComponent } from './single-datepicker/single-datepicker.component';
 import { TimepickerComponent } from './timepicker/timepicker.component';
+import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
 
 export const AppRoutes: Routes = [
     {
@@ -30,5 +31,9 @@ export const AppRoutes: Routes = [
     {
         path: 'custom-ranges',
         component: CustomRangesComponent,
+    },
+    {
+        path: 'reactive-forms',
+        component: ReactiveFormComponent,
     }
 ];

demo/src/app/reactive-form/reactive-form.component.html

@@ -0,0 +1,17 @@
+<mat-toolbar>Reactive forms</mat-toolbar>
+<form [formGroup]="form" (ngSubmit)="submit()">
+  <div class="row">
+    <div class="col s6">
+        <input type="text" ngxDaterangepickerMd
+        formControlName="selected" class="form-control" placeholder="Choose date"
+        [showDropdowns]="true"
+        showCancel="true"
+        />
+    </div>
+    <div class="col s6">
+      <br/>
+      <button type="submit" class="ngx-daterangepicker-action waves-effect waves-light btn" >Submit</button>
+    </div>
+  </div>
+</form>
+

demo/src/app/reactive-form/reactive-form.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'reactive-form',
+  templateUrl: './reactive-form.component.html',
+  styleUrls: ['./reactive-form.component.scss']
+})
+export class ReactiveFormComponent implements OnInit {
+  form: FormGroup;
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      selected: [{
+        startDate: moment('2015-11-24T00:00Z'),
+        endDate: moment('2015-11-26T00:00Z')
+      }, Validators.required],
+    });
+   }
+
+  ngOnInit() {
+  }
+  submit() {
+    console.log(this.form.value)
+  }
+}

demo/src/app/simple/simple.component.html

@@ -31,16 +31,9 @@
 <hr/>
 <div class="row">
   <div class="col s12">
-      <h1>Inline daterangepicker</h1>
-  </div>
-</div>
-<div class="row">
-  <div class="col s12">
-    <ngx-daterangepicker-material (choosedDate)="choosedDate($event)" [locale]="{applyLabel: 'Done', firstDay: 1}"></ngx-daterangepicker-material>
-  </div>
-</div>
-<div class="row">
-  <div class="col s12">
+      <h3>Inline daterangepicker</h3>
+      <ngx-daterangepicker-material (choosedDate)="choosedDate($event)" [locale]="{applyLabel: 'Done', firstDay: 1}"></ngx-daterangepicker-material>
+      <br>
       Choosed date: {{inlineDate | json}}
   </div>
 </div>

demo/src/app/single-datepicker/single-datepicker.component.html

@@ -5,7 +5,7 @@
     ngxDaterangepickerMd
     [isInvalidDate]="isInvalidDate"
     [isCustomDate]="isCustomDate"
-    [locale]="{format: 'DD/MM/YYYY', firstDay: 1}"
+    [locale]="{format: 'DD/MM/YYYY', firstDay: 2}"
     [(ngModel)]="selected" [singleDatePicker]="true" [autoApply]="true" class="form-control"/>
   </div>
 </div>
@@ -18,7 +18,7 @@
   ngxDaterangepickerMd
   [isInvalidDate]="isInvalidDate"
   [isCustomDate]="isCustomDate"
-  [locale]="{{ '{' }}format: 'DD/MM/YYYY', firstDay: 1}"
+  [locale]="{{ '{' }}format: 'DD/MM/YYYY', firstDay: 2}"
   [(ngModel)]="selected"
   [singleDatePicker]="true"
   [autoApply]="true"/&gt;</code>