├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── src
    ├── BasicInput.js
    ├── Datepicker.js
    ├── SingleInput.vue
    ├── WrapperInput.vue
    └── index.vue
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | (The MIT License)
 2 | 
 3 | Copyright (c) 2016 fundon <cfddream@gmail.com<
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Datepicker
 2 | 
 3 | Datepicker component is based on [flatpickr](https://github.com/chmln/flatpickr) for Vue Bulma.
 4 | 
 5 | ## Installation
 6 | 
 7 | ```
 8 | $ npm install vue-bulma-datepicker --save
 9 | ```
10 | 
11 | ## Examples
12 | 
13 | ### Single Input
14 | 
15 | ```vue
16 | <template>
17 |   <datepicker placeholder="European Format ('d-m-Y')" :config="{ dateFormat: 'd-m-Y', static: true }"></datepicker>
18 | </template>
19 | 
20 | <script>
21 | import Datepicker from 'vue-bulma-datepicker'
22 | 
23 | export default {
24 |   components: {
25 |     Datepicker
26 |   }
27 | }
28 | </script>
29 | ```
30 | 
31 | ### Wrap Input
32 | 
33 | ```vue
34 | <template>
35 |   <datepicker :config="{ wrap: true }" readonly>
36 |     <a class="button" data-toggle><i class="fa fa-calendar"></i></a>
37 |     <a class="button" data-clear><i class="fa fa-close"></i></a>
38 |   </datepicker>
39 | </template>
40 | 
41 | <script>
42 | import Datepicker from 'vue-bulma-datepicker'
43 | 
44 | export default {
45 |   components: {
46 |     Datepicker
47 |   }
48 | }
49 | </script>
50 | ```
51 | 
52 | ## Badges
53 | 
54 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
55 | ![](https://img.shields.io/badge/status-stable-green.svg)
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-datepicker",
 3 |   "version": "1.3.6",
 4 |   "description": "Datepicker Component for Vue Bulma",
 5 |   "main": "src/index.vue",
 6 |   "peerDependencies": {
 7 |     "bulma": ">=0.2",
 8 |     "vue": ">=2"
 9 |   },
10 |   "repository": "vue-bulma/datepicker",
11 |   "keywords": [
12 |     "vue",
13 |     "bulma",
14 |     "vue-bulma",
15 |     "vue-bulma-component",
16 |     "vue-bulma-datepicker",
17 |     "datepicker"
18 |   ],
19 |   "author": "Fangdun Cai <cfddream@gmail.com>",
20 |   "license": "MIT",
21 |   "dependencies": {
22 |     "flatpickr": "2.6.3",
23 |     "vue-click-outside": "1.0.6"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/BasicInput.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   props: {
 3 |     placeholder: {
 4 |       type: String,
 5 |       default: 'Pick date'
 6 |     },
 7 |     inputClass: {
 8 |       type: [Object, Array],
 9 |       default: function() {
10 |         return {}
11 |       }
12 |     },
13 |     value: String
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/Datepicker.js:
--------------------------------------------------------------------------------
 1 | // obsoleted since l10n has been moved to config object.
 2 | 
 3 | import Flatpickr from 'flatpickr'
 4 | 
 5 | export default class Datepicker extends Flatpickr {
 6 |   constructor (selector, config, l10n) {
 7 |     config.locale = Object.assign({}, Flatpickr.prototype.l10n, l10n)
 8 |     super(selector, config)
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/SingleInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input class="input" :class="inputClass" type="text" :placeholder="placeholder" :value="value"/>
 3 | </template>
 4 | 
 5 | <script>
 6 | import BasicInput from './BasicInput'
 7 | 
 8 | export default {
 9 |   mixins: [BasicInput]
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/WrapperInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p class="control has-addons flatpickr" data-wrap="true" data-clickOpens="false" :class="{ [`has-addons-${alignment}`]: alignment }">
 3 |     <input class="input" :class="inputClass" type="text" :placeholder="placeholder" :value="value" data-input/>
 4 |     <slot></slot>
 5 |   </p>
 6 | </template>
 7 | 
 8 | <script>
 9 | import BasicInput from './BasicInput'
10 | 
11 | export default {
12 |   mixins: [BasicInput],
13 | 
14 |   props: {
15 |     alignment: String
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <component :value="date" :placeholder="placeholder" 
  3 |     :inputClass="inputClass" :alignment="alignment" 
  4 |     :is="wrap ? 'WrapperInput' : 'SingleInput'">
  5 |     <slot></slot>
  6 |   </component>
  7 | </template>
  8 | 
  9 | <script>
 10 | import BasicInput from './BasicInput'
 11 | import SingleInput from './SingleInput'
 12 | import WrapperInput from './WrapperInput'
 13 | import Flatpickr from 'flatpickr'
 14 | 
 15 | export default {
 16 |   mixins: [BasicInput],
 17 | 
 18 |   props: {
 19 |     alignment: String,
 20 |     config: {
 21 |       type: Object,
 22 |       default: () => ({})
 23 |     }
 24 |   },
 25 | 
 26 |   components: {
 27 |     SingleInput,
 28 |     WrapperInput
 29 |   },
 30 | 
 31 |   data () {
 32 |     return {
 33 |       datepicker: null,
 34 |       selectedDates: null
 35 |     }
 36 |   },
 37 | 
 38 |   mounted () {
 39 |     if (!this.datepicker) {
 40 |       this.config.onValueUpdate = this.dateUpdated
 41 |       this.datepicker = new Flatpickr(this.$el, this.config)
 42 |       this.setDate(this.value)
 43 |     }
 44 |     this.$watch('config', this.redraw)
 45 |     this.$watch('value', this.setDate)
 46 |   },
 47 | 
 48 |   beforeDestroy () {
 49 |     if (this.datepicker && !this.static) {
 50 |       this.datepicker.destroy()
 51 |       this.datepicker = null
 52 |     }
 53 |   },
 54 | 
 55 |   methods: {
 56 |     redraw (newConfig) {
 57 |       this.datepicker.config = Object.assign(this.datepicker.config, newConfig)
 58 |       this.datepicker.redraw()
 59 |       this.datepicker.jumpToDate()
 60 |     },
 61 |     setDate (newDate, oldDate) {
 62 |       newDate && this.datepicker.setDate(newDate)
 63 |     },
 64 |     dateUpdated (selectedDates, dateStr) {
 65 |       this.date = dateStr
 66 |     }
 67 |   },
 68 | 
 69 |   computed: {
 70 |     wrap () {
 71 |       return !!this.config.wrap
 72 |     },
 73 |     static () {
 74 |       return !!this.config.static
 75 |     },
 76 |     name () {
 77 |       return this.wrap ? 'wrapperInput' : 'singleInput'
 78 |     },
 79 |     date: {
 80 |       get() {
 81 |         return this.selectedDates || this.value
 82 |       },
 83 |       set(newValue) {
 84 |         if (this.selectedDates !== newValue) {
 85 |           this.selectedDates = newValue
 86 |           this.$emit('input', newValue)
 87 |         }
 88 |       }
 89 |     }
 90 |   }
 91 | }
 92 | </script>
 93 | 
 94 | <style lang="stylus">
 95 | $calendar_background = #ffffff
 96 | $calendar_border_color = #d3d6db
 97 | 
 98 | $months_color = #111
 99 | $months_background = transparent
100 | 
101 | $weekdays_background = transparent
102 | 
103 | $day_text_color = #222324
104 | $day_hover_background_color = #d3d6db
105 | 
106 | $today_color = #ed6c63
107 | $selected_day_background = #1fc8db
108 | 
109 | @import '~flatpickr/src/style/flatpickr'
110 | 
111 | .flatpickr-calendar.hasWeeks
112 |   width: auto !important
113 | </style>
114 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | flatpickr@2.6.3:
 6 |   version "2.6.3"
 7 |   resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-2.6.3.tgz#457357532deb135f3da64b425bf4435737961564"
 8 | 
 9 | vue-click-outside@1.0.6:
10 |   version "1.0.6"
11 |   resolved "https://registry.yarnpkg.com/vue-click-outside/-/vue-click-outside-1.0.6.tgz#bf3e0217210d7778299cc39ddcf89cc036089f22"
12 | 


--------------------------------------------------------------------------------