diff --git a/.eslintrc b/.eslintrc
index d1c712f4..ca273492 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -31,8 +31,7 @@
   "plugins": ["html"],
   "env": {
     "mocha": true,
-    "browser": true,
-    "node": true
+    "browser": true
   },
   "globals": {
     "Polymer": true,
@@ -40,9 +39,8 @@
     "flush": true,
     "expect": true,
     "fixture": true,
-    "DtToolsBehavior": true,
-    "DtPagesBehavior": true,
     "moment": true,
-    "assert": true
+    "assert": true,
+    "RangeDatepickerBehavior"
   }
 }
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..aeeed499
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+*.js text eol=lf
+*.html text eol=lf
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27914d05..e14692f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,84 +1,131 @@
 # Change Log
 
+## [v0.0.25](https://github.com/RoXuS/range-datepicker/tree/0.0.25) (2018-03-30)
+
+* Fix demo paths ([commit](https://github.com/RoXuS/range-datepicker/commit/157dcfb6))
+* Fix eslint error ([commit](https://github.com/RoXuS/range-datepicker/commit/e65cac9d))
+
+## [v0.0.24](https://github.com/RoXuS/range-datepicker/tree/0.0.24) (2018-03-30)
+
+* Use html template ([commit](https://github.com/RoXuS/range-datepicker/commit/7570e4c4))
+
+## [v0.0.23](https://github.com/RoXuS/range-datepicker/tree/0.0.23) (2018-03-27)
+
+* Move js into the html ([commit](https://github.com/RoXuS/range-datepicker/commit/8704029))
+* Set date event if date is null ([commit](https://github.com/RoXuS/range-datepicker/commit/6792018))
+
+## [v0.0.22](https://github.com/RoXuS/range-datepicker/tree/0.0.22) (2018-03-19)
+
+* Set default value to empty instead of 0 ([commit](https://github.com/RoXuS/range-datepicker/commit/370bf6f))
+
+## [v0.0.21](https://github.com/RoXuS/range-datepicker/tree/0.0.21) (2018-03-19)
+
+* Add next and prev button to narrow view ([commit](https://github.com/RoXuS/range-datepicker/commit/b5511ee))
+
+## [v0.0.20](https://github.com/RoXuS/range-datepicker/tree/0.0.20) (2018-03-04)
+
+* Fix to forward properties following new change on polymer 2.5 ([commit](https://github.com/RoXuS/range-datepicker/commit/6cf0c48))
+
+## [v0.0.19](https://github.com/RoXuS/range-datepicker/tree/0.0.19) (2018-01-10)
+
+* Set on-tap on a div instead of slot to avoid bug on firefox ([commit](https://github.com/RoXuS/range-datepicker/commit/bd4c97aa))
+
 ## [v0.0.18](https://github.com/RoXuS/range-datepicker/tree/0.0.18) (2017-11-30)
-- Handle noRange case in case of force narrow on input element ([commit](https://github.com/RoXuS/range-datepicker/commit/48bc4f28))
+
+* Handle noRange case in case of force narrow on input element ([commit](https://github.com/RoXuS/range-datepicker/commit/48bc4f28))
 
 ## [v0.0.17](https://github.com/RoXuS/range-datepicker/tree/0.0.17) (2017-11-28)
-- Other eslint fix ([commit](https://github.com/RoXuS/range-datepicker/commit/0939c8b1))
-- Rework travis build ([commit](https://github.com/RoXuS/range-datepicker/commit/4775d751))
-- Fix bug in case of multi template instance ([commit](https://github.com/RoXuS/range-datepicker/commit/a7f67109))
-- Update eslint rules ([commit](https://github.com/RoXuS/range-datepicker/commit/0b0123ba))
+
+* Other eslint fix ([commit](https://github.com/RoXuS/range-datepicker/commit/0939c8b1))
+* Rework travis build ([commit](https://github.com/RoXuS/range-datepicker/commit/4775d751))
+* Fix bug in case of multi template instance ([commit](https://github.com/RoXuS/range-datepicker/commit/a7f67109))
+* Update eslint rules ([commit](https://github.com/RoXuS/range-datepicker/commit/0b0123ba))
 
 ## [v0.0.16](https://github.com/RoXuS/range-datepicker/tree/0.0.16) (2017-11-27)
-- adding style variables ([commit](https://github.com/RoXuS/range-datepicker/commit/e1038c1e))
-- don't need the extra event handling on month change ([commit](https://github.com/RoXuS/range-datepicker/commit/6c071b6e))
-- apply all properties to narrow view as well ([commit](https://github.com/RoXuS/range-datepicker/commit/0069171b))
+
+* adding style variables ([commit](https://github.com/RoXuS/range-datepicker/commit/e1038c1e))
+* don't need the extra event handling on month change ([commit](https://github.com/RoXuS/range-datepicker/commit/6c071b6e))
+* apply all properties to narrow view as well ([commit](https://github.com/RoXuS/range-datepicker/commit/0069171b))
 
 ## [v0.0.15](https://github.com/RoXuS/range-datepicker/tree/0.0.15) (2017-10-12)
-- Fix css on paper-material element ([commit](https://github.com/RoXuS/range-datepicker/commit/62e40cb0))
-- Fix error when the dateFrom is equal to zero ([commit](https://github.com/RoXuS/range-datepicker/commit/92d0106c))
+
+* Fix css on paper-material element ([commit](https://github.com/RoXuS/range-datepicker/commit/62e40cb0))
+* Fix error when the dateFrom is equal to zero ([commit](https://github.com/RoXuS/range-datepicker/commit/92d0106c))
 
 ## [v0.0.14](https://github.com/RoXuS/range-datepicker/tree/0.0.14) (2017-09-27)
-- Fix bug when date from is empty or null by default ([commit](https://github.com/RoXuS/range-datepicker/commit/95ab7c6c))
-- Fix some bugs on range-datepicker-input ([commit](https://github.com/RoXuS/range-datepicker/commit/c7d5d389))
-- Add polymerMixin annotation ([commit](https://github.com/RoXuS/range-datepicker/commit/a4fd3cfe))
-- Update README ([commit](https://github.com/RoXuS/range-datepicker/commit/2e7d31d6))
+
+* Fix bug when date from is empty or null by default ([commit](https://github.com/RoXuS/range-datepicker/commit/95ab7c6c))
+* Fix some bugs on range-datepicker-input ([commit](https://github.com/RoXuS/range-datepicker/commit/c7d5d389))
+* Add polymerMixin annotation ([commit](https://github.com/RoXuS/range-datepicker/commit/a4fd3cfe))
+* Update README ([commit](https://github.com/RoXuS/range-datepicker/commit/2e7d31d6))
 
 ## [v0.0.13](https://github.com/RoXuS/range-datepicker/tree/0.0.13) (2017-08-10)
-- adding npm package info ([commit](https://github.com/RoXuS/range-datepicker/commit/dc659eb))
-- Fix bug on prev/next month ([commit](https://github.com/RoXuS/range-datepicker/commit/d384838))
-- Update readme ([commit](https://github.com/RoXuS/range-datepicker/commit/83b810a))
-- Merge remote-tracking branch 'loekup/edge-fixes' ([commit](https://github.com/RoXuS/range-datepicker/commit/3b766d2))
-- Add documentation ([commit](https://github.com/RoXuS/range-datepicker/commit/025edb8))
-- Fix bug on range-datepicker-pinput ([commit](https://github.com/RoXuS/range-datepicker/commit/0bea6eb))
-- Change table to divs as ie11 cant handle templates in tables ([commit](https://github.com/RoXuS/range-datepicker/commit/4f410c4))
-- Give tr a height to fix render bug in edge ([commit](https://github.com/RoXuS/range-datepicker/commit/c1b3435))
-- Fix eslint errors ([commit](https://github.com/RoXuS/range-datepicker/commit/1f52fbc))
-- Update README ([commit](https://github.com/RoXuS/range-datepicker/commit/64a6ead))
+
+* adding npm package info ([commit](https://github.com/RoXuS/range-datepicker/commit/dc659eb))
+* Fix bug on prev/next month ([commit](https://github.com/RoXuS/range-datepicker/commit/d384838))
+* Update readme ([commit](https://github.com/RoXuS/range-datepicker/commit/83b810a))
+* Merge remote-tracking branch 'loekup/edge-fixes' ([commit](https://github.com/RoXuS/range-datepicker/commit/3b766d2))
+* Add documentation ([commit](https://github.com/RoXuS/range-datepicker/commit/025edb8))
+* Fix bug on range-datepicker-pinput ([commit](https://github.com/RoXuS/range-datepicker/commit/0bea6eb))
+* Change table to divs as ie11 cant handle templates in tables ([commit](https://github.com/RoXuS/range-datepicker/commit/4f410c4))
+* Give tr a height to fix render bug in edge ([commit](https://github.com/RoXuS/range-datepicker/commit/c1b3435))
+* Fix eslint errors ([commit](https://github.com/RoXuS/range-datepicker/commit/1f52fbc))
+* Update README ([commit](https://github.com/RoXuS/range-datepicker/commit/64a6ead))
 
 ## [v0.0.12](https://github.com/RoXuS/range-datepicker/tree/0.0.12) (2017-08-01)
-- Add range-datepicker-input ([commit](https://github.com/RoXuS/range-datepicker/commit/e25fc63))
-- Use png instead of gif ([commit](https://github.com/RoXuS/range-datepicker/commit/97b3f79))
+
+* Add range-datepicker-input ([commit](https://github.com/RoXuS/range-datepicker/commit/e25fc63))
+* Use png instead of gif ([commit](https://github.com/RoXuS/range-datepicker/commit/97b3f79))
 
 ## [v0.0.11](https://github.com/RoXuS/range-datepicker/tree/0.0.11) (2017-08-01)
-- Add a feature to disable some targeted days ([commit](https://github.com/RoXuS/range-datepicker/commit/5c03cb8))
-- Add feature min and max ([commit](https://github.com/RoXuS/range-datepicker/commit/4565e8b))
+
+* Add a feature to disable some targeted days ([commit](https://github.com/RoXuS/range-datepicker/commit/5c03cb8))
+* Add feature min and max ([commit](https://github.com/RoXuS/range-datepicker/commit/4565e8b))
 
 ## [v0.0.10](https://github.com/RoXuS/range-datepicker/tree/0.0.10) (2017-07-31)
-- New property to allow year change or not ([commit](https://github.com/RoXuS/range-datepicker/commit/939907a))
+
+* New property to allow year change or not ([commit](https://github.com/RoXuS/range-datepicker/commit/939907a))
 
 ## [v0.0.9](https://github.com/RoXuS/range-datepicker/tree/0.0.9) (2017-07-30)
-- Some graphicals fix, add css mixin to customize cells ([commit](https://github.com/RoXuS/range-datepicker/commit/f17f4e4))
-- Update readme ([commit](https://github.com/RoXuS/range-datepicker/commit/b773670))
+
+* Some graphicals fix, add css mixin to customize cells ([commit](https://github.com/RoXuS/range-datepicker/commit/f17f4e4))
+* Update readme ([commit](https://github.com/RoXuS/range-datepicker/commit/b773670))
 
 ## [v0.0.8](https://github.com/RoXuS/range-datepicker/tree/0.0.8) (2017-07-28)
-- Dropdown to change year, some graphical change, animation ([commit](https://github.com/RoXuS/range-datepicker/commit/fc17304))
+
+* Dropdown to change year, some graphical change, animation ([commit](https://github.com/RoXuS/range-datepicker/commit/fc17304))
 
 ## [v0.0.7](https://github.com/RoXuS/range-datepicker/tree/0.0.7) (2017-07-26)
-- Simplify fill of empty tds ([commit](https://github.com/RoXuS/range-datepicker/commit/e6102ee))
-- Fi some bug link to locales ([commit](https://github.com/RoXuS/range-datepicker/commit/fb526e0))
-- Fix year switch ([commit](https://github.com/RoXuS/range-datepicker/commit/db5c8f3))
+
+* Simplify fill of empty tds ([commit](https://github.com/RoXuS/range-datepicker/commit/e6102ee))
+* Fi some bug link to locales ([commit](https://github.com/RoXuS/range-datepicker/commit/fb526e0))
+* Fix year switch ([commit](https://github.com/RoXuS/range-datepicker/commit/db5c8f3))
 
 ## [v0.0.6](https://github.com/RoXuS/range-datepicker/tree/0.0.6) (2017-07-26)
-- Handle range/no-range switch ([commit](https://github.com/RoXuS/range-datepicker/commit/42de4cad))
-- Remove horizontal align ([commit](https://github.com/RoXuS/range-datepicker/commit/d3fa8bf9))
+
+* Handle range/no-range switch ([commit](https://github.com/RoXuS/range-datepicker/commit/42de4cad))
+* Remove horizontal align ([commit](https://github.com/RoXuS/range-datepicker/commit/d3fa8bf9))
 
 ## [v0.0.5](https://github.com/RoXuS/range-datepicker/tree/0.0.5) (2017-07-25)
-- Fix events listeners ([commit](https://github.com/RoXuS/range-datepicker/commit/ce935f2a))
+
+* Fix events listeners ([commit](https://github.com/RoXuS/range-datepicker/commit/ce935f2a))
 
 ## [v0.0.4](https://github.com/RoXuS/range-datepicker/tree/0.0.4) (2017-07-25)
-- Use locales locally and not globally ([commit](https://github.com/RoXuS/range-datepicker/commit/0be8940))
-- Update README ([commit](https://github.com/RoXuS/range-datepicker/commit/c5faf04))
-- Force narrow on mobile view ([commit](https://github.com/RoXuS/range-datepicker/commit/b1c3f5f))
-- Update Readme.md ([commit](https://github.com/RoXuS/range-datepicker/commit/b174163))
+
+* Use locales locally and not globally ([commit](https://github.com/RoXuS/range-datepicker/commit/0be8940))
+* Update README ([commit](https://github.com/RoXuS/range-datepicker/commit/c5faf04))
+* Force narrow on mobile view ([commit](https://github.com/RoXuS/range-datepicker/commit/b1c3f5f))
+* Update Readme.md ([commit](https://github.com/RoXuS/range-datepicker/commit/b174163))
 
 ## [v0.0.3](https://github.com/RoXuS/range-datepicker/tree/0.0.3) (2017-07-25)
-- Expose date from and date to ([commit](https://github.com/RoXuS/range-datepicker/commit/efe0478))
+
+* Expose date from and date to ([commit](https://github.com/RoXuS/range-datepicker/commit/efe0478))
 
 ## [v0.0.2](https://github.com/RoXuS/range-datepicker/tree/0.0.2) (2017-07-25)
-- Change README.md ([commit](https://github.com/RoXuS/range-datepicker/commit/4532ee5))
-- Add eslint in travis conf ([commit](https://github.com/RoXuS/range-datepicker/commit/708ab6c))
-- Change readme.md ([commit](https://github.com/RoXuS/range-datepicker/commit/6f93390))
-- Add license ([commit](https://github.com/RoXuS/range-datepicker/commit/b8ccb85))
+
+* Change README.md ([commit](https://github.com/RoXuS/range-datepicker/commit/4532ee5))
+* Add eslint in travis conf ([commit](https://github.com/RoXuS/range-datepicker/commit/708ab6c))
+* Change readme.md ([commit](https://github.com/RoXuS/range-datepicker/commit/6f93390))
+* Add license ([commit](https://github.com/RoXuS/range-datepicker/commit/b8ccb85))
 
 ## [v0.0.1](https://github.com/RoXuS/range-datepicker/tree/0.0.1) (2017-07-25)
diff --git a/bower.json b/bower.json
index fb0b98e4..05e27d17 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,10 @@
 {
-  "name": "range-datepicker",
+  "name": "yoerayo-range-datepicker",
   "main": "range-datepicker.html",
-  "version": "0.0.18",
+  "version": "0.0.25",
   "authors": [
-    "Julien Rousseau <RoXuS>"
+    "Julien Rousseau <RoXuS>",
+    "Keith Starling"
   ],
   "description": "range-datepicker provides a simple datepicker with range.",
   "keywords": [
diff --git a/demo/index.html b/demo/index.html
index 4fb00a8f..bd2113b8 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -34,7 +34,7 @@ <h3>Basic range-datepicker range</h3>
           <template>
             <div>Date from : [[dateFrom]]</div>
             <div>Date to : [[dateTo]]</div>
-            <range-datepicker date-from="{{dateFrom}}" date-to="{{dateTo}}"></range-datepicker>
+            <range-datepicker show-days-before="true" show-days-after="true" date-from="{{dateFrom}}" date-to="{{dateTo}}"></range-datepicker>
           </template>
         </dom-bind>
       </template>
@@ -48,12 +48,12 @@ <h3>Basic range-datepicker-input by using your custom inputs (with template)</h3
         <dom-bind>
           <template>
             <range-datepicker-input date-format="MM/DD/YYYY">
-              <template>
-                <div class="layout horizontal center">
-                  <paper-input label="Date from" value="[[dateFrom]]" readonly></paper-input>
-                  <paper-input label="Date to" value="[[dateTo]]" readonly></paper-input>
-                </div>
-              </template>
+                <template>
+                  <div class="layout horizontal center">
+                    <paper-input label="Date from" value="{{dateFrom}}"></paper-input>
+                    <paper-input label="Date to" value="{{dateTo}}"></paper-input>
+                  </div>
+                </template>
             </range-datepicker-input>
           </template>
         </dom-bind>
@@ -133,4 +133,4 @@ <h3>Basic range-datepicker range with locale</h3>
   </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 383087f7..0714234f 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
-  <link rel="import" href="/bower_components/iron-component-page/iron-component-page.html">
+  <script src="../webcomponentsjs/webcomponents-loader.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
 </head>
 
 <body>
diff --git a/package.json b/package.json
index 3f097da3..6e627750 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,20 @@
 {
-	"name": "range-datepicker",
-	"main": "range-datepicker.html",
-	"author": "Julien Rousseau <RoXuS>",
-	"version": "0.0.18",
-	"description": "range-datepicker provides a simple datepicker with range.",
-	"private": false,
-	"devDependencies": {
-		"eslint": "^4.9.0",
-		"eslint-config-airbnb-base": "^12.0.2",
-		"eslint-plugin-import": "^2.7.0",
-		"eslint-plugin-html": "^3.2.2",
-		"web-component-tester": "^6.0.0",
-		"polymer-cli": "^1.5.7"
-	},
-	"scripts": {
-		"lint:javascript": "eslint . --ext js,html --ignore-path .gitignore",
-		"install:dependencies": "polymer install --variants"
-	}
+  "name": "range-datepicker",
+  "main": "range-datepicker.html",
+  "author": "Julien Rousseau <RoXuS>",
+  "version": "0.0.25",
+  "description": "range-datepicker provides a simple datepicker with range.",
+  "private": false,
+  "devDependencies": {
+    "eslint": "^4.9.0",
+    "eslint-config-airbnb-base": "^12.0.2",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-html": "^3.2.2",
+    "web-component-tester": "^6.0.0",
+    "polymer-cli": "^1.5.7"
+  },
+  "scripts": {
+    "lint:javascript": "eslint . --ext js,html --ignore-path .gitignore",
+    "install:dependencies": "polymer install --variants"
+  }
 }
diff --git a/range-datepicker-calendar.html b/range-datepicker-calendar.html
index 8e9146dd..52c90934 100644
--- a/range-datepicker-calendar.html
+++ b/range-datepicker-calendar.html
@@ -122,6 +122,7 @@
 
         --paper-input-container-input: {
           @apply --paper-font-title;
+	  color: var(--range-datepicker-month-text);
         }
       }
     </style>
diff --git a/range-datepicker-calendar.js b/range-datepicker-calendar.js
index 8602f10b..d31b911d 100644
--- a/range-datepicker-calendar.js
+++ b/range-datepicker-calendar.js
@@ -60,6 +60,14 @@ class RangeDatepickerCalendar extends Polymer.Element {
       min: Number,
       max: Number,
       disabledDays: Array,
+      showDaysBefore: {
+        type: Boolean,
+        value: false,
+      },
+      showDaysAfter: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -85,6 +93,14 @@ class RangeDatepickerCalendar extends Polymer.Element {
         .locale(this.locale)
         .endOf('month');
 
+      if (this.showDaysBefore) {
+        startDate.startOf('week');
+      }
+
+      if (this.showDaysAfter) {
+        endDate.endOf('week');
+      }
+
       const rows = [];
       let columns = [];
 
diff --git a/range-datepicker-input-no-moment.html b/range-datepicker-input-no-moment.html
new file mode 100644
index 00000000..f83cfcea
--- /dev/null
+++ b/range-datepicker-input-no-moment.html
@@ -0,0 +1,288 @@
+<link rel="import" href="../polymer/polymer-element.html">
+
+<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../iron-media-query/iron-media-query.html">
+
+<link rel="import" href="../paper-input/paper-input.html">
+<link rel="import" href="../paper-material/paper-material.html">
+
+<link rel="import" href="range-datepicker-calendar.html">
+<link rel="import" href="range-datepicker-behavior.html">
+
+<dom-module id="range-datepicker-input">
+  <script>
+    /* global RangeDatepickerBehavior */
+    const { html } = Polymer;
+    /**
+     * `range-datepicker-input`
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     * @appliesMixin RangeDatepickerBehavior
+     */
+    class RangeDatepickerInput extends Polymer.mixinBehaviors(
+      [Polymer.Templatizer],
+      RangeDatepickerBehavior(Polymer.Element)
+    ) {
+      static get is() {
+        return 'range-datepicker-input';
+      }
+      static get properties() {
+        return {
+          /**
+           * If setted only one date can be selected.
+           */
+          noRange: {
+            type: Boolean,
+            value: false,
+            observer: '_noRangeChanged',
+          },
+          /**
+           * Force display one month.
+           */
+          forceNarrow: {
+            type: Boolean,
+            value: false,
+          },
+          /**
+           * If true, only one month is displayed.
+           */
+          narrow: {
+            type: Boolean,
+            value: false,
+            notify: true,
+          },
+          /**
+           * Set locale of the calendar.
+           * Default is 'en'.
+           */
+          locale: {
+            type: String,
+            value: 'en',
+            observer: '_localeChanged',
+          },
+          /**
+           * Set month.
+           * Format is MM (example: 07 for July, 12 for january).
+           * Default is current month.
+           */
+          month: String,
+          _monthPlus: String,
+          _yearPlus: Number,
+          /**
+           * Set year.
+           * Default is current year.
+           */
+          year: String,
+          /**
+           * Date from.
+           * Format is Unix timestamp.
+           */
+          dateFrom: {
+            type: String,
+            notify: true,
+            observer: '_dateFromChanged',
+          },
+          /**
+           * Date to.
+           * Format is Unix timestamp.
+           */
+          dateTo: {
+            type: String,
+            notify: true,
+            observer: '_dateToChanged',
+          },
+          /**
+           * Current hovered date.
+           * Format is Unix timestamp.
+           */
+          _hoveredDate: String,
+          enableYearChange: {
+            type: Boolean,
+            value: false,
+          },
+          /**
+           * Minimal date.
+           * Format is Unix timestamp.
+           */
+          min: Number,
+          /**
+           * Maximal date.
+           * Format is Unix timestamp.
+           */
+          max: Number,
+          /**
+           * Array of disabled days.
+           * Format is Unix timestamp.
+           */
+          disabledDays: Array,
+
+          /**
+           * Format of the date.
+           * Default is DD/MM/YYYY.
+           */
+          dateFormat: {
+            type: String,
+            value: 'DD/MM/YYYY',
+          },
+          /**
+           * The orientation against which to align the dropdown content
+           * horizontally relative to the dropdown trigger.
+           */
+          horizontalAlign: {
+            type: String,
+            value: 'left',
+          },
+          _isNarrow: Function,
+        };
+      }
+
+      static get template() {
+        return html`
+          <style include="iron-flex iron-flex-alignment">
+            :host {
+              display: block;
+            }
+
+            #firstDatePicker {
+              margin-right: 16px;
+            }
+
+            iron-dropdown {
+              background: white;
+            }
+
+            paper-material {
+              padding: 16px;
+              display: block;
+            }
+          </style>
+          <iron-media-query query="(max-width: 650px)" query-matches="{{narrow}}"></iron-media-query>
+            <div id="trigger" on-tap="_handleOpenDropdown">
+              <slot></slot>
+            </div>
+
+            <iron-dropdown horizontal-align="[[horizontalAlign]]">
+              <paper-material slot="dropdown-content">
+                <dom-if if="[[!forceNarrow]]">
+                  <template>
+                    <dom-if if="[[!narrow]]">
+                      <template>
+                        <div class="layout vertical center-justified">
+                          <div class="layout horizontal">
+                            <range-datepicker-calendar show-days-before="[[showDaysBefore]]" disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected"
+                              enable-year-change="[[enableYearChange]]" prev no-range="[[noRange]]" on-prev-month="_handlePrevMonth"
+                              hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}" date-from="{{dateFrom}}" id="firstDatePicker"
+                              locale="[[locale]]" month="[[month]]" year="[[year]]">
+                            </range-datepicker-calendar>
+                            <range-datepicker-calendar show-days-after="[[showDaysAfter]]" disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected"
+                              enable-year-change="[[enableYearChange]]" next no-range="[[noRange]]" on-next-month="_handleNextMonth"
+                              hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}" date-from="{{dateFrom}}" locale="[[locale]]"
+                              month="[[_monthPlus]]" year="[[_yearPlus]]">
+                            </range-datepicker-calendar>
+                          </div>
+                        </div>
+                      </template>
+                    </dom-if>
+                  </template>
+                </dom-if>
+                <dom-if if="[[_isNarrow(forceNarrow, narrow)]]">
+                  <template>
+                    <range-datepicker-calendar show-days-before="[[showDaysBefore]]" show-days-after="[[showDaysAfter]]" disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" enable-year-change="[[enableYearChange]]"
+                      narrow="[[_isNarrow(forceNarrow, narrow)]]" hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}"
+                      date-from="{{dateFrom}}" locale="[[locale]]" month="[[month]]" year="[[year]]" no-range="[[noRange]]"
+                      next prev>
+                    </range-datepicker-calendar>
+                  </template>
+                </dom-if>
+              </paper-material>
+            </iron-dropdown>`;
+      }
+
+      static get observers() {
+        return ['_monthChanged(month, year)'];
+      }
+
+      constructor() {
+        super();
+        this.instances = [];
+      }
+
+      _handleOpenDropdown() {
+        this.shadowRoot.querySelector('iron-dropdown').open();
+      }
+
+      _formatDate(date) {
+        if (date) {
+          return moment(date, 'X')
+            .locale(this.locale)
+            .format(this.dateFormat);
+        }
+        return '';
+      }
+
+      _dateFromChanged(date) {
+        if (this.instance) {
+          if (this.noRange && date) {
+            this.shadowRoot.querySelector('iron-dropdown').close();
+          }
+          this.instance.dateFrom = this._formatDate(this.dateFrom);
+        }
+      }
+
+      _dateToChanged(date) {
+        if (this.instance) {
+          if (date) {
+            this.shadowRoot.querySelector('iron-dropdown').close();
+          }
+          this.instance.dateTo = this._formatDate(this.dateTo);
+          this.instance.dateFrom = this._formatDate(this.dateFrom);
+        }
+      }
+
+      ready() {
+        super.ready();
+        if (!this.ctor) {
+          const props = {
+            __key__: true,
+            [this.dateTo]: true,
+            [this.dateFrom]: true,
+          };
+          this._parentTemplate = this.queryEffectiveChildren('template');
+          this.ctor = Polymer.Templatize.templatize(this._parentTemplate, this, {
+            instanceProps: props,
+            forwardHostProp(prop, value) {
+              this.instances.forEach((inst) => {
+                inst.forwardHostProp(prop, value);
+              });
+            },
+          });
+          this._ensureTemplatized();
+        }
+      }
+
+      _ensureTemplatized() {
+        this.instance = new this.ctor({ dateTo: '', dateFrom: '' });
+        this.instances.push(this.instance);
+
+        const dateFrom = this.dateFrom ? this._formatDate(this.dateFrom) : '';
+        const dateTo = this.dateTo ? this._formatDate(this.dateTo) : '';
+        this._itemsParent.appendChild(this.instance.root);
+        if (dateFrom) {
+          this.instance.dateFrom = dateFrom;
+        }
+        if (dateTo) {
+          this.instance.dateTo = dateTo;
+        }
+      }
+
+      get _itemsParent() {
+        return Polymer.dom(Polymer.dom(this._parentTemplate).parentNode);
+      }
+    }
+
+    window.customElements.define(RangeDatepickerInput.is, RangeDatepickerInput);
+
+  </script>
+</dom-module>
diff --git a/range-datepicker-input.html b/range-datepicker-input.html
index 6f1a9e20..6e5c7c71 100644
--- a/range-datepicker-input.html
+++ b/range-datepicker-input.html
@@ -1,74 +1,2 @@
-<link rel="import" href="../polymer/polymer-element.html">
-
-<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../iron-media-query/iron-media-query.html">
-
-<link rel="import" href="../paper-input/paper-input.html">
-<link rel="import" href="../paper-material/paper-material.html">
-
-<link rel="import" href="range-datepicker-calendar.html">
-<link rel="import" href="range-datepicker-behavior.html">
 <link rel="import" href="moment-import.html">
-
-<dom-module id="range-datepicker-input">
-  <template>
-    <style include="iron-flex iron-flex-alignment">
-       :host {
-        display: block;
-      }
-
-      #firstDatePicker {
-        margin-right: 16px;
-      }
-
-      iron-dropdown {
-        background: white;
-      }
-
-      paper-material {
-        padding: 16px;
-        display: block;
-      }
-    </style>
-
-    <iron-media-query query="(max-width: 650px)" query-matches="{{narrow}}"></iron-media-query>
-
-    <slot on-tap="_handleOpenDropdown"></slot>
-
-    <iron-dropdown horizontal-align="[[horizontalAlign]]">
-      <paper-material slot="dropdown-content">
-        <dom-if if="[[!forceNarrow]]">
-          <template>
-            <dom-if if="[[!narrow]]">
-              <template>
-                <div class="layout vertical center-justified">
-                  <div class="layout horizontal">
-                    <range-datepicker-calendar disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected"
-                      enable-year-change="[[enableYearChange]]" prev no-range="[[noRange]]" on-prev-month="_handlePrevMonth"
-                      hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}" date-from="{{dateFrom}}" id="firstDatePicker"
-                      locale="[[locale]]" month="[[month]]" year="[[year]]">
-                    </range-datepicker-calendar>
-                    <range-datepicker-calendar disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected"
-                      enable-year-change="[[enableYearChange]]" next no-range="[[noRange]]" on-next-month="_handleNextMonth"
-                      hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}" date-from="{{dateFrom}}" locale="[[locale]]"
-                      month="[[_monthPlus]]" year="[[_yearPlus]]">
-                    </range-datepicker-calendar>
-                  </div>
-                </div>
-              </template>
-            </dom-if>
-          </template>
-        </dom-if>
-        <dom-if if="[[_isNarrow(forceNarrow, narrow)]]">
-          <template>
-            <range-datepicker-calendar disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" enable-year-change="[[enableYearChange]]"
-              narrow="[[_isNarrow(forceNarrow, narrow)]]" hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}"
-              date-from="{{dateFrom}}" locale="[[locale]]" month="[[month]]" year="[[year]]" no-range="[[noRange]]">
-            </range-datepicker-calendar>
-          </template>
-        </dom-if>
-      </paper-material>
-    </iron-dropdown>
-  </template>
-  <script src="range-datepicker-input.js"></script>
-</dom-module>
\ No newline at end of file
+<link rel="import" href="range-datepicker-input-no-moment.html">
diff --git a/range-datepicker-input.js b/range-datepicker-input.js
deleted file mode 100644
index 7087d58f..00000000
--- a/range-datepicker-input.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/* global RangeDatepickerBehavior */
-/**
- * `range-datepicker-input`
- *
- * @customElement
- * @polymer
- * @demo demo/index.html
- */
-class RangeDatepickerInput extends Polymer.mixinBehaviors(
-  [Polymer.Templatizer],
-  RangeDatepickerBehavior(Polymer.Element)
-) {
-  static get is() {
-    return 'range-datepicker-input';
-  }
-  static get properties() {
-    return {
-      /**
-       * If setted only one date can be selected.
-       */
-      noRange: {
-        type: Boolean,
-        value: false,
-        observer: '_noRangeChanged',
-      },
-      /**
-       * Force display one month.
-       */
-      forceNarrow: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * If true, only one month is displayed.
-       */
-      narrow: {
-        type: Boolean,
-        value: false,
-        notify: true,
-      },
-      /**
-       * Set locale of the calendar.
-       * Default is 'en'.
-       */
-      locale: {
-        type: String,
-        value: 'en',
-        observer: '_localeChanged',
-      },
-      /**
-       * Set month.
-       * Format is MM (example: 07 for July, 12 for january).
-       * Default is current month.
-       */
-      month: String,
-      _monthPlus: String,
-      _yearPlus: Number,
-      /**
-       * Set year.
-       * Default is current year.
-       */
-      year: String,
-      /**
-       * Date from.
-       * Format is Unix timestamp.
-       */
-      dateFrom: {
-        type: String,
-        notify: true,
-        observer: '_dateFromChanged',
-      },
-      /**
-       * Date to.
-       * Format is Unix timestamp.
-       */
-      dateTo: {
-        type: String,
-        notify: true,
-        observer: '_dateToChanged',
-      },
-      /**
-       * Current hovered date.
-       * Format is Unix timestamp.
-       */
-      _hoveredDate: String,
-      enableYearChange: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * Minimal date.
-       * Format is Unix timestamp.
-       */
-      min: Number,
-      /**
-       * Maximal date.
-       * Format is Unix timestamp.
-       */
-      max: Number,
-      /**
-       * Array of disabled days.
-       * Format is Unix timestamp.
-       */
-      disabledDays: Array,
-
-      /**
-       * Format of the date.
-       * Default is DD/MM/YYYY.
-       */
-      dateFormat: {
-        type: String,
-        value: 'DD/MM/YYYY',
-      },
-      /**
-       * The orientation against which to align the dropdown content
-       * horizontally relative to the dropdown trigger.
-       */
-      horizontalAlign: {
-        type: String,
-        value: 'left',
-      },
-    };
-  }
-
-  static get observers() {
-    return ['_monthChanged(month, year)'];
-  }
-
-  _handleOpenDropdown() {
-    this.shadowRoot.querySelector('iron-dropdown').open();
-  }
-
-  _formatDate(date) {
-    if (date) {
-      return moment(date, 'X')
-        .locale(this.locale)
-        .format(this.dateFormat);
-    }
-    return '';
-  }
-
-  _dateFromChanged(date) {
-    if (this.noRange && date && this.instance) {
-      this.shadowRoot.querySelector('iron-dropdown').close();
-      this.instance.dateFrom = this._formatDate(this.dateFrom);
-    }
-  }
-
-  _dateToChanged(date) {
-    if (date) {
-      this.shadowRoot.querySelector('iron-dropdown').close();
-      this.instance.dateTo = this._formatDate(this.dateTo);
-      this.instance.dateFrom = this._formatDate(this.dateFrom);
-    }
-  }
-
-  attached() {
-    this._ensureTemplatized();
-  }
-
-  _ensureTemplatized() {
-    if (!this.instance) {
-      this._userTemplate = this.queryEffectiveChildren('template');
-      const TemplateClass = Polymer.Templatize.templatize(this._userTemplate, this);
-      this.instance = new TemplateClass({ dateTo: 0, dateFrom: 0 });
-    }
-    const dateFrom = this.dateFrom ? this._formatDate(this.dateFrom) : 0;
-    const dateTo = this.dateTo ? this._formatDate(this.dateTo) : 0;
-    this._itemsParent.appendChild(this.instance.root);
-    if (dateFrom) {
-      this.instance.dateFrom = dateFrom;
-    }
-    if (dateTo) {
-      this.instance.dateTo = dateTo;
-    }
-  }
-
-  get _itemsParent() {
-    return Polymer.dom(Polymer.dom(this._userTemplate).parentNode);
-  }
-}
-
-window.customElements.define(RangeDatepickerInput.is, RangeDatepickerInput);
diff --git a/range-datepicker-no-moment.html b/range-datepicker-no-moment.html
new file mode 100644
index 00000000..b8745102
--- /dev/null
+++ b/range-datepicker-no-moment.html
@@ -0,0 +1,50 @@
+<link rel="import" href="../polymer/polymer-element.html">
+
+<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../iron-media-query/iron-media-query.html">
+
+<link rel="import" href="range-datepicker-calendar.html">
+<link rel="import" href="range-datepicker-behavior.html">
+
+<dom-module id="range-datepicker">
+  <template>
+    <style include="iron-flex iron-flex-alignment">
+       :host {
+        display: block;
+      }
+
+      #firstDatePicker {
+        margin-right: 16px;
+      }
+    </style>
+
+    <iron-media-query query="(max-width: 650px)" query-matches="{{narrow}}"></iron-media-query>
+
+    <dom-if if="[[!forceNarrow]]">
+      <template>
+        <dom-if if="[[!narrow]]">
+          <template>
+            <div class="layout vertical center-justified">
+              <div class="layout horizontal">
+                <range-datepicker-calendar show-days-before="[[showDaysBefore]]" disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected" enable-year-change="[[enableYearChange]]" prev no-range="[[noRange]]" on-prev-month="_handlePrevMonth" hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}"
+                  date-from="{{dateFrom}}" id="firstDatePicker" locale="[[locale]]" month="[[month]]" year="[[year]]">
+                </range-datepicker-calendar>
+                <range-datepicker-calendar show-days-after="[[showDaysAfter]]" disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected" enable-year-change="[[enableYearChange]]" next no-range="[[noRange]]" on-next-month="_handleNextMonth" hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}"
+                  date-from="{{dateFrom}}" locale="[[locale]]" month="[[_monthPlus]]" year="[[_yearPlus]]">
+                </range-datepicker-calendar>
+              </div>
+            </div>
+          </template>
+        </dom-if>
+      </template>
+    </dom-if>
+    <dom-if if="[[_isNarrow(forceNarrow, narrow)]]">
+      <template>
+        <range-datepicker-calendar show-days-before="[[showDaysBefore]]" show-days-after="[[showDaysAfter]]" disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected" enable-year-change="[[enableYearChange]]" prev next no-range="[[noRange]]" narrow="[[_isNarrow(forceNarrow, narrow)]]" hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}"
+          date-from="{{dateFrom}}" locale="[[locale]]" month="[[month]]" year="[[year]]">
+        </range-datepicker-calendar>
+      </template>
+    </dom-if>
+  </template>
+  <script src="range-datepicker.js"></script>
+</dom-module>
diff --git a/range-datepicker.html b/range-datepicker.html
index 6f127916..b03c6bfb 100644
--- a/range-datepicker.html
+++ b/range-datepicker.html
@@ -1,51 +1,2 @@
-<link rel="import" href="../polymer/polymer-element.html">
-
-<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../iron-media-query/iron-media-query.html">
-
-<link rel="import" href="range-datepicker-calendar.html">
-<link rel="import" href="range-datepicker-behavior.html">
 <link rel="import" href="moment-import.html">
-
-<dom-module id="range-datepicker">
-  <template>
-    <style include="iron-flex iron-flex-alignment">
-       :host {
-        display: block;
-      }
-
-      #firstDatePicker {
-        margin-right: 16px;
-      }
-    </style>
-
-    <iron-media-query query="(max-width: 650px)" query-matches="{{narrow}}"></iron-media-query>
-
-    <dom-if if="[[!forceNarrow]]">
-      <template>
-        <dom-if if="[[!narrow]]">
-          <template>
-            <div class="layout vertical center-justified">
-              <div class="layout horizontal">
-                <range-datepicker-calendar disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected" enable-year-change="[[enableYearChange]]" prev no-range="[[noRange]]" on-prev-month="_handlePrevMonth" hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}"
-                  date-from="{{dateFrom}}" id="firstDatePicker" locale="[[locale]]" month="[[month]]" year="[[year]]">
-                </range-datepicker-calendar>
-                <range-datepicker-calendar disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected" enable-year-change="[[enableYearChange]]" next no-range="[[noRange]]" on-next-month="_handleNextMonth" hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}"
-                  date-from="{{dateFrom}}" locale="[[locale]]" month="[[_monthPlus]]" year="[[_yearPlus]]">
-                </range-datepicker-calendar>
-              </div>
-            </div>
-          </template>
-        </dom-if>
-      </template>
-    </dom-if>
-    <dom-if if="[[_isNarrow(forceNarrow, narrow)]]">
-      <template>
-        <range-datepicker-calendar disabled-days="[[disabledDays]]" min="[[min]]" max="[[max]]" on-new-year-is-manually-selected="_handleNewYearSelected" enable-year-change="[[enableYearChange]]" no-range="[[noRange]]" narrow="[[_isNarrow(forceNarrow, narrow)]]" hovered-date="{{_hoveredDate}}" date-to="{{dateTo}}"
-          date-from="{{dateFrom}}" locale="[[locale]]" month="[[month]]" year="[[year]]">
-        </range-datepicker-calendar>
-      </template>
-    </dom-if>
-  </template>
-  <script src="range-datepicker.js"></script>
-</dom-module>
+<link rel="import" href="range-datepicker-no-moment.html">
diff --git a/range-datepicker.js b/range-datepicker.js
index 396a1aa7..9ba6db51 100644
--- a/range-datepicker.js
+++ b/range-datepicker.js
@@ -97,6 +97,14 @@ class RangeDatepicker extends RangeDatepickerBehavior(Polymer.Element) {
        * Format is Unix timestamp.
        */
       disabledDays: Array,
+      showDaysBefore: {
+        type: Boolean,
+        value: false,
+      },
+      showDaysAfter: {
+        type: Boolean,
+        value: false,
+      },
     };
   }