話不多說直接上代碼：
<!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;
}