jquery 时间选择插件-jedate
2016-03-28 09:48
591 查看
引言
日期选择插件有很多,今天说一说jedate源代码
github快速上手
使用对象<input class="datainp" id="indate" type="text" placeholder="请选择" readonly> <input class="datainp" id="dateinfo" type="text" placeholder="请选择" readonly>
使用方法
<script type="text/javascript"> jeDate({ dateCell:"#indate",//isinitVal:true, format:"YYYY-MM-DD", isTime:false, //isClear:false, minDate:"2014-09-19 00:00:00" }) jeDate({ dateCell:"#dateinfo", isinitVal:true, isTime:true, //isClear:false, minDate:"2014-09-19 00:00:00" }) </script>
核心方法:jeDate(options)
options是一个对象,它包含了以下key: '默认值' dateCell:"#id", //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class' format:"YYYY-MM-DD hh:mm:ss", //日期格式 minDate:"1900-01-01 00:00:00", //最小日期 maxDate:"2099-12-31 23:59:59", //最大日期 isinitVal:false, //是否初始化时间 isTime:false, //是否开启时间选择 isClear:true, //是否显示清空 festival:false, //是否显示节日 zIndex:999, //弹出层的层级高度 marks:null, //给日期做标注 choosefun:function(val) {}, //选中日期后的回调 clearfun:function(val) {}, //清除日期后的回调 okfun:function(val) {} //点击确定后的回调
【自定义日期格式】
<div id="test1" class="jedate-icon"></div> <script> jeDate({ dateCell: '#test1', format: 'YYYY/MM', // 分隔符可以任意定义,该例子表示只显示年月 festival: true, //显示节日 choose: function(datas){ //选择日期完毕的回调 alert('得到:'+datas); } }); </script>
【日期范围限定在昨天到明天】
<div id="hello3" class="jedate-icon"></div> <script> jeDate({ dateCell: '#hello3', minDate: jeDate.now(-1), //0代表今天,-1代表昨天,-2代表前天,以此类推 maxDate: jeDate.now(1) //1代表明天,2代表后天,以此类推 }); </script>
【图标或其他按钮触发日期】
<input class="datainp" id="datebut" type="text" placeholder="请选择" readonly> <input type="button" onClick="jeDate({dateCell:'#datebut',isTime:true,format:'YYYY-MM-DD hh:mm:ss'})" value="打开">
============
查看演示
查看演示
下载
jeDate.js
============
相关文章推荐
- jQuery实现的多滑动门,多选项卡效果代码
- jquery滚动条美化插件
- requireJS中的shim——以加载jQuery插件为例
- 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
- jQuery实时显示鼠标指针位置和键盘ASCII码
- jQuery国际化插件 jQuery.i18n.properties 【轻量级】
- jQuery实现的精美平滑二级下拉菜单效果代码
- jquery表格增加删除后改变序号
- jquery对table表格的常用操作
- JQuery 学习笔记
- 使用jquery获取url及url参数的方法及定义JQuery扩展方法
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
- 正则表达式和Jquery
- 正则表达式与JQuery
- jqueryEasyUi 后台页面结构设计
- jquery EasyUi 登录页设计
- servlet+jquery的简单实现
- jquery
- jquery 图片没有路径,不显示图片。
- 学习jQuery的感受