https://github.com/bingxuelover/vue-time-picker
Vue.js + element-ui for time picker, or select time
https://github.com/bingxuelover/vue-time-picker
Last synced: 3 months ago
JSON representation
Vue.js + element-ui for time picker, or select time
- Host: GitHub
- URL: https://github.com/bingxuelover/vue-time-picker
- Owner: bingxuelover
- Created: 2019-09-23T08:28:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T19:04:45.000Z (over 2 years ago)
- Last Synced: 2025-01-22T10:31:08.834Z (5 months ago)
- Language: HTML
- Size: 1.38 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# 时间和分钟选择的 vue 功能
## 技术栈
vue.js+element-ui
## 实现功能
- 选择一天中的部分时间,有的时间点不能选择,根据获取到的不能选择的数据来设置可以选择的时间区域
- 选择日期后,判断可选的开始时间,只能选不在不可选中的并且只能是当前时间以后的
- 选择开始时间后,判断结束时间,只能是开始时间所在的可选时间段内的时间
## html 文件夹
### time-range.html
- 使用 select 实现
- 可选分钟只能是 '00' 和 '30',作为 option 选项,自己添加
- 利用 element-ui 的 select 的 disabled 功能来实现
### time-range-picker.html
- 使用 time-picker 实现
- 可选一天里的所有小时和分钟
- 利用 element-ui 的 time-picker 的 picker-options 的 selectableRange 来设置可以使用的时间
### 参数
- 获取到的不可选择时间区域是['09:00', '10:00'], ['13:00', '14:30']
## example 文件夹
- 是一个组件注册的 html 例子
## vue-demo 文件夹
- main.js 调用组件的方法
- App.vue 是使用组件的例子
- index.js 注册组件的方法
- components 中是两个组件
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```