Skip to content

Commit 96fffca

Browse files
mengxiong10mengxiong10
committed
refactor: 2.0
1 parent d28d307 commit 96fffca

39 files changed

+13398
-5379
lines changed

‎.babelrc

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,21 @@
77
}
88
],
99
"stage-3"
10-
]
10+
],
11+
"plugins": [
12+
"transform-vue-jsx",
13+
"jsx-v-model"
14+
],
15+
"env": {
16+
"test": {
17+
"presets": [
18+
["env", { "target": { "node": "current" }}],
19+
"stage-3"
20+
],
21+
"plugins": [
22+
"transform-vue-jsx",
23+
"jsx-v-model"
24+
]
25+
}
26+
}
1127
}

‎.eslintignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/build/
2+
/config/
3+
/dist/
4+
/*.js
5+
/__test__/
6+
/test/

‎.eslintrc.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// https://eslint.org/docs/user-guide/configuring
2+
3+
module.exports = {
4+
root: true,
5+
parserOptions: {
6+
parser: 'babel-eslint'
7+
},
8+
env: {
9+
browser: true,
10+
},
11+
extends: [
12+
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13+
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14+
'plugin:vue/essential',
15+
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
16+
'standard'
17+
],
18+
// required to lint *.vue files
19+
plugins: [
20+
'vue'
21+
],
22+
// add your custom rules here
23+
rules: {
24+
// allow async-await
25+
'generator-star-spacing': 'off',
26+
// allow debugger during development
27+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
28+
'camelcase': ['off', { properties: 'never' }],
29+
// "vue/max-attributes-per-line": [2, {
30+
// "singleline": 1,
31+
// "multiline": {
32+
// "max": 1,
33+
// "allowFirstLine": true
34+
// }
35+
// }],
36+
"vue/html-indent": ["error", 2, {
37+
"attribute": 1,
38+
"closeBracket": 0,
39+
"alignAttributesVertically": false,
40+
"ignores": []
41+
}]
42+
}
43+
}

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.DS_Store
22
node_modules/
3+
lib
34
npm-debug.log
45
yarn-error.log
6+
coverage

‎.travis.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
node_js:
3+
- "node"
4+
- "8"
5+
script: "npm run test:push"

‎README.md

Lines changed: 54 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
# vue2-datepicker
22

3-
[中文版](https://github.com/mengxiong10/vue2-datepicker/blob/master/README_CN.md)
3+
[中文版](https://github.com/mengxiong10/vue2-datepicker/blob/master/README.zh-CN.md)
44

55
> A Datepicker Component For Vue2
66
7+
<a href="https://travis-ci.org/mengxiong10/vue2-datepicker">
8+
<img src="https://travis-ci.org/mengxiong10/vue2-datepicker.svg?branch=master" alt="build:passed">
9+
</a>
10+
<a href="https://coveralls.io/github/mengxiong10/vue2-datepicker">
11+
<img src="https://coveralls.io/repos/github/mengxiong10/vue2-datepicker/badge.svg?branch=master" alt="Badge">
12+
</a>
13+
<a href="LICENSE">
14+
<img src="https://img.shields.io/badge/License-MIT-yellow.svg">
15+
</a>
16+
717
## Demo
8-
<https://mengxiong10.github.io/vue2-datepicker/>
18+
<https://mengxiong10.github.io/vue2-datepicker/demo>
919

1020
![image](https://github.com/mengxiong10/vue2-datepicker/raw/master/screenshot/demo.PNG)
1121

@@ -27,13 +37,19 @@ export default {
2737
return {
2838
time1: '',
2939
time2: '',
40+
time3: '',
3041
shortcuts: [
3142
{
3243
text: 'Today',
3344
start: new Date(),
3445
end: new Date()
3546
}
36-
]
47+
],
48+
timePickerOptions:{
49+
start: '00:00',
50+
step: '00:30',
51+
end: '23:30'
52+
}
3753
}
3854
}
3955
}
@@ -42,50 +58,66 @@ export default {
4258
<template>
4359
<div>
4460
<date-picker v-model="time1" :first-day-of-week="1"></date-picker>
45-
<date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>
61+
<date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
62+
<date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
4663
</div>
4764
</template>
4865
```
49-
### Attributes
66+
### Props
5067

5168
| Prop | Type | Default | Description |
5269
|---------------------|---------------|-------------|-----------------------------------------------------|
5370
| type | String | 'date' | select datepicker or datetimepicker(date/datetime) |
5471
| range | Boolean | false | if true, the type is daterange or datetimerange |
55-
| format | String | yyyy-MM-dd | Date formatting string |
56-
| custom-formatter | function | null | custom Date display |
72+
| format | String | YYYY-MM-DD | The parsing tokens are similar to the moment.js |
5773
| lang | String/Object | zh | Translation (en/zh/es/pt-br/fr/ru/de/it/cs)(custom) |
74+
| clearable | Boolean | true | if false, don't show the clear icon |
5875
| confirm | Boolean | false | if true, need click the button to change the value |
76+
| editable | Boolean | true | if false, user cann't type it |
5977
| disabled | Boolean | false | Disable the component |
60-
| editable | Boolean | false | if true, user can type it(only the range is false) |
6178
| placeholder | String | | input placeholder text |
6279
| width | String/Number | 210 | input size |
63-
| disabled-days | Array | [] | Days in YYYY-MM-DD format to disable |
6480
| not-before | String/Date | '' | Disable all dates before new Date(not-before) |
6581
| not-after | String/Date | '' | Disable all dates after new Date(not-after) |
82+
| disabled-days | Array/function| [] | Disable Days |
6683
| shortcuts | Boolean/Array | true | the shortcuts for the range picker |
6784
| time-picker-options | Object | {} | set timePickerOptions(start, step, end) |
6885
| minute-step | Number | 0 | if > 0 don't show the second picker(0 - 60) |
6986
| first-day-of-week | Number | 7 | set the first day of week (1-7) |
7087
| input-class | String | 'mx-input' | the input class name |
88+
| input-name | String | 'date' | the input name attr |
7189
| confirm-text | String | 'OK' | the default text to display on confirm button |
7290
| range-separator | String | '~' | the range separator text |
7391

7492

7593
#### lang
7694
* String (en/zh/es/pt-br/fr/ru/de/it/cs)
77-
* Object
78-
79-
```JavaScript
80-
{
81-
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
82-
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
83-
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
84-
placeholder: {
85-
date: 'Select Date',
86-
dateRange: 'Select Date Range'
95+
* Object (custom)
96+
97+
```html
98+
<script>
99+
export default {
100+
data() {
101+
return {
102+
value: '',
103+
lang: {
104+
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
105+
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
106+
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
107+
placeholder: {
108+
date: 'Select Date',
109+
dateRange: 'Select Date Range'
110+
}
111+
}
112+
}
87113
}
88114
}
115+
</script>
116+
117+
<template>
118+
<date-picker v-model="value" :lang="lang"></date-picker>
119+
</template>
120+
89121
```
90122

91123
#### shortcuts
@@ -112,8 +144,10 @@ export default {
112144
### Events
113145
| Name | Description | Callback Arguments |
114146
|-----------------|------------------------------|------------------------|
115-
| change | When user select date | the currentValue |
147+
| change | When the value change | the currentValue |
148+
| input | When the value change | the currentValue |
116149
| confirm | When user click 'OK' button | the currentValue |
150+
| input-error | When user type a invalid Date| the input value |
117151

118152
## License
119153

‎README.zh-CN.md

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# vue2-datepicker
2+
3+
[English Version](https://github.com/mengxiong10/vue2-datepicker/blob/master/README_CN.md)
4+
5+
> 一个基于Vue2.x的日期时间选择组件
6+
7+
<a href="https://travis-ci.org/mengxiong10/vue2-datepicker">
8+
<img src="https://travis-ci.org/mengxiong10/vue2-datepicker.svg?branch=master" alt="build:passed">
9+
</a>
10+
<a href="https://coveralls.io/github/mengxiong10/vue2-datepicker">
11+
<img src="https://coveralls.io/repos/github/mengxiong10/vue2-datepicker/badge.svg?branch=master" alt="Badge">
12+
</a>
13+
<a href="LICENSE">
14+
<img src="https://img.shields.io/badge/License-MIT-yellow.svg">
15+
</a>
16+
17+
## 线上Demo
18+
<https://mengxiong10.github.io/vue2-datepicker/demo>
19+
20+
![image](https://github.com/mengxiong10/vue2-datepicker/raw/master/screenshot/demo.PNG)
21+
22+
## 安装
23+
24+
```bash
25+
$ npm install vue2-datepicker --save
26+
```
27+
28+
## 用法
29+
30+
```html
31+
<script>
32+
import DatePicker from 'vue2-datepicker'
33+
34+
export default {
35+
components: { DatePicker },
36+
data() {
37+
return {
38+
time1: '',
39+
time2: '',
40+
time3: '',
41+
shortcuts: [
42+
{
43+
text: 'Today',
44+
start: new Date(),
45+
end: new Date()
46+
}
47+
],
48+
timePickerOptions:{
49+
start: '00:00',
50+
step: '00:30',
51+
end: '23:30'
52+
}
53+
}
54+
}
55+
}
56+
</script>
57+
58+
<template>
59+
<div>
60+
<date-picker v-model="time1" :first-day-of-week="1"></date-picker>
61+
<date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
62+
<date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
63+
</div>
64+
</template>
65+
```
66+
### Props
67+
68+
| Prop | Type | Default | Description
69+
|---------------------|---------------|-------------|-----------------------------------------------------
70+
| type | String | 'date' | 选择日期或日期时间(可选：date,datetime)
71+
| range | Boolean | false | 如果是true， 显示日历范围选择
72+
| format | String | YYYY-MM-DD | 格式化显示日期 api类似moment.js
73+
| lang | String/Object | zh | 选择语言或自定义 (en/zh/es/pt-br/fr/ru/de/it/cs)(custom)
74+
| clearable | Boolean | true | 如果设置false, 不显示清除图标
75+
| confirm | Boolean | false | 如果是true， 显示确认按钮且需要确认才更新时间
76+
| editable | Boolean | true | 如果是false, 用户不能手动输入更新日期
77+
| disabled | Boolean | false | 禁用组件
78+
| placeholder | String | | 输入框placeholder
79+
| width | String/Number | 210 | 设置宽度
80+
| not-before | String/Date | '' | 禁止选择这个时间之前的时间
81+
| not-after | String/Date | '' | 禁止选择这个时间之前=后的时间
82+
| disabled-days | Array/function| [] | 自定义禁止的日期
83+
| shortcuts | Boolean/Array | true | 自定义范围选择的时候快捷选项(见下表)
84+
| time-picker-options | Object | {} | 自定义时间选择的开始，结束，步进(见下表)
85+
| minute-step | Number | 0 | 设置分钟的步进， 设置后不显示秒的选择
86+
| first-day-of-week | Number | 7 | 设置日历星期几开头(1-7)
87+
| input-class | String | 'mx-input' | 自定义输入框的类名
88+
| input-name | String | 'date' | 自定义input 的 name 属性
89+
| confirm-text | String | 'OK' | 确认按钮的名称
90+
| range-separator | String | '~' | range 分隔符
91+
92+
93+
#### shortcuts
94+
* true - 显示默认快捷选择
95+
* false - 隐藏快捷选择
96+
* Object[] - 自定义快捷选择, 格式：[{text, start, end}]
97+
98+
| 名称 | 类型 | 说明 |
99+
|-----------------|---------------|----------------|
100+
| text | String | 显示文字 |
101+
| start | Date | 开始日期 |
102+
| end | Date | 结束日期 |
103+
104+
#### time-picker-options
105+
* Object[] - 自定义时间选择, 格式：[{start, step, end}]
106+
107+
| 名称 | 类型 | 说明 |
108+
|-----------------|---------------|-----------------------|
109+
| start | String | 开始时间 (eg '00:00') |
110+
| step | String | 步进时间 (eg '00:30') |
111+
| end | String | 结束时间 (eg '23:30') |
112+
113+
114+
### Events
115+
| Name | 说明 | 回调参数 |
116+
|-----------------|----------------------------- |----------------|
117+
| change | 日期改变的时候触发 | 选择的日期 |
118+
| input | 日期改变的时候触发 | 选择的日期 |
119+
| confirm | 点击确认按钮触发的事件 | 选择的日期 |
120+
| input-error | 当用户输入的值无效时候触发 | 用户输入的字符串 |
121+
122+
## 许可证
123+
124+
[MIT](https://github.com/mengxiong10/vue2-datepicker/blob/master/LICENSE)
125+
126+
Copyright (c) 2017-present xiemengxiong

0 commit comments

Comments
 (0)