ensure pikaday date is updated when we choose a preset date range

assets/js/components/DatePicker.js

@@ -21,7 +21,9 @@ const availablePeriods = [
     id: 'year',
     label: 'This year'
   }
-]
+];
+
+const padZero = function(n){return n<10? '0'+n:''+n;}
 
 class DatePicker extends Component {
   constructor(props) {
@@ -106,8 +108,7 @@ class DatePicker extends Component {
   }
 
   dateValue(date) {
-    const addZero = function(n){return n<10? '0'+n:''+n;}
-    return date.getFullYear() + '-' + addZero(date.getMonth() + 1) + '-' + addZero(date.getDate());
+    return date.getFullYear() + '-' + padZero(date.getMonth() + 1) + '-' + padZero(date.getDate());
   }
 
   @bind 

assets/js/components/Pikadayer.js

@@ -5,12 +5,21 @@ import { h, Component } from 'preact';
 
 class Pikadayer extends Component {
   componentDidMount() {
-    new Pikaday({ 
+    this.pikaday = new Pikaday({ 
       field: this.base,
       onSelect: this.props.onSelect,
       position: 'bottom right',
    })
   }
+
+  componentWillReceiveProps(newProps) {
+    // make sure pikaday updates if we set a date using one of our presets
+    if(newProps.value !== this.state.value) {
+      this.state.value = newProps.value;
+      this.pikaday.setDate(newProps.value, false);
+    }
+  }
+
   render(props) {
     return <input {...props} />
   }