Datepicker

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "vue-bulma-datepicker",
+  "version": "1.0.0",
+  "description": "Datepicker Component for Vue Bulma",
+  "main": "src/Datepicker.vue",
+  "devDependencies": {
+    "bulma": "^0.1.0",
+    "vue": "^1.0.26"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": "git+https://github.com/vue-bulma/datepicker.git",
+  "keywords": [
+    "vue",
+    "bulma",
+    "vue-bulma",
+    "vue-bulma-component",
+    "vue-bulma-datepicker",
+    "datepicker"
+  ],
+  "author": "Fangdun Cai <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "flatpickr": "github:chmln/flatpickr#gh-pages"
+  }
+}

src/Datepicker.js

@@ -0,0 +1,10 @@
+import { init as Flatpickr } from 'flatpickr'
+
+function Datepicker (selector, config, l10n) {
+  this.l10n = Object.assign({}, Flatpickr.prototype.l10n, l10n)
+  return Flatpickr.call(this, selector, config)
+}
+
+Datepicker.prototype = Flatpickr.prototype
+
+export default Datepicker

src/Datepicker.vue

@@ -0,0 +1,76 @@
+<template>
+  <partial :name="name">
+    <slot></slot>
+  </partial>
+</template>
+
+<script>
+import Datepicker from './Datepicker.js'
+
+export default {
+  partials: {
+    singleInput: require('./datepicker/singleInput.html'),
+    wrapperInput: require('./datepicker/wrapperInput.html')
+  },
+  props: {
+    alignment: String,
+    config: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    l10n: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    placeholder: {
+      type: String,
+      default: 'Pick date'
+    },
+    readonly: Boolean,
+    value: String
+  },
+
+  ready () {
+    this.datepicker = new Datepicker(this.$el.nextSibling, this.config, this.l10n)
+    this.datepicker.set('onChange', (d, s) => {
+      this.$set('value', s)
+    })
+  },
+
+  beforeDestroy () {
+    this.datepicker.destroy()
+  },
+
+  computed: {
+    wrap () {
+      return !!this.config.wrap
+    },
+    name () {
+      return this.wrap ? 'wrapperInput' : 'singleInput'
+    }
+  }
+
+}
+</script>
+
+<style lang="stylus">
+$calendar_background = #ffffff
+$calendar_border_color = #d3d6db
+
+$months_color = #111
+$months_background = transparent
+
+$weekdays_background = transparent
+
+$day_text_color = #222324
+$day_hover_background_color = #d3d6db
+
+$today_color = #ed6c63
+$selected_day_background = #1fc8db
+
+@import '~flatpickr/src/style/flatpickr_base'
+</style>

src/singleInput.html

@@ -0,0 +1 @@
+<input class="input" type="text" :placeholder="placeholder" :readonly="readonly" v-model="value"/>

src/wrapperInput.html

@@ -0,0 +1,4 @@
+<p class="control has-addons flatpickr" data-wrap="true" data-clickOpens="false" :class="{ [`has-addons-${alignment}`]: alignment }">
+  <input class="input" type="text" :placeholder="placeholder" :readonly="readonly" v-model="value" data-input/>
+  <slot></slot>
+</p>