jquery移动端日期插件

jdate(jquery-date)

此为jdate 2.0新版,完全参照jdate的下一代版本rolldate做了全新改版,查看旧版请点击返回旧版(1.4.3分支)

此版特色:

拥有和rolldate完全一样的功能;
体积更小,兼容性更强;

不足之处:

滑动较慢;

此版更适合滑动天数少的情况(比如限制只能滑动几天),或者兼容性要求高的情况,一般情况更推荐使用rolldate。并且jdate基本不怎么更新和维护,主要作为一个次要版本出现。

演示

jdate(下方直接扫码即可体验)

使用方式

特别注意:
jdate依赖jQuery,如果没有全局的$或jQuery(也要保证在jdate之前加载),必须先使用以下的代码:

Jdate.usejQuery($);

如:

import $ from 'jquery' import Jdate from 'jdate' Jdate.usejQuery($); new Jdate({ el:'#date' })

否则插件将报错,无法运行。

es6

import Jdate from 'jdate' new Jdate({ el:'#date' }) commonJS

var Jdate = require('jdate'); new Jdate({ el:'#date' }) amd

require(['Jdate'],function(Jdate){ new Jdate({ el:'#date' }) }) cmd

seajs.use('Jdate',function(undefined){ //插件没有遵循cmd规范,这里的Jdate是全局的 new Jdate({ 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 插件滚动后的回调函数
confirm null 确认按钮触发前的回调函数,return false可阻止插件执行,
return其他值可修改日期,函数返回一个参数(选中的日期)
cancel null 插件取消时触发的回调函数
trigger 'tap' 默认使用tap解决移动端click事件300ms延迟,可选click替换tap。注意使用tap会阻止其他绑定的click事件的触发
show 主动触发插件,当trigger为tap时,主动触发插件应该使用此方法
hide 主动隐藏插件

//完整参数、方法示例 var jd = new Jdate({ el: '#date', format: 'YYYY-MM-DD', beginYear: 2000, endYear: 2100, minStep:1, lang:{title:'自定义标题'}, trigger:'tap', init: function() { console.log('插件开始触发'); }, moveEnd: function() { console.log('滚动结束'); }, confirm: function(date) { console.log('确定按钮触发'); }, cancel: function() { console.log('插件运行取消'); } }) jd.show(); jd.hide();

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。