https://github.com/dwqs/v2-datepicker
A simple datepicker component based Vue 2.x: https://dwqs.github.io/v2-datepicker/
https://github.com/dwqs/v2-datepicker
date-picker datepicker datepicker-component daterange daterange-picker vuejs2
Last synced: 6 months ago
JSON representation
A simple datepicker component based Vue 2.x: https://dwqs.github.io/v2-datepicker/
- Host: GitHub
- URL: https://github.com/dwqs/v2-datepicker
- Owner: dwqs
- License: mit
- Created: 2018-01-09T06:52:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-25T06:58:29.000Z (over 6 years ago)
- Last Synced: 2024-10-30T06:47:38.080Z (8 months ago)
- Topics: date-picker, datepicker, datepicker-component, daterange, daterange-picker, vuejs2
- Language: JavaScript
- Homepage:
- Size: 587 KB
- Stars: 89
- Watchers: 6
- Forks: 21
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
 
[中文 README](https://github.com/dwqs/v2-datepicker/blob/master/README_CN.md)
# v2-datepicker
A simple datepicker component based Vue 2.x.
## Installation
npm:
```
npm i --save v2-datepicker
```
or yarn
```
yarn add v2-datepicker
```
## Get Started
```
import Vue from 'vue';
import 'v2-datepicker/lib/index.css'; // v2 need to improt css
import V2Datepicker from 'v2-datepicker';
Vue.use(V2Datepicker)
```
```
// basic
//setting
export default {
data () {
return {
pickerOptions: {
shortcuts: [{
text: 'Latest Week',
onClick (picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Latest Month',
onClick (picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Latest Three Month',
onClick (picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
pickerOptions2: {
shortcuts: [{
text: 'Today',
onClick (picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Yesterday',
onClick (picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: 'A week ago',
onClick (picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
}
}
}
}
```
More demo to visit [here](https://dwqs.github.io/v2-datepicker).
## On Demand Import
> This feature just apply to v2
You need to install [babel-plugin-on-demand-import](https://github.com/dwqs/babel-plugin-on-demand-import):
```
npm i babel-plugin-on-demand-import -D
```
Then add it to your `.babelrc`:
```
// v2
{
// ...
"plugins": [
["on-demand-import" {
"libraryName": "v2-datepicker"
}]
]
}
// v3
{
// ...
"plugins": [
["on-demand-import" {
"libraryName": "v2-datepicker",
"libraryName": "lib/components"
}]
]
}
```
```
// Only import DatePicker component
import { DatePicker } from 'v2-datepicker';
Vue.use(DatePicker);
// Only import DatePickerRange component
import { DatePickerRange } from 'v2-datepicker';
Vue.use(DatePickerRange);
```
## Custom Locales
The components native supports only two languages: cn(chinese) and en(english) since `v3.1.0`, if you want to custom locale, do it by `customLocals` prop:
```js
// js
import locals from 'path/to/your/locals'
export default {
data () {
return {
lang: 'it',
locales
}
}
}
// locales.js
export default {
'it': {
'months': {
'original': ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
'abbr': ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']
},
'days': ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab']
},
'lang-key': {
'months': {
'original': ['value1', 'value2', '...'],
'abbr': ['value1', 'value2', '...']
},
'days': ['value1', 'value2', '...']
}
}
```
## Available Props
### The v2-datepicker component
| Attribute | Type | Accepted Values | Default | Description |
| :--: | :--: | :--: | :--: | :--: |
| value | Date | anything accepted by new Date() | - | default date of the date-picker |
| lang | String | cn(chinese)/en(english) | cn | set local language of the date-picker |
| customLocals | Object | - | {} | custom locale |
| format | String | year `yyyy/YYYY`, month `MM`, day `dd` | yyyy/MM/dd | format of the displayed value in the span box |
| placeholder | String | - | 选择日期/Choosing date... | placeholder text |
| disabled | Boolean | - | false | disabled date-picker |
| picker-options | Object | - | {} | additional options, check the table below |
| render-row | Number | 6/7 | 7 | render rows of datepicker |
| default-value | Date | anything accepted by new Date() | - | default date of the calendar |
### The v2-daterange-picker component
| Attribute | Type | Accepted Values | Default | Description |
| :--: | :--: | :--: | :--: | :--: |
| value | Array | anything accepted by new Date() | - | default date of the daterange-picker |
| lang | String | cn(chinese)/en(english) | cn | set local language of the daterange-picker |
| customLocals | Object | - | {} | custom locale |
| format | String | year `yyyy/YYYY`, month `MM`, day `dd` | yyyy/MM/dd | format of the displayed value in the span box |
| placeholder | String | - | 开始时间-结束时间/Choosing date range... | placeholder text |
| disabled | Boolean | - | false | disabled daterange-picker |
| range-separator | String | - | '-' | range separator|
| unlink-panels | Boolean | - | false | unlink two date-panels in range-picker|
| picker-options | Object | - | {} | additional options, check the table below |
| default-value | Date | anything accepted by new Date() | - | default date of the calendar |
## Picker Options
| Attribute | Type | Accepted Values | Default | Description |
| :--: | :--: | :--: | :--: | :--: |
| shortcuts | Object[] | - | - | a { text, onClick } object array to set shortcut options, check the table below |
| disabledDate | Function | - | - | a function determining if a date is disabled with that date as its parameter. Should return a Boolean |
### shortcuts
| Attribute | Type | Accepted Values | Default | Description |
| :--: | :--: | :--: | :--: | :--: |
| text | String | - | - | title of the shortcut |
| onClick | Function | - | - | callback function, triggers when the shortcut is clicked |
## Event
| Event Name | Description | Parameters |
| :--: | :--: | :--: |
| change | triggers when the selected value changes | component's binding value |
## Development
```js
git clone [email protected]:dwqs/v2-datepicker.git
cd v2-datepicker
npm i
npm start
```
## LICENSE
MIT