话不多说直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>start</title>
<script>
document.querySelector("html").style.fontSize = document.documentElement.clientWidth/375*50+"px";
</script>
<link rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta.min.css"> //引入样式
</head>
<body>
//我这里是开始时间和结束时间！！！
<ul class="start_time">
<li>
<i>开始时间</i><br>
<input type="text" id="startDate" placeholder="5月30日" />
</li>
<li> //时间差的显示
<i>DAY<span class="startTime">1</span></i>
<p>|</p>
</li>
<li>
<i>结束时间</i><br>
<input type="text" id="endDate" placeholder="5月31日" />
</li>
</ul>
<script src="../js/jquery.min.js"></script>
<script src="../js/mobiscroll.custom-3.0.0-beta.min.js"></script>
<script src="../js/common.js"></script>
<script>
$(function () {
//初始化配置参数
$('#startDate,#endDate').mobiscroll().calendar({
theme: 'mobiscroll', //日期选择器使用的主题
lang: 'zh', //使用语言
display: 'bottom' //显示方式
});
});
//字符串切割比较
function splitAndcompare(str1,str2) {
var arr1 = str1.split("/"),arr2 = str2.split("/");
//console.log(arr1+""+arr2);
if(arr1[0]>arr2[0]||((arr1[1]=arr2[1])&&(arr1[1]>arr2[1]))||((arr1[0]=arr2[0])&&(arr1[1]=arr2[1])&&(arr1[2]>arr2[2]))){
alert("截止日期应该在开始日期后，请重新输入！");
$("#startDate,#endDate").val("重新输入");
}else{
var startTime = new Date(Date.parse(str1.replace(/-/g, "/"))).getTime();
var endTime = new Date(Date.parse(str2.replace(/-/g, "/"))).getTime();
var dates = Math.abs((startTime - endTime))/(1000*60*60*24);
$(".start_time li").eq(1).find("span").html(dates);
}
}
$("#startDate").change(function () { //先点击开始时间，后点击结束时间
time1 = $(this).val();
$("#endDate").change(function () {
time2 = $(this).val();
splitAndcompare(time1,time2);
});
});
$("#endDate").change(function () { //先点击结束时间，后点击开始时间（以防此时时间差计算有误）
time2 = $(this).val();
$("#startDate").change(function () {
time1 = $(this).val();
splitAndcompare(time1,time2);
});
});
</script>
</body>
</html>
用不到这么多的可以自行去掉部分代码！
对了，css样式可以自己设置
我给整体改了颜色,去掉了左右按钮，记得加！important，部分css如下
.mbsc-mobiscroll .mbsc-cal .mbsc-cal-sc-sel .mbsc-cal-sc-cell-i, .mbsc-mobiscroll .mbsc-cal .mbsc-cal-day-sel .mbsc-cal-day-i{
background: #ffbb21!important;
}
.mbsc-mobiscroll .mbsc-cal-days {
color: #ffbb21!important;
}
.mbsc-mobiscroll .mbsc-cal-days th{
border-bottom: 1px solid #ffbb21!important;
}
.mbsc-mobiscroll .mbsc-cal-btn-txt{
color: #ffbb21!important;
}
.mbsc-mobiscroll .mbsc-fr-btn{
color: #ffbb21!important;
}
.mbsc-mobiscroll .mbsc-cal-hl-now .mbsc-cal-today {
color: #ffbb21!important;
}
.mbsc-mobiscroll .mbsc-cal-btn-txt{
display: none;
}