Created new scrolling list time selector to prevent firing graphql queries after every update

Author: brantstuns

DateTime.js

@@ -1,14 +1,15 @@
 var DateTime = require('../DateTime.js');
 var React = require('react');
 var ReactDOM = require('react-dom');
+var moment = require('moment');
 
 ReactDOM.render(
   React.createElement(DateTime, {
-    viewMode: 'months',
-    dateFormat: 'MMMM',
-    isValidDate: function(current) {
-      return current.isBefore(DateTime.moment().startOf('month'));
-    }
-  }),
+	value: moment(),
+	dateFormat: 'MMM D, YYYY',
+	timeFormat: 'h:mm a',
+	onChange: function (date) { console.log(date); },
+	closeOnSelect: true
+}),
   document.getElementById('datetime')
 );

example/example.js

@@ -2,6 +2,17 @@
  * https://github.com/arqex/react-datetime
  */
 
+ .rdtDays {
+  display: flex;
+  height: 300px;
+  overflow: auto;
+}
+
+.time-selector-times {
+  list-style-type: none;
+  padding: 5px;
+}
+
 .rdt {
   position: relative;
 }
@@ -49,6 +60,7 @@
 .rdtPicker td.rdtHour:hover,
 .rdtPicker td.rdtMinute:hover,
 .rdtPicker td.rdtSecond:hover,
+.rdtPicker td.time-selector-time:hover,
 .rdtPicker .rdtTimeToggle:hover {
   background: #eeeeee;
   cursor: pointer;