Merge pull request #503 from zalando-stups/502-fix-datepicker-short-l…

…inks #502 fixed short links in date picker. fixed layouting of date picker
zalando-stups · Sep 2, 2016 · 0e6cf5d · 0e6cf5d
2 parents c37ab4e + 6937f42
commit 0e6cf5d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/client/lib/common/asset/less/violation/date-dropdown.less b/client/lib/common/asset/less/violation/date-dropdown.less
@@ -20,7 +20,6 @@
     div.dateDropdown-dropdown {
         position: absolute;
         z-index: @layer-2;
-        width: 600px;
         background: @white;
         outline: 1px solid @gray;
         box-shadow: 0px 5px 15px @gray-light;

diff --git a/client/lib/violation/src/violation/date-dropdown.jsx b/client/lib/violation/src/violation/date-dropdown.jsx
@@ -7,6 +7,8 @@ import 'react-date-picker/index.css';
 import 'common/asset/less/violation/date-dropdown.less';
 import listenToOutsideClick from 'react-onclickoutside/decorator';
 
+const WEEK_START_MONDAY = 1;
+
 class DateDropdown extends React.Component {
     constructor(props) {
         super();
@@ -15,6 +17,8 @@ class DateDropdown extends React.Component {
             visible: false,
             range: props.range
         };
+
+        this.handleUpdate = this.handleUpdate.bind(this);
     }
 
     onHeaderClick() {
@@ -32,10 +36,10 @@ class DateDropdown extends React.Component {
         this.setState({range});
     }
 
-    onUpdate(_, range) {
+    handleUpdate(_, range) {
         this.setState({range});
         if (this.props.onUpdate && range.length > 1) {
-            this.props.onUpdate(range);
+            this.props.onUpdate(range.map(r => r.dateMoment));
         }
     }
 
@@ -44,6 +48,8 @@ class DateDropdown extends React.Component {
     }
 
     render() {
+        const maxDate = moment().endOf('day');
+
         return <div ref='dropdown' className='date-dropdown'>
                 <header
                     ref='header'
@@ -70,9 +76,11 @@ class DateDropdown extends React.Component {
                             </div>
                             <div className='dateDropdown-container'>
                                 <Picker
-                                    weekStartDay={1}
-                                    range={this.state.range}
-                                    onRangeChange={this.onUpdate.bind(this)} />
+                                    weekStartDay              = {WEEK_START_MONDAY}
+                                    range                     = {this.state.range}
+                                    maxDate                   = {maxDate}
+                                    highlightRangeOnMouseMove = {true}
+                                    onRangeChange             = {this.handleUpdate} />
                             </div>
                         </div>
                     </div> :

diff --git a/client/lib/violation/src/violation/violation-filters.jsx b/client/lib/violation/src/violation/violation-filters.jsx
@@ -29,8 +29,8 @@ class ViolationFilters extends React.Component {
             }
         } else if (what === 'date') {
             if (data[1]) {
-                params.from = data[0].dateMoment.toISOString();
-                params.to = data[1].dateMoment.toISOString();
+                params.from = data[0].toISOString();
+                params.to = data[1].toISOString();
                 params.page = 0;
                 this.context.router.push(Routes.violation(params));
                 if (this.props.onUpdate) {