All Projects → jawil → Datepicker

jawil / Datepicker

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

Programming Languages

javascript
184084 projects - #8 most used programming language
es6
455 projects
js
455 projects

Projects that are alternatives of or similar to Datepicker

Datetimepicker
This is a custom android holo datepicker timepicker
Stars: ✭ 56 (-52.54%)
Mutual labels:  picker, datepicker, datetimepicker
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: ✭ 1,289 (+992.37%)
Mutual labels:  picker, datepicker, datetimepicker
Material Ui Pickers
Date & Time pickers, built with ❤️ for @material-ui/core
Stars: ✭ 2,291 (+1841.53%)
Mutual labels:  picker, datepicker, datetimepicker
s-date-range-picker
📅 A date range picker built with Svelte
Stars: ✭ 13 (-88.98%)
Mutual labels:  datepicker, date-picker, datetimepicker
Materialdaterangepicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker
Stars: ✭ 1,315 (+1014.41%)
Mutual labels:  picker, datepicker, datetimepicker
Datetimepicker
jQuery Plugin Date and Time Picker
Stars: ✭ 3,402 (+2783.05%)
Mutual labels:  picker, datepicker, datetimepicker
Rc Datetime Picker
React component for datetime picker by Moment.js
Stars: ✭ 85 (-27.97%)
Mutual labels:  picker, datepicker, datetimepicker
popoPicker
popoPicker是一个移动端3D滚轮日期时间和单项的选择器,支持无限循环滚动,不依赖第三方库
Stars: ✭ 26 (-77.97%)
Mutual labels:  datepicker, picker, datetimepicker
angular-eonasdan-datetimepicker
A wrapper directive around the Eonasdan Datepicker v4 component.
Stars: ✭ 63 (-46.61%)
Mutual labels:  datepicker, date-picker, datetimepicker
Pickerjs
⚠️ [Deprecated] No longer maintained. JavaScript date time picker.
Stars: ✭ 299 (+153.39%)
Mutual labels:  picker, datepicker, datetimepicker
Tempus Dominus
A powerful Date/time picker widget.
Stars: ✭ 6,900 (+5747.46%)
Mutual labels:  picker, datepicker, datetimepicker
Bottomsheetpickers
Third-party date and time pickers for Android.
Stars: ✭ 1,099 (+831.36%)
Mutual labels:  datetimepicker, date-picker
Intl Date Time
International DateTime for Laravel Nova
Stars: ✭ 50 (-57.63%)
Mutual labels:  datepicker, datetimepicker
Persianrangedatepicker
Persian range date picker for android.
Stars: ✭ 48 (-59.32%)
Mutual labels:  picker, datepicker
Vue2 Datepicker
A datepicker / datetimepicker component for Vue2
Stars: ✭ 1,154 (+877.97%)
Mutual labels:  datepicker, datetimepicker
Pure Css3 Animated Border
Pure CSS3 animated border for all html element.
Stars: ✭ 63 (-46.61%)
Mutual labels:  plugin, css3
Horizontalpicker
DatePicker horizontal con selección smooth por día para Android.
Stars: ✭ 116 (-1.69%)
Mutual labels:  picker, datepicker
Vue Mj Daterangepicker
🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)
Stars: ✭ 48 (-59.32%)
Mutual labels:  datepicker, date-picker
Circularpicker
CircularPicker is helpful for creating a controller aimed to manage any calculated parameter.
Stars: ✭ 73 (-38.14%)
Mutual labels:  picker, datepicker
Angular Mydatepicker
Angular datepicker and date range picker 📅
Stars: ✭ 76 (-35.59%)
Mutual labels:  datepicker, date-picker

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

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目录)

示例:

// UMD兼容规范,支持浏览器直接引入,require,define等多种JS模块化引入
<script src="dist/date-picker.min.js"></script>

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可以拿到选择的时间字符串和时间戳。

效果图

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].