使用mobiscroll控件,来达到开始时间不能大于结束时间
html
<div class="time">
<div style="height:54px">
<span class="starttime">
<div>
<input value="" class="aui-pull-left startTime" readonly="readonly" name="appDate" placeholder="开始时间" id="appDate" type="text" style="display:inline-block;">
</div>
</span>
<span class="time-middle" ><div>至</div></span>
<span class="endtime" >
<div>
<input value="" class="aui-pull-left endTime" readonly="readonly" name="appDate" placeholder="结束时间" id="appDate1" type="text" style="display:inline-block;width:5rem;">
</div>
</span>
</div>
</div>
加载控件样式 js
<script src="../../script/mobiscroll_004.js" type="text/javascript"></script>
<link href="../../css/mobiscroll_002.css" rel="stylesheet" type="text/css">
<link href="../../css/mobiscroll.css" rel="stylesheet" type="text/css">
<script src="../../script/mobiscroll.js" type="text/javascript"></script>
<script src="../../script/mobiscroll_003.js" type="text/javascript"></script>
<script src="../../script/mobiscroll_005.js" type="text/javascript"></script>
<link href="../../css/mobiscroll_003.css" rel="stylesheet" type="text/css">
js
var currYear = (new Date()).getFullYear();
// 开始时间
$("#appDate").mobiscroll().datetime({
preset : 'datetime',
theme : 'android-ics light', //皮肤样式
display : 'modal', //显示方式
mode : 'scroller', //日期选择模式
dateFormat : 'yy-mm-dd',
lang : 'zh',
showNow : true,
nowText : "今天",
startYear : currYear - 10, //开始年份
endYear : currYear + 10, //结束年份
onSelect:function(textval,inset){//点击确定按钮
// 转化时间戳
var val = new Date(textval).getTime();
// 判空
if($('#appDate1').val() != ''){
var endtime = new Date($('#appDate1').val()).getTime();
if(val > endtime){
$('#appDate').val('')
api.toast({
msg: '开始时间不能晚于结束时间',
duration: 2000,
location: 'bottom'
});
}
}
},
});
$("#appDate1").mobiscroll().datetime({
preset : 'datetime',
theme : 'android-ics light', //皮肤样式
display : 'modal', //显示方式
mode : 'scroller', //日期选择模式
dateFormat : 'yy-mm-dd',
lang : 'zh',
showNow : true,
nowText : "今天",
startYear : currYear - 10, //开始年份
endYear : currYear + 10, //结束年份
onSelect:function(textval,inset){//点击确定按钮
var val = new Date(textval).getTime();
if($('#appDate').val() != ''){
var starttime = new Date($('#appDate').val()).getTime();
if(val < starttime){
$('#appDate1').val('')
api.toast({
msg: '结束时间不能早于开始时间',
duration: 2000,
location: 'bottom'
});
}
}
},
});