Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tanvir0604/vue-dropdown-datepicker
A simple and customizable dropdown datepicker vue component
https://github.com/tanvir0604/vue-dropdown-datepicker
datepicker datepicker-component daterangepicker vue vue-components vuejs vuejs2
Last synced: 9 days ago
JSON representation
A simple and customizable dropdown datepicker vue component
- Host: GitHub
- URL: https://github.com/tanvir0604/vue-dropdown-datepicker
- Owner: tanvir0604
- License: isc
- Created: 2019-04-10T07:30:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T07:13:17.000Z (about 2 months ago)
- Last Synced: 2024-10-09T20:23:53.446Z (about 1 month ago)
- Topics: datepicker, datepicker-component, daterangepicker, vue, vue-components, vuejs, vuejs2
- Language: Vue
- Size: 422 KB
- Stars: 11
- Watchers: 2
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Dropdown Datepicker
> [!warning]
> This library supports only vue2 and no longer maintained. Please check vue3-dropdown-datepicker
A simple and customizable dropdown datepicker vue component.
## Check [Examples](https://tanvir0604.github.io/vue-dropdown-datepicker/)
## Installation
### [vuejs](https://vuejs.org/) is required to use this component
### Package manager
#### Using [npm](https://www.npmjs.com)
```bash
npm i vue-dropdown-datepicker
```
#### Using [yarn](https://yarnpkg.com)
```bash
yarn add vue-dropdown-datepicker
```
#### Using [bower](https://bower.io)
```bash
bower install vue-dropdown-datepicker
```
#### Using CDN
```code
```
OR
```code
```
## Usage
### ES6
```javascript
import DropdownDatepicker from '../src/dropdown-datepicker.vue';
new Vue({
el: '#app',
components: {
DropdownDatepicker
}
});
```
### Browser
```javascript
new Vue({
el: '#app',
components: {
DropdownDatepicker
}
});
```
## Options
| Option | Type | Defult |Comment |
| ------------- | ------------- | ---------- |--------|
| defaultDate | string | null | |
| defaultDateFormat | string | 'yyyy-mm-dd' | |
| displayFormat | string | 'dmy' | |
| submitFormat | string | 'yyyy-mm-dd' | |
| submitId | string | null | |
| minAge | int | null | |
| maxAge | int | null | |
| minYear | int | null | |
| maxYear | int | null | |
| minDate | string | null | yyyy-mm-dd |
| maxDate | string | null | yyyy-mm-dd |
| allowPast | boolean | true | |
| allowFuture | boolean | true | |
| wrapperClass | string | 'date-dropdowns'| |
| dropdownClass | string | null | |
| daySuffixes | boolean | true | |
| monthSuffixes | boolean | true | |
| monthFormat | string | 'long' | |
| required | boolean | false | |
| dayLabel | string | 'Day | |
| monthLabel | string | 'Month' | |
| yearLabel | string | 'Year' | |
| sortYear | string | 'desc' | |
| monthLongValues | array | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']| |
| monthShortValues | array | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |
| initialDayMonthYearValues| array | ['Day', 'Month', 'Year'] | |
| daySuffixValues | array | ['st', 'nd', 'rd', 'th'] | |
## Events
### onDayChange
Call on any change of day dropdown
```javascript
```
### onMonthChange
Call on any change of month dropdown
```javascript
```
### onYearChange
Call on any change of year dropdown
```javascript
```
## Contributing
Contributing Feel free to submit any fixes or propose any additional functionality via pull request or issue, making sure any changes take place in /src.
Minification and Validation Both are automated via npm command. Run npm install to install the required dependencies, then run npm run build from the root of the project to handle the tasks.
## License
[ISC](https://choosealicense.com/licenses/isc/)