Fix data type handling for datepicker and grid filter components

here is what's up now:

- <b-datepicker> expects v-model to be a Date
- <tailbone-datepicker> also expects a Date
- <grid-filter-date-value> uses String for its v-model

latter is so the value can represent a date range, e.g. 'YYYY-MM-DD|YYYY-MM-DD'

anyway there was previously confusion about data type among these
components, and hopefully they are straight now per the above outline

tailbone/static/js/tailbone.buefy.datepicker.js

@@ -11,7 +11,7 @@ const TailboneDatepicker = {
         'icon="calendar-alt"',
         ':date-formatter="formatDate"',
         ':date-parser="parseDate"',
-        ':value="value ? parseDate(value) : null"',
+        ':value="buefyValue"',
         '@input="dateChanged"',
         ':disabled="disabled"',
         'ref="trueDatePicker"',
@@ -26,6 +26,24 @@ const TailboneDatepicker = {
         disabled: Boolean,
     },
 
+    data() {
+        let buefyValue = this.value
+        if (buefyValue && !buefyValue.getDate) {
+            buefyValue = this.parseDate(this.value)
+        }
+        return {
+            buefyValue,
+        }
+    },
+
+    watch: {
+        value(to, from) {
+            if (this.buefyValue != to) {
+                this.buefyValue = to
+            }
+        },
+    },
+
     methods: {
 
         formatDate(date) {
@@ -49,7 +67,7 @@ const TailboneDatepicker = {
         },
 
         dateChanged(date) {
-            this.$emit('input', this.formatDate(date))
+            this.$emit('input', date)
         },
 
         focus() {

tailbone/templates/grids/filter-components.mako

@@ -127,40 +127,62 @@
             dateRange: Boolean,
         },
         data() {
-            return {
-                startDate: null,
-                endDate: null,
-            }
-        },
-        mounted() {
+            let startDate = null
+            let endDate = null
+            if (this.value) {
+
                 if (this.dateRange) {
-                if (this.value.includes('|')) {
                     let values = this.value.split('|')
                     if (values.length == 2) {
-                        this.startDate = values[0]
-                        this.endDate = values[1]
-                    } else {
-                        this.startDate = this.value
+                        startDate = this.parseDate(values[0])
+                        endDate = this.parseDate(values[1])
+                    } else {    // no end date specified?
+                        startDate = this.parseDate(this.value)
                     }
-                } else {
-                    this.startDate = this.value
+
+                } else {        // not a range, so start date only
+                    startDate = this.parseDate(this.value)
                 }
-            } else {
-                this.startDate = this.value
+            }
+
+            return {
+                startDate,
+                endDate,
             }
         },
         methods: {
             focus() {
                 this.$refs.startDate.focus()
             },
+            formatDate(date) {
+                if (date === null) {
+                    return null
+                }
+                // just need to convert to simple ISO date format here, seems
+                // like there should be a more obvious way to do that?
+                var year = date.getFullYear()
+                var month = date.getMonth() + 1
+                var day = date.getDate()
+                month = month < 10 ? '0' + month : month
+                day = day < 10 ? '0' + day : day
+                return year + '-' + month + '-' + day
+            },
+            parseDate(value) {
+                if (value) {
+                    // note, this assumes classic YYYY-MM-DD (i.e. ISO?) format
+                    const parts = value.split('-')
+                    return new Date(parts[0], parseInt(parts[1]) - 1, parts[2])
+                }
+            },
             startDateChanged(value) {
+                value = this.formatDate(value)
                 if (this.dateRange) {
-                    value += '|' + this.endDate
+                    value += '|' + this.formatDate(this.endDate)
                 }
                 this.$emit('input', value)
             },
             endDateChanged(value) {
-                value = this.startDate + '|' + value
+                value = this.formatDate(this.startDate) + '|' + this.formatDate(value)
                 this.$emit('input', value)
             },
         },