16 |
17 |
18 |
33 | ```
34 |
35 | In `main.js` use the `composition-api` plugin :
36 |
37 | ```js
38 | import Vue from 'vue';
39 | import App from './App.vue';
40 | import VueComp from '@vue/composition-api';
41 | Vue.config.productionTip = false;
42 |
43 | Vue.use(VueComp);
44 |
45 | new Vue({
46 | render: h => h(App),
47 | }).$mount('#app');
48 | ```
49 |
50 | # Demo
51 |
52 | [Date picker Demo](https://boussadjra.github.io/vueye-datepicker/)
53 |
54 | # props and directives
55 |
56 | | prop | description | default |
57 | | --------------- | ------------------------------------------------------------------------------- | ------------ |
58 | | format | Provide the date format | 'yyyy-mm-dd' |
59 | | customFormatter | Define a custom formatter as a function that takes the date object as parameter | undefined |
60 | | color | The main color | #5118ac |
61 |
62 | **`v-model`** has a value an object with two fields
63 |
64 | - `value` : the Date object instance.
65 | - `formattedValue` : the date value returned as formatted string
66 |
67 | > **Note :**
68 | The clear icon **×** doesn't clear the input value but It initialize the date value to the current year (January 1st, currentYear)
69 | ### Available formats :
70 |
71 | The `format` prop could accept one of the following formats as a value :
72 |
73 | "yyyy/mm/dd", "dd/mm/yyyy", "mm/dd/yyyy", "yyyy-mm-dd", "dd-mm-yyyy", "mm-dd-yyyy"
74 |
75 | The formats listed above are limited and they may not respond to your use case,
76 | so you could define your own formatter and pass it as value of the `customFormatter` prop
77 |
78 | ```js
79 | template>
80 |