jedate插件的使用

jquery 时间选择插件-jedate

原创 2016年03月28日 09:48:25

 引言

日期选择插件有很多,今天说一说jedate

 源代码

快速上手

使用对象

<input class="datainp" id="indate" type="text" placeholder="请选择"  readonly>
<input class="datainp" id="dateinfo" type="text" placeholder="请选择"  readonly>
  • 1
  • 2
  • 3

使用方法

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

核心方法: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) {}       //点击确定后的回调
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

【自定义日期格式】

<div id="test1" class="jedate-icon"></div>
<script>
jeDate({
    dateCell: '#test1',
    format: 'YYYY/MM', // 分隔符可以任意定义,该例子表示只显示年月
    festival: true, //显示节日
    choose: function(datas){ //选择日期完毕的回调
        alert('得到:'+datas);
    }
});
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

【日期范围限定在昨天到明天】

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

【图标或其他按钮触发日期】

<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="打开">   

      具体查看:   http://www.jemui.com/     JEUI  前端框架 包括对独立组件Jedate组件



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页