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

简介: 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
否
无
主动隐藏插件


相关文章
|
JavaScript 前端开发
深入了解 Vue中$nextTick
$nextTick`是 Vue 框架中的一个函数,用于在 DOM 更新完成后执行回调函数。它的主要作用是`解决在 Vue 中修改数据后,DOM 不会立即更新的问题
|
3月前
|
监控
阿里云轻量应用服务器不限流量是真的不限吗?无固定流量有没有流量上限?
阿里云轻量应用服务器“不限流量”仅适用于标注“无固定流量”的套餐,即流量无上限、不额外收费;含“每月XXGB”配额的套餐则超额按0.8元/GB计费。注意:200M为峰值带宽,非保障带宽,且禁止流量穿透。阿里云轻量应用服务器官网:https://t.aliyun.com/U/dwftch
【Axure元件分享】移动端滑动拨盘日期选择器
本文介绍了一款基于Axure的移动端滑动拨盘日期选择器元件,适用于预订、日程管理等场景。点击日期文本框,日期选择器从底部滑动显示,支持取消和确认操作,确认后更新日期。文末提供元件免费下载地址及更多Axure元件原型资源链接。
733 11
|
安全 开发工具 git
如何使用分支回滚代码?
如何使用分支回滚代码?
1755 57
|
缓存 iOS开发 MacOS
uniapp发布快应用失败报错Error: ENOENT: no such file or directory以及hap-chimera-toolkit问题优雅草卓伊凡
uniapp发布快应用失败报错Error: ENOENT: no such file or directory以及hap-chimera-toolkit问题优雅草卓伊凡
1267 2
uniapp发布快应用失败报错Error: ENOENT: no such file or directory以及hap-chimera-toolkit问题优雅草卓伊凡
|
开发者
移动端UI名词 - AxureMost
该文档介绍了多种UI组件的分类和功能,包括按钮、图标、宫格等基础组件,头像、徽标、轮播图等数据展示类组件,复选框、日期选择器、输入框等数据输入类组件,以及对话框、加载、消息通知等反馈类组件。此外,还涵盖了下拉菜单、导航栏、分页器等导航类组件。每个组件都有具体的应用场景和作用,帮助开发者快速构建界面。
806 28
|
计算机视觉
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
1438 0
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
|
开发框架 缓存 安全
开发日志:IIS安全配置
开发日志:IIS安全配置
开发日志:IIS安全配置
|
JavaScript 前端开发
【Vue 3】如何实现动态表单生成器的拖拽功能?
【Vue 3】如何实现动态表单生成器的拖拽功能?
|
应用服务中间件 PHP nginx
访问网站500 Internal Server Error怎么办
访问网站500 Internal Server Error怎么办