diff --git a/README.md b/README.md
index 5d9301f3..834925e0 100644
--- a/README.md
+++ b/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
diff --git a/demo/src/app/single-datepicker/single-datepicker.component.html b/demo/src/app/single-datepicker/single-datepicker.component.html
index 3bf5fbb3..beab564e 100644
--- a/demo/src/app/single-datepicker/single-datepicker.component.html
+++ b/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>
diff --git a/demo/src/app/single-datepicker/single-datepicker.component.ts b/demo/src/app/single-datepicker/single-datepicker.component.ts
index 2039a70e..3111eb35 100644
--- a/demo/src/app/single-datepicker/single-datepicker.component.ts
+++ b/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;
+  }
 
 }
diff --git a/demo/src/styles.scss b/demo/src/styles.scss
index dc408e8e..9b717613 100644
--- a/demo/src/styles.scss
+++ b/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'
\ No newline at end of file
+@import 'node_modules/materialize-css/sass/materialize.scss';
+.mycustomdate {
+    background-color: #ccc8c8 !important;
+    border-radius: 1px !important;
+    color: white !important;
+}
\ No newline at end of file
diff --git a/src/daterangepicker/daterangepicker.directive.ts b/src/daterangepicker/daterangepicker.directive.ts
index 4bfd8e1b..5a32e410 100644
--- a/src/daterangepicker/daterangepicker.directive.ts
+++ b/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;