https://github.com/jawil/datepicker

仿滴滴出行预约打车IOS风格3D时间选择器 🌲
https://github.com/jawil/datepicker

css3 date-picker datepicker datetimepicker es6 js picker plugin

Last synced: about 1 month ago
JSON representation

仿滴滴出行预约打车IOS风格3D时间选择器 🌲

• Host: GitHub
• URL: https://github.com/jawil/datepicker
• Owner: jawil
• License: mit
• Created: 2017-02-17T16:22:57.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-22T07:57:22.000Z (almost 7 years ago)
• Last Synced: 2024-08-03T09:09:50.259Z (5 months ago)
• Topics: css3, date-picker, datepicker, datetimepicker, es6, js, picker, plugin
• Language: JavaScript
• Homepage:
• Size: 74.2 KB
• Stars: 123
• Watchers: 8
• Forks: 39
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#### 仿滴滴预约打车IOS风格时间选择器在线预览地址(PC请切换到移动端模式打开)

>[http://codepen.io/jawil/full/WRBxya/](http://codepen.io/jawil/full/WRBxya/)

 ```

  * [datePicker plugin]

  * IOS风格日期选择器,仿滴滴打车预约用车时间选择器

  * @Author  jawil

  * @date    2017-02-17

  * @param   {[object]}   options [配置参数]

 ```

#### 运行预览

1. cd datePicker

2. npm install

3. npm run dev(浏览器预览)

4. npm run build(生成dist目录)

#### 示例：

 ```JavaScript

 // UMD兼容规范，支持浏览器直接引入，require，define等多种JS模块化引入

 

 

 datePicker({

     afterDay: 0, // 第几天后开始可以预约，默认是今天

     

     appointDays: 7, // 默认可以预约未来7天

     

     minuteLater: 20, // 当天的话，默认只能预约20分钟之后,如果两个小时就填120

     

     hourArea: [9, 22], // 预约小时可选的范围，默认是9：00-22：00

     

     interval: 1, // 分钟的间隔，默认一分钟

     initStrDate:'', //初始化时间 2018-12-25: 18:00:00

     callBack: function(timeStr, timeStamp) { // 点击确认获取到的时间戳和时间字符串

         console.log(timeStr, timeStamp)

     }

     

 })

 ```

点击确认之后，回到函数callback可以拿到选择的时间字符串和时间戳。

#### 效果图

![](https://ws4.sinaimg.cn/large/006tNc79gy1fitlr3tyhwj30av0jemyb.jpg)

**有问题可以邮件联系我，欢迎提Issue和Pre**