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

简介: 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
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
JavaScript 前端开发 UED
分享89个时间日期JS特效,总有一款适合您
分享89个时间日期JS特效,总有一款适合您
266 3
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
人工智能 安全 机器人
OpenClaw(原 Clawdbot)钉钉对接保姆级教程 手把手教你打造自己的 AI 助手
OpenClaw(原Clawdbot)是一款开源本地AI助手,支持钉钉、飞书等多平台接入。本教程手把手指导Linux下部署与钉钉机器人对接,涵盖环境配置、模型选择(如Qwen)、权限设置及调试,助你快速打造私有、安全、高权限的专属AI助理。(239字)
37790 184
【Axure元件分享】移动端滑动拨盘日期选择器
本文介绍了一款基于Axure的移动端滑动拨盘日期选择器元件,适用于预订、日程管理等场景。点击日期文本框,日期选择器从底部滑动显示,支持取消和确认操作,确认后更新日期。文末提供元件免费下载地址及更多Axure元件原型资源链接。
513 11
|
人工智能 缓存 UED
deepseek-vue3ai流式输出AI对话助手
原创新作vue3.5+deepseek+vite6+vant4仿DeepSeek-R1流式输出ai聊天对话。支持AI流式打字输出效果、浅色/暗黑主题模式、代码高亮、针对移动端+PC端适配处理。
1581 65
|
资源调度 前端开发 JavaScript
Bootstrap日期选择器插件bootstrap-datepicker
Bootstrap日期选择器插件bootstrap-datepicker
1428 12
|
前端开发 UED 开发者
React 日期时间选择器 (DateTime Picker): 从基础到高级
本文详细介绍了如何在React应用中集成日期时间选择器,重点讲解了`react-datepicker`和Material-UI的`DatePicker`组件的安装、基本用法、自定义日期格式和设置日期范围的方法。同时,文章还探讨了常见问题及其解决方法,帮助开发者避免易错点,确保在项目中顺利集成日期时间选择功能。
1112 3
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
4407 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明

热门文章

最新文章

下一篇
开通oss服务