jeDate日期选择控件实例

核心方法：jeDate(options)

options是一个对象，它包含了以下key: '默认值'

 

dateCell:"#id", //需显示日期的元素选择器

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,   //弹出层的层级高度

choose:function(val) {}  //选择时间之后的回调函

 

【外部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"

})
//第二种
$("#test1").click(function(){
    jeDate({
      dateCell: '#test1',
      isinitVal:true,
      format: 'YYYY-MM-DD hh:mm'
    });
});


</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>