Add custom tailbone-datepicker component for Buefy

for easier reuse, outside of main CRUD forms

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

@@ -0,0 +1,47 @@
+
+const TailboneDatepicker = {
+
+    template: [
+        '<b-datepicker',
+        'placeholder="Click to select ..."',
+        `:name="name"`,
+        `:id="id"`,
+        'editable',
+        'icon-pack="fas"',
+        'icon="calendar-alt"',
+        ':date-formatter="formatDate"',
+        ':date-parser="parseDate"',
+        ':value="rawValue ? parseDate(rawValue) : null"',
+        '>',
+        '</b-datepicker>'
+    ].join(' '),
+
+    props: {
+        name: String,
+        id: String,
+        rawValue: String
+    },
+
+    methods: {
+
+        formatDate(date) {
+            // 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(date) {
+            // note, this assumes classic YYYY-MM-DD (i.e. ISO?) format
+            var parts = date.split('-')
+            return new Date(parts[0], parseInt(parts[1]) - 1, parts[2])
+        }
+    }
+
+}
+
+Vue.component('tailbone-datepicker', TailboneDatepicker)

tailbone/static/themes/falafel/css/layout.css

@@ -89,6 +89,21 @@ header .level .theme-picker {
     margin-top: 1em;
 }
 
+/******************************
+ * fix datepicker within modals
+ * TODO: someday this may not be necessary? cf.
+ * https://github.com/buefy/buefy/issues/292#issuecomment-347365637
+ ******************************/
+
+.modal .animation-content .modal-card {
+    overflow: visible !important;
+}
+
+.modal-card-body {
+    overflow: visible !important;
+}
+
+
 /******************************
  * feedback
  ******************************/