话不多说直接上代码：

<!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;

}

移动端mobiscroll时间插件的调用的更多相关文章

  1. 基于zepto的移动端轻量级日期插件

    前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...

  2. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  3. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  4. selenium 难定位元素，时间插件，下拉框定位，string

    1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...

  5. layui 时间插件laydate ,取消回调

    背景:转型新公司不再是做前端展示H5之类的东西,主要业务是后台数据读取和插件搭建前端页面,接触的第一个老项目是layui制作的,由于业务需求,需要用到时间插件以下为时间插件的一些用法--------- ...

  6. selenium 难定位元素，时间插件，下拉框定位，string包含，定位列表中的一个，技巧

    关于frame: 如果网页存在iframe的话,传统的定位有时候找不到元素,需要切换frame: # 切换到leftFrame定位“测井设计” driver.switch_to_frame(" ...

  7. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  8. bootstrap时间插件 火狐不显示 完美解决方法

    原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...

  9. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

随机推荐

  1. Asp.net MVC 生成zip并下载

    前面有生成Excel或Word的示例,所以就不再重新写了. 这里只提供将指定文件以ZIP的方式下载. 创建一个 Zip工具类 public class ZIPCompressUtil { public ...

  2. ABP 框架启程

    准备动手写一套电商的系统,辗转收集了不少相关的开源项目,最后决定使用ABP作为起点. 在园子里好多人都在推广ABP.有个园友做了一个集合贴,方便大家使用  ABP集合贴 建议大家优先看 HK Zhan ...

  3. 设置两个div是总是不能重合,浏览器user agent stylesheet问题

    如图 两个div之间总是有一个空行,设置了margin为0还是没卵用,f12调试发现 多了一个user agent stylesheet样式,经百度是浏览器自带的样式 重新为div内的元素ul设置cs ...

  4. 工作随笔——jasypt-spring-boot使用

    最近有一个项目,要求对各种配置文件中的数据进行加密.so,let`s do it. Maven依赖 <dependency> <groupId>com.github.ulise ...

  5. OpenCASCADE构造一般曲面

    OpenCASCADE构造一般曲面 eryar@163.com Abstract. 本文主要介绍常见的曲面如一般柱面(拉伸曲面).旋转面在OpenCASCADE中的构造方法,由此思考一般放样算法的实现 ...

  6. OC金额转大写

    -(NSString *)digitUppercaseWithMoney:(NSString *)money { NSMutableString *moneyStr=[[NSMutableString ...

  7. [译文]React v16（新特性）

    [译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...

  8. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  9. Linux(CentOS6.5)修改系统市区被中国标准时间(北京时间)

    本文地址http://comexchan.cnblogs.com/ ,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 备份时区配置文件 cp /etc/localtime /etc/l ...

  10. spring_boot_pay支付宝，微信，银联支付详细代码案例

    spring-boot-pay 支付服务:支付宝,微信,银联详细代码案例(除银联支付可以测试以外,支付宝和微信支付测试均需要企业认证,个人无法完成测试),项目启动前请仔细阅读 注意事项  . 友情提示 ...