make demo of date range picker as a filter

Author: blackpuppy

package.json

@@ -10,6 +10,8 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "moment-timezone": "^0.5.13",
+    "ramda": "^0.23.0",
     "vue": "^2.2.6",
     "vue2-datepicker": "^1.2.1"
   },

src/App.vue

@@ -1,12 +1,19 @@
 <template>
   <div id="app">
-    <span>Date range picker:</span>
-    <date-picker v-model="time2" range width="220" placeholder="from ~ to"></date-picker>
+    <div>
+      <span>Date range picker:</span>
+      <date-picker v-model="filterDateRange" range width="220" placeholder="from ~ to"></date-picker>
+    </div>
+    <div>
+      <span>filter: {{ filterText }}</span>
+    </div>
   </div>
 </template>
 
 <script>
 import DatePicker from 'vue2-datepicker'
+import moment from 'moment-timezone'
+import R from 'ramda'
 
 export default {
   name: 'app',
@@ -16,9 +23,31 @@ export default {
   data() {
     return {
       time1: '',
-      time2: '',
+      filterDateRange: '',
     }
   },
+  computed: {
+    filterText() {
+      console.log('filterDateRange = ', this.filterDateRange)
+      let filters = {};
+      if (!!this.filterDateRange && this.filterDateRange.length === 2) {
+        filters['from_date'] = moment(this.filterDateRange[0]).tz('Asia/Singapore').format('YYYY-MM-DD');
+        filters['to_date'] = moment(this.filterDateRange[1]).tz('Asia/Singapore').format('YYYY-MM-DD');
+      }
+
+      console.log('filters = ', filters)
+
+      let filterTexts = [];
+      const pushText = (value, column) => {
+        filterTexts.push(column + '|' + value);
+      }
+      R.forEachObjIndexed(pushText, filters);
+      const text = filterTexts.join(',');
+
+      console.log('filterTexts = ', filterTexts, ', text = ', text);
+      return text;
+    }
+  }
 }
 </script>
 

yarn.lock

@@ -2454,6 +2454,16 @@ minimist@^1.2.0:
   dependencies:
     minimist "0.0.8"
 
+moment-timezone@^0.5.13:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.13.tgz#99ce5c7d827262eb0f1f702044177f60745d7b90"
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0":
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -3135,6 +3145,10 @@ querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
+ramda@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.23.0.tgz#ccd13fff73497a93974e3e86327bfd87bd6e8e2b"
+
 randomatic@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"