多格式、功能强大的移动端日期选择插件

简介: rolldate是一款多格式、功能强大的移动端日期选择插件。该插件可以在移动端实现iOS样式的日期时间选择效果。支持多种时间格式,使用better-scroll作为滑动插件,支持自定义语言和回调函数等,功能非常强大。

tx000225.png

在线预览

下载

rolldate是一款多格式、功能强大的移动端日期选择插件。该插件可以在移动端实现iOS样式的日期时间选择效果。支持多种时间格式,使用better-scroll作为滑动插件,支持自定义语言和回调函数等,功能非常强大。

使用方法

在页面中引入下面的文件。

<script src="./js/rolldate.min.js"</script>

es6

import Rolldate from 'rolldate'
new Rolldate({
   
  el:'#date'
})

commonJS

var Rolldate = require('rolldate');
new Rolldate({
   
  el:'#date'
})

amd

require(['rolldate'],function(Rolldate){
   
  new Rolldate({
   
    el:'#date'
  })
})

cmd

seajs.use('rolldate',function(undefined){
   
    //插件没有遵循cmd规范,这里的Rolldate是全局的
    new Rolldate({
   
      el:'#date'
    })
});

配置参数




名称
必填
默认值
说明




el


绑定插件的dom元素,插件内部使用document.querySelector,
也可以直接传递dom元素对象,只支持单个


format

'YYYY-MM-DD'
日期格式,无限制。规则:年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔,可随意组合


beginYear

2000
日期开始年份


endYear

2100
日期结束年份


value


日期初始化的默认值,列如'2018-03-18'


lang

年、月、日...
配置插件语言,默认:title:'选择日期',cancel:'取消',confirm:'确认',
year:'年',month:'月',day:'日',hour:'时',min:'分',sec:'秒'


minStep

1
分钟按指定数分隔


init

null
插件触发前的回调函数,return false可阻止插件执行


moveEnd

null
插件滚动后的回调函数,函数返回一个参数(better-scroll实例)


confirm

null
确认按钮触发前的回调函数,return false可阻止插件执行,
return其他值可修改日期,函数返回一个参数(选中的日期)


cancel

null
插件取消时触发的回调函数


trigger

'tap'
默认使用tap解决移动端click事件300ms延迟,可选click替换tap。注意使用tap会阻止其他绑定的click事件的触发


show


主动触发插件,当trigger为tap时,主动触发插件应该使用此方法


hide


主动隐藏插件


相关文章
|
5月前
【Axure元件分享】移动端滑动拨盘日期选择器
本文介绍了一款基于Axure的移动端滑动拨盘日期选择器元件,适用于预订、日程管理等场景。点击日期文本框,日期选择器从底部滑动显示,支持取消和确认操作,确认后更新日期。文末提供元件免费下载地址及更多Axure元件原型资源链接。
195 11
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
自然语言处理 前端开发 JavaScript
最好用的 8 款 React Datepicker 时间日期选择器测评推荐
React 时间日期选择器(date-timepicker)组件,与表单、富文本、表格、拖拽等组件一样,是大家用 React 搭建项目时使用最频繁的组件之一。React DateTimePicker 除了基础选择日期时间外,还有非常多样的功能配合不同场景使用,比如 12/24小时,禁止选择某些日期,高亮某些日期,夜间模式,多语言,酒店订单的特别场景等。本文记录了我自己使用多年最好用的 8 款 React DateTimePicker 组件,每一款都经过我实际测试,推荐给大家。
2039 0
最好用的 8 款 React Datepicker 时间日期选择器测评推荐
|
3月前
|
自然语言处理 测试技术 API
TCPDF库详解:功能、作用及多语言安装指南-tcpdf可不是只有php能用-优雅草卓伊凡
TCPDF库详解:功能、作用及多语言安装指南-tcpdf可不是只有php能用-优雅草卓伊凡
280 5
|
5月前
|
IDE 开发工具 Swift
Xcode 16.3 (16E140) - Apple 平台 IDE
Xcode 16.3 (16E140) - Apple 平台 IDE
360 1
Xcode 16.3 (16E140) - Apple 平台 IDE
|
JavaScript
Vue2日期选择器插件(vue-datepicker-local)
这是一个基于 Vue 的日期选择器组件库,支持年份、月份、日期和时间的选择,并且均可进行范围选择。用户可以自定义日期格式与组件样式。该示例展示了如何配置组件以限制可选日期范围,并提供了相应的代码实现。
1834 0
Vue2日期选择器插件(vue-datepicker-local)
|
11月前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于:`Link` 是专门为 React 应用设计的,用于实现客户端路由导航,不会触发页面的重新加载,而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
|
存储 测试技术 数据安全/隐私保护
Docker自建仓库之Harbor部署实战
关于如何部署和使用Harbor作为Docker企业级私有镜像仓库的详细教程。
1881 13
|
编解码 Dart 网络协议
Flutter如何玩转超低延迟RTSP/RTMP播放,跨平台视频流体验大升级,让你的应用秒变直播神器!
【9月更文挑战第3天】Flutter作为谷歌推出的跨平台移动UI框架,凭借高性能和丰富的生态系统广受好评。本文详细介绍如何在Flutter应用中实现低延迟的跨平台RTSP/RTMP播放,并提供具体示例代码。首先介绍了如何使用`flutter_vlc_player`播放RTSP流,然后讨论了优化视频播放以降低延迟的方法,包括调整播放器配置等。通过选用合适的播放器插件并进行优化,Flutter可在视频流播放领域提供卓越的用户体验。随着生态的发展,Flutter有望成为视频流媒体开发的首选框架。
1265 6
|
敏捷开发 Kubernetes 网络安全
阿里云云效产品使用问题之代码从一个账号迁移到另一个账号(从一个企业迁移到另一个企业),该如何迁移
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。