当前位置：首页 > 网页特效 > 日期和时间

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

分类：日期和时间日期：2024-05-14 点击(3) 评论(0)

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

简介

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

#####  使用方法
在页面中引入下面的文件。

```html
lt;script src="./js/rolldate.min.js"gt;lt;/scriptgt;
```
 es6
```html
import Rolldate from 'rolldate'
new Rolldate({
  el:'#date'
})
```
 commonJS
```html
var Rolldate = require('rolldate');
new Rolldate({
  el:'#date'
})
```
 amd
```html
require(['rolldate'],function(Rolldate){
  new Rolldate({
    el:'#date'
  })
})
```
 cmd
```html
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|否|无|主动隐藏插件|

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果