demo: add month picker plugin example, closes #188

ankurk91 · May 13, 2020 · 8a5e434 · 8a5e434
1 parent 412fabb
commit 8a5e434
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-flatpickr-component/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue-flatpickr-component)
 [![npm-version](https://badgen.net/npm/v/vue-flatpickr-component)](https://www.npmjs.com/package/vue-flatpickr-component)
 [![github-tag](https://badgen.net/github/tag/ankurk91/vue-flatpickr-component)](https://github.com/ankurk91/vue-flatpickr-component/)
-![build](https://github.com/ankurk91/vue-flatpickr-component/workflows/build/badge.svg)
+[![build](https://github.com/ankurk91/vue-flatpickr-component/workflows/build/badge.svg)](https://github.com/ankurk91/vue-flatpickr-component/actions)
 [![codecov](https://codecov.io/gh/ankurk91/vue-flatpickr-component/branch/master/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-flatpickr-component)
 [![license](https://badgen.net/github/license/ankurk91/vue-flatpickr-component)](https://yarnpkg.com/en/package/vue-flatpickr-component)
 

diff --git a/examples/App.vue b/examples/App.vue
@@ -121,6 +121,14 @@
               </flat-pickr>
             </div>
 
+            <div class="form-group">
+              <label>Month picker plugin</label>
+              <flat-pickr class="form-control"
+                          :config="configs.monthSelect"
+                          v-model="form.monthSelect">
+              </flat-pickr>
+            </div>
+
             <div class="row">
               <div class="col-md-6">
                 <div class="form-group">
@@ -189,6 +197,8 @@
   // https://chmln.github.io/flatpickr/plugins/
   import ConfirmDatePlugin from 'flatpickr/dist/plugins/confirmDate/confirmDate.js';
   import 'flatpickr/dist/plugins/confirmDate/confirmDate.css';
+  import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index.js'
+  import 'flatpickr/dist/plugins/monthSelect/style.css'
 
   // Override Global settings
   flatpickr.setDefaults({
@@ -216,6 +226,7 @@
           allowInput: null,
           dateStart: null,
           dateEnd: null,
+          monthSelect: null,
         },
         configs: {
           basic: {},
@@ -260,6 +271,14 @@
           },
           end: {
             minDate: null
+          },
+          monthSelect: {
+            plugins: [
+              new monthSelectPlugin({
+                shorthand: true,
+                dateFormat: "m/Y",
+              })
+            ]
           }
         },
       }