Month format

.gitignore

@@ -4,3 +4,4 @@ node_modules
 .sass-cache
 .vscode
 /coverage
+.idea/

demo/index.html

@@ -73,7 +73,13 @@
 
   <script>
 
-    var picker = new MaterialDatetimePicker({})
+    var  START_OF_YEAR = moment().startOf('year').toDate();
+    var  END_OF_YEAR = moment().endOf('year').toDate();
+
+    var picker = new MaterialDatetimePicker({
+      minDate: START_OF_YEAR,
+      maxDate: END_OF_YEAR
+    })
       .on('submit', function(d) {
         output.innerText = d;
       });

dist/material-datetime-picker.css

@@ -21,7 +21,7 @@
   border: 0;
   width: 300px;
   text-align: center;
-  -webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22);
   border-radius: 2px;
   opacity: 0;
@@ -169,7 +169,7 @@
   height: 36px; }
 
 .c-datepicker__day-head, c-datepicker__day-body {
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
 
 .modal-btns {
   float: right; }
@@ -427,7 +427,7 @@
     height: 0%;
     border-radius: 50%;
     transform: translate(-50%, -50%);
-    transition: width 100ms ease-in-out, height 100ms ease-in-out; }
+    transition: width 100ms ease-in-out, height 100ms ease-in-out; }
   .u-hover-ball-effect:hover, .c-datepicker__day-body:hover, .c-datepicker__clock__num:hover, .c-datepicker__clock__am-pm-toggle label:hover {
     color: white; }
     .u-hover-ball-effect:hover:before, .c-datepicker__day-body:hover:before, .c-datepicker__clock__num:hover:before, .c-datepicker__clock__am-pm-toggle label:hover:before {

dist/material-datetime-picker.mjs

@@ -246,7 +246,10 @@ var defaults$$1 = function defaults$$1() {
     // the container to append the picker
     container: document.body,
     // allow any dates
-    dateValidator: undefined
+    dateValidator: undefined,
+    minDate: null,
+    maxDate: null,
+    monthFormat: 'MMMM YYYY'
   };
 };
 
@@ -288,7 +291,10 @@ var DateTimePicker = function (_Events) {
         styles: this.options.styles,
         time: false,
         dateValidator: validator,
-        initialValue: this.value
+        initialValue: this.value,
+        min: this.options.minDate,
+        max: this.options.maxDate,
+        monthFormat: this.options.monthFormat
       }).on('data', onData);
     }
 
@@ -371,12 +377,12 @@ var DateTimePicker = function (_Events) {
         }
       };
 
-      window.addEventListener("keydown", this._onWindowKeypress);
+      window.addEventListener('keydown', this._onWindowKeypress);
     }
   }, {
     key: '_stopListeningForCloseEvents',
     value: function _stopListeningForCloseEvents() {
-      window.removeEventListener("keydown", this._onWindowKeypress);
+      window.removeEventListener('keydown', this._onWindowKeypress);
       this._closeHandler = null;
     }
   }, {

lib/js/index.js

@@ -42,7 +42,10 @@ const defaults = () => ({
   // the container to append the picker
   container: document.body,
   // allow any dates
-  dateValidator: undefined
+  dateValidator: undefined,
+  minDate: null,
+  maxDate: null,
+  monthFormat: 'MMMM YYYY'
 });
 
 class DateTimePicker extends Events {
@@ -72,7 +75,10 @@ class DateTimePicker extends Events {
       styles: this.options.styles,
       time: false,
       dateValidator: validator,
-      initialValue: this.value
+      initialValue: this.value,
+      min: this.options.minDate,
+      max: this.options.maxDate,
+      monthFormat: this.options.monthFormat
     }).on('data', onData);
   }