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

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


相关文章
|
JSON 前端开发 Java
前端请求SpringBoot接口出现Required request body is missing
前端请求SpringBoot接口出现Required request body is missing
1048 2
|
Windows
ECharts 网站访问慢解决办法(Window系统)
ECharts 网站访问慢解决办法(Window系统)
3291 0
ECharts 网站访问慢解决办法(Window系统)
【Axure元件分享】移动端滑动拨盘日期选择器
本文介绍了一款基于Axure的移动端滑动拨盘日期选择器元件,适用于预订、日程管理等场景。点击日期文本框,日期选择器从底部滑动显示,支持取消和确认操作,确认后更新日期。文末提供元件免费下载地址及更多Axure元件原型资源链接。
694 11
|
存储 人工智能 API
Qoder 正式开放订阅,Credits 耐用度提升1/3
Qoder 自 2025 年 8 月 21 日公测以来,以最强的上下文工程能力以及 Repo Wiki、Quest Mode 等广受好评的产品功能,收获了全球开发者的支持和喜爱。今天,Qoder 面向全球用户正式推出付费订阅计划,助力开发者开启高效流畅的编程之旅。
11046 2
|
前端开发 安全 测试技术
Postman Mac 版安装终极指南:从下载到流畅运行,一步到位
Postman 是 API 开发与测试的高效工具,支持各类 HTTP 请求调试与团队协作。本文详解 Mac 版下载、安装步骤,助你快速上手。同时推荐一体化 API 协作平台 Apifox,集文档、调试、测试于一体,提升开发效率与团队协同能力。
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29231 154
|
JavaScript 前端开发
【Vue 3】如何实现动态表单生成器的拖拽功能?
【Vue 3】如何实现动态表单生成器的拖拽功能?
|
应用服务中间件 PHP nginx
访问网站500 Internal Server Error怎么办
访问网站500 Internal Server Error怎么办
Exception in thread "main" java.lang.IllegalArgumentException: U+6570 ('.notdef') is not available in the font Helvetica-Bold, encoding: WinAnsiEncoding 问题解决
【5月更文挑战第26天】Exception in thread "main" java.lang.IllegalArgumentException: U+6570 ('.notdef') is not available in the font Helvetica-Bold, encoding: WinAnsiEncoding 问题解决
1327 2
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容

热门文章

最新文章