首页 | 3496 | 561 | 280 | 添加收藏 上一个 下一个
jeDate日期控件带时分秒日期选择器代码

注意事项


1、解压后,将jedate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系


2、使用只需在页面引入jedate.js即可。 如:


<script type="text/javascript" src="jeDate/jedate.js"></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) {}       //点击确定后的回调

使用对象


可以使用在文本框与非文本框上:如 input 、 DIV


<input id="indate" type="text" placeholder="请选择"  readonly>
<div id="dateinfo"><div>

【风格调用】
jeDate.skin("jedate")  //调用不同风格的样式  分别有 默认("jedate")、红色("red")、绿色("green")、灰色("gray")、【外部js调用】<input class="workinput wicon" id="test1" type="text" placeholder="请选择" readonly><script>jeDate({
    dateCell:"#test1",  //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class'
    format:"YYYY年MM月DD日 hh:mm:ss",
    isinitVal:true, //显示时间
    isTime:true, 
    festival: true, //显示节日
    minDate:"2014-09-19 00:00:00"})</script>【图标触发日期】<input class="workinput" id="test2" type="text" placeholder="请选择"  readonly><span class="wicon" onClick="jeDate({dateCell:'#test2',isTime:true,format:'YYYY-MM-DD hh:mm:ss'})"></span>

【自定义日期格式】<div class="workinput wicon" id="custom1"></div><script>jeDate({
    dateCell: '#custom1',
    format: 'YYYY/MM' // 分隔符可以任意定义,该例子表示只显示年月});</script>【日期范围限定在昨天到明天】<input class="workinput wicon" id="custom2" type="text" placeholder="请选择" readonly><script>jeDate({
    dateCell: '#custom2',
    format:"YYYY-MM-DD",
    minDate: jeDate.now(-1), //0代表今天,-1代表昨天,-2代表前天,以此类推
    maxDate: jeDate.now(1) //1代表明天,2代表后天,以此类推});</script>【给日期标注点】<div class="workinput wicon" id="custom3"></div><script>jeDate({
    dateCell: '#custom3',
    format: 'YYYY-MM-DD', // 分隔符可以任意定义,该例子表示只显示年月
    marks:['2015-01-03','2016-01-01','2016-01-10','2016-01-15','2016-02-15','2016-03-10','2016-04-18'], 
    //marks给日期做标注,特别说明(日期不足2位的必须加0,如:'2015-1-3' 要写成 '2015-01-03' 否则标注不成功)});</script>