https://github.com/boussadjra/vueye-datepicker
Date picker input created using Vue and Vue composition api
https://github.com/boussadjra/vueye-datepicker
Last synced: 3 months ago
JSON representation
Date picker input created using Vue and Vue composition api
- Host: GitHub
- URL: https://github.com/boussadjra/vueye-datepicker
- Owner: boussadjra
- Created: 2020-06-02T17:36:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T17:41:03.000Z (over 1 year ago)
- Last Synced: 2025-06-20T08:45:06.728Z (4 months ago)
- Language: JavaScript
- Size: 1.58 MB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vueye Datepicker
It's a simple date picker created using Vue.js and the vue-composition-api plugin
# Installation
npm i vueye-datepicker --save
# Usage
```js
import VueyeDatepicker from "vueye-datepicker";
export default {
name: "App",
data: () => ({
date: {
value:new Date(),
formattedValue:''
}
}),
components: {
VueyeDatepicker
}
};
```
In `main.js` use the `composition-api` plugin :
```js
import Vue from 'vue';
import App from './App.vue';
import VueComp from '@vue/composition-api';
Vue.config.productionTip = false;
Vue.use(VueComp);
new Vue({
render: h => h(App),
}).$mount('#app');
```
# Demo
[Date picker Demo](https://boussadjra.github.io/vueye-datepicker/)
# props and directives
| prop | description | default |
| --------------- | ------------------------------------------------------------------------------- | ------------ |
| format | Provide the date format | 'yyyy-mm-dd' |
| customFormatter | Define a custom formatter as a function that takes the date object as parameter | undefined |
| color | The main color | #5118ac |
**`v-model`** has a value an object with two fields
- `value` : the Date object instance.
- `formattedValue` : the date value returned as formatted string
> **Note :**
The clear icon **×** doesn't clear the input value but It initialize the date value to the current year (January 1st, currentYear)
### Available formats :
The `format` prop could accept one of the following formats as a value :
"yyyy/mm/dd", "dd/mm/yyyy", "mm/dd/yyyy", "yyyy-mm-dd", "dd-mm-yyyy", "mm-dd-yyyy"
The formats listed above are limited and they may not respond to your use case,
so you could define your own formatter and pass it as value of the `customFormatter` prop
```js
template>
import VueyeDatepicker from "vueye-datepicker";
export default {
name: "App",
data: () => ({
date: {
value: new Date(),
formattedValue: ""
}
}),
methods: {
customFormatter(date) {
let months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
let weekdays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
const _month = date.getMonth();
const _weekday = date.getDay();
let day = date.getDate();
switch (day) {
case 1:
day = "1st";
break;
case 2:
day = "2nd";
break;
case 3:
day = "3rd";
break;
default:
day = day + "th";
break;
}
let _dateString = `${weekdays[_weekday]} ${
months[_month]
}, ${day} ${date.getFullYear()}`;
return _dateString;
}
},
components: {
VueyeDatepicker
}
};
```