getredash/redash#2642 Improve Date/DateTime type parameters

client/app/components/DateInput.jsx

@@ -0,0 +1,41 @@
+import moment from 'moment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { DatePicker } from 'antd';
+import 'antd/dist/antd.less';
+
+function DateInput({
+  value,
+  placeholder,
+  onSelect,
+  clientConfig,
+}) {
+  const format = clientConfig.dateFormat || 'YYYY-MM-DD';
+  const defaultValue = moment(value, format);
+  return (
+    <DatePicker
+      {...(defaultValue.isValid() ? { defaultValue } : {})}
+      format={format}
+      placeholder={placeholder}
+      onChange={onSelect}
+    />
+  );
+}
+
+DateInput.propTypes = {
+  value: PropTypes.instanceOf(Date),
+  placeholder: PropTypes.string,
+  onSelect: PropTypes.func,
+};
+
+DateInput.defaultProps = {
+  value: Date.now(),
+  placeholder: 'Select date',
+  onSelect: () => {},
+};
+
+export default function init(ngModule) {
+  ngModule.component('dateInput', react2angular(DateInput, null, ['clientConfig']));
+}
+

client/app/components/DateTimeInput.jsx

@@ -0,0 +1,46 @@
+import moment from 'moment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { DatePicker } from 'antd';
+import 'antd/dist/antd.less';
+
+function DateTimeInput({
+  value,
+  withSeconds,
+  placeholder,
+  onSelect,
+  clientConfig,
+}) {
+  const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
+    (withSeconds ? ' HH:mm:ss' : ' HH:mm');
+  const defaultValue = moment(value, format);
+  return (
+    <DatePicker
+      showTime
+      {...(defaultValue.isValid() ? { defaultValue } : {})}
+      format={format}
+      placeholder={placeholder}
+      onChange={onSelect}
+    />
+  );
+}
+
+DateTimeInput.propTypes = {
+  value: PropTypes.instanceOf(Date),
+  withSeconds: PropTypes.bool,
+  placeholder: PropTypes.string,
+  onSelect: PropTypes.func,
+};
+
+DateTimeInput.defaultProps = {
+  value: Date.now(),
+  withSeconds: false,
+  placeholder: 'Select date and time',
+  onSelect: () => {},
+};
+
+export default function init(ngModule) {
+  ngModule.component('dateTimeInput', react2angular(DateTimeInput, null, ['clientConfig']));
+}
+

client/app/components/parameters.html

@@ -11,9 +11,12 @@
         <i class="zmdi zmdi-settings"></i>
     </button>
     <span ng-switch="param.type">
-      <input ng-switch-when="datetime-with-seconds" type="datetime-local" step="1" class="form-control" ng-model="param.ngModel">
-      <input ng-switch-when="datetime-local" type="datetime-local" class="form-control" ng-model="param.ngModel">
-      <input ng-switch-when="date" type="date" class="form-control" ng-model="param.ngModel">
+      <date-time-input ng-switch-when="datetime-with-seconds" value="param.ngModel" with-seconds="true"
+        on-select="param.updateValue"></date-time-input>
+      <date-time-input ng-switch-when="datetime-local" value="param.ngModel"
+        on-select="param.updateValue"></date-time-input>
+      <date-input ng-switch-when="date" value="param.ngModel"
+        on-select="param.updateValue"></date-input>
       <span ng-switch-when="enum">
         <select ng-model="param.value" class="form-control">
           <option ng-repeat="option in extractEnumOptions(param.enumOptions)" value="{{option}}">{{option}}</option>

client/app/services/query.js

@@ -28,6 +28,12 @@ class Parameter {
     this.global = parameter.global;
     this.enumOptions = parameter.enumOptions;
     this.queryId = parameter.queryId;
+
+    // method to update parameter value from date/time picker component
+    // (react does not support two-way binding with `ngModel`)
+    this.updateValue = (function updateValue(value) {
+      this.ngModel = value;
+    }).bind(this);
   }
 
   get ngModel() {

package.json

@@ -41,6 +41,7 @@
     "angular-ui-ace": "^0.2.3",
     "angular-ui-bootstrap": "^2.5.0",
     "angular-vs-repeat": "^1.1.7",
+    "antd": "^3.7.1",
     "babel-preset-react": "^6.24.1",
     "bootstrap": "^3.3.7",
     "brace": "^0.10.0",
@@ -55,8 +56,8 @@
     "jquery": "^3.2.1",
     "jquery-ui": "^1.12.1",
     "leaflet": "^1.2.0",
-    "leaflet.markercluster": "^1.1.0",
     "leaflet-fullscreen": "^1.0.2",
+    "leaflet.markercluster": "^1.1.0",
     "lodash": "^4.17.10",
     "markdown": "0.5.0",
     "material-design-iconic-font": "^2.2.0",