Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dai-siki/vue-datepicker-simple
A datepicker component for vue. （适用中国用户的vue日期选择组件）
https://github.com/dai-siki/vue-datepicker-simple
Last synced: 3 months ago
JSON representation
A datepicker component for vue. （适用中国用户的vue日期选择组件）
- Host: GitHub
- URL: https://github.com/dai-siki/vue-datepicker-simple
- Owner: dai-siki
- Created: 2016-10-14T00:51:24.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-28T03:15:36.000Z (over 5 years ago)
- Last Synced: 2024-09-17T05:20:06.102Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 461 KB
- Stars: 57
- Watchers: 4
- Forks: 15
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-vue - vue-datepicker-simple - 基于vue的日期选择器 (UI组件)
- awesome-github-vue - vue-datepicker-simple - 基于vue的日期选择器 (UI组件)
- awesome-vue - vue-datepicker-simple - siki/vue-datepicker-simple?style=social) - 基于vue的日期选择器 (UI组件)
- awesome - vue-datepicker-simple - 基于vue的日期选择器 (UI组件)
README
# vue-datepicker-simple
一款非常简单的vue日期选择组件
## Update Log （更新日志
### @1.5.0
- 添加了"时至今日"功能（只能选今天之前）
- 添加了"今天不行"功能（不能选今天）
### @1.4.0
- 兼容[email protected]+（需要引入对应的组件，绑定value语法有不同，参考示例2）
### @1.3.0
- 添加了"placeholder"属性
### @1.2.0
- 添加了"向前看"功能（只能选今天及以后）
### @1.1.0
- 添加了年份选择功能
- 可以自定义日期格式
## Demo （示例
[email protected]+ [Click me 点我](http://dai-siki.github.io/vue-datepicker-simple/example/demo.html).
[email protected]+ [Click me 点我](http://dai-siki.github.io/vue-datepicker-simple/example2/demo.html).
## Screenshot （截图
## Browser Compatibility （浏览器兼容
IE9+
## Env （配置环境
vue + webpack + es6
## Install （安装
#### npm
```shell
$ npm install vue-datepicker-simple
```
## Usage （使用
#### Props （相关参数
| 名称 | 类型 | 默认 | 说明 |
| ----------------- | ----------------- | ---------------- | --------------------------------------------- |
| value | String | today | 要绑定的日期变量,值为空则日期面板初始化今天 |
| field | String | "" | 会给input标签添加name及id |
| format | String | 'yyyy-mm-dd' | 日期格式 |
| forward | Boolean | false | 向前看（只能选择今天及以后） |
| backward | Boolean | false | 时至今日（只能选择今天之前） |
| noToday | Boolean | false | 今天不行（不能选今天） |
| placeholder | String | "" | 你懂的 |
#### Example （示例 [email protected]+
```html
选择您的新婚之日
import 'babel-polyfill'; //因为使用了es6的一些方法，需要babel垫片，如果你项目中已有相关兼容性方案，可忽略
import Vue from 'vue';
import myDatepicker from 'vue-datepicker-simple';
new Vue({
el: '#app',
data:{
date: ''
},
components:{
'date-picker': myDatepicker
}
});
```
#### Example （示例 [email protected]+
```html
选择您的新婚之日
import 'babel-polyfill'; //因为使用了es6的一些方法，需要babel垫片，如果你项目中已有相关兼容性方案，可忽略
import Vue from 'vue';
import myDatepicker from 'vue-datepicker-simple/datepicker-2.vue'; //引入对应的组件
new Vue({
el: '#app',
data:{
date: ''
},
components:{
'date-picker': myDatepicker
}
});
```