My97DatePicker是很不错的一个日期选择插件,体积只有几十k但是功能非常强大,能满足很多苛刻的要求。
官网:http://www.my97.net/
各目录及文件的用途:
目录lang 存放语言文件
目录skin 存放皮肤的相关文件
calendar.js 日期库主文件
WdatePicker.js 配置文件,在调用的地方仅需使用该文件
调用模式
触发WdatePicker函数来调用弹出日期框
<div >
<div >
<div >
<input id="startTime" placeholder="开始时间" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',onpicking:timeJs.initTime, onpicked : timeJs.chgTime, minDate: 'new Date()', maxDate:'#F{$dp.$D(\'endTime\',{s:-1});}'})" />
<i></i>
</div>
<span >至</span>
<div >
<input id="endTime" placeholder="结束时间" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',onpicking:timeJs.initTime,onpicked :timeJs.chgTime, minDate:'#F{$dp.$D(\'startTime\',{s:1})||\'new Date()\';}'})"/>
<i></i>
</div>
</div>
注:onpicking(选择前) 和 onpicked(选择后) 为自定义事件函数
var timeJs = {
startTimePreValue:"",
endTimePreValue:"",
//记录原值
initTime:(function() {
var id=$(this).attr("id").trim();
if(id=="startTime"){
timeJs.startTimePreValue=$(this).val();
}else if(id=="endTime"){
timeJs.endTimePreValue=$(this).val();
}
}),
chgTime:(function() {
var time=$(this).val();
var pretime="";
//判断是否与前值相同
var id=$(this).attr("id").trim();
if(id=="startTime" ){
if(timeJs.startTimePreValue==time){
return false;
}else{
pretime=timeJs.startTimePreValue;
}
}else if(id=="endTime"){
if(timeJs.endTimePreValue==time){
return false;
}else{
pretime=timeJs.endTimePreValue;
}
}
layer.confirm('调整时间,需重新执行操作,是否需要调整?', {
title:'温馨提示',//title:false 不显示标题
btn: ['确定','取消'] //按钮
}, function(index){
layer.close(index);
}, function(){
//内置函数 $dp.$ 相当于 document.getElementById
$dp.$(id).value=pretime;
});
})
}