feat(customisation): ability to add custom classes and custom invalid…

… dates function

- isCustomDate
- isInvalidDate
Close #12

README.md

@@ -80,6 +80,13 @@ and [browse our demo code here](./demo/src/app).
 
 >These options are booleans
 
+### isCustomDate
+
+>(function) A function that is passed each date in the calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell
+
+### isInvalidDate
+>(function) A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not.
+
 ### minDate, maxDate
 
  >To set the minimal and maximal date, these options are a moment date

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

@@ -1,19 +1,47 @@
-<mat-toolbar>Single datepicker</mat-toolbar>
+<mat-toolbar>Single datepicker with custom invalid date & custom class on date</mat-toolbar>
 <div class="row">
   <div class="col s6">
     <input type="text"
     ngxDaterangepickerMd
+    [isInvalidDate]="isInvalidDate"
+    [isCustomDate]="isCustomDate"
+    [locale]="{format: 'DD/MM/YYYY', firstDay: 1}"
     [(ngModel)]="selected" [singleDatePicker]="true" [autoApply]="true" class="form-control"/>
   </div>
 </div>
 
 
 <div class="row">
-  <div class="col s12">
+  <div class="col s6">
     <b>Html code:</b>
       <pre class="prettyprint"><code class="html">&lt;input type="text"
   ngxDaterangepickerMd
-  [(ngModel)]="selected" [singleDatePicker]="true" [autoApply]="true"/&gt;</code>
+  [isInvalidDate]="isInvalidDate"
+  [isCustomDate]="isCustomDate"
+  [locale]="{{ '{' }}format: 'DD/MM/YYYY', firstDay: 1}"
+  [(ngModel)]="selected"
+  [singleDatePicker]="true"
+  [autoApply]="true"/&gt;</code>
+    </pre>
+
+  </div>
+  <div class="col s6">
+    <b>Typescript code:</b>
+      <pre class="prettyprint"><code class="javascript">export class SingleDatepickerComponent {{ '{' }}
+        selected: any;
+
+        constructor() {{ '{' }}
+          this.alwaysShowCalendars = true;
+        }
+        isInvalidDate(date) {{ '{' }}
+          return date.weekday() === 0;
+        }
+        isCustomDate(date) {{ '{' }}
+          return  (
+            date.weekday() === 0 ||
+            date.weekday() === 6
+          )  ? 'mycustomdate' : false;
+        }</code>
     </pre>
 
   </div>

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

@@ -9,8 +9,15 @@ import * as moment from 'moment';
 export class SingleDatepickerComponent implements OnInit {
   selected = moment();
   constructor() { }
-
   ngOnInit() {
   }
+  isInvalidDate(date) {
+    return date.weekday() === 0;
+  }
+  isCustomDate(date) {
+    return  (
+      date.weekday() === 0 || date.weekday() === 6
+    )  ? 'mycustomdate' : false;
+  }
 
 }

demo/src/styles.scss

@@ -1,3 +1,8 @@
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
-@import 'node_modules/materialize-css/sass/materialize.scss'
+@import 'node_modules/materialize-css/sass/materialize.scss';
+.mycustomdate {
+    background-color: #ccc8c8 !important;
+    border-radius: 1px !important;
+    color: white !important;
+}

src/daterangepicker/daterangepicker.directive.ts

@@ -80,6 +80,10 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   @Input()
   showDropdowns: boolean;
   @Input()
+  isInvalidDate: Function; 
+  @Input()
+  isCustomDate: Function; 
+  @Input()
   ranges: any;
   _locale: any = {};
   @Input() set locale(value) {
@@ -125,7 +129,6 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   @Output('change') onChange: EventEmitter<Object> = new EventEmitter(); 
   ngOnInit() {
     this.picker.choosedDate.asObservable().subscribe((change: any) => {
-    console.log('change', change);
       if (change) {
         const value = {};
         value[this._startKey] = change.startDate;