From b414f103483d2eee92d8e6de33c4e65b3674eea2 Mon Sep 17 00:00:00 2001
From: Danny van Kooten <dannyvankooten@gmail.com>
Date: Thu, 24 May 2018 13:46:26 +0200
Subject: [PATCH] ensure pikaday date is updated when we choose a preset date
 range

---
 assets/js/components/DatePicker.js |  7 ++++---
 assets/js/components/Pikadayer.js  | 11 ++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/assets/js/components/DatePicker.js b/assets/js/components/DatePicker.js
index 702f799..b5bdd12 100644
--- a/assets/js/components/DatePicker.js
+++ b/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 
diff --git a/assets/js/components/Pikadayer.js b/assets/js/components/Pikadayer.js
index bb550fe..6d2af44 100644
--- a/assets/js/components/Pikadayer.js
+++ b/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} />
   }