话不多说直接上代码：

<!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. 尝试造了个工具类库，名为 Diana

    项目地址: diana 文档地址: http://muyunyun.cn/diana/ 造轮子的意义 为啥已经有如此多的前端工具类库还要自己造轮子呢?个人认为有以下几个观点吧: 定制性强,能根据自己的 ...

  2. 注册Azure AD 应用程序

    作者:陈希章 发表于2017年3月22日 在此前的文章中,我给大家介绍了分别用Graph 浏览器以及第三方工具(POSTMAN)快速体验Microsoft Graph的功能,其中有一个重要的环节就是, ...

  3. java注解细节

    现在很多框架都使用注解了,典型的像Spring里面就可以看到大量的注解,比如@Service,@Controller这一类的都是注解.注解Annotation是java一项很重要的功能.下面就来整理一 ...

  4. websocket简介

    在我们做web项目的过程中,经常需要做的一个模块是消息模块.典型的场景:一个商城系统的后台管理,我想实现如果前台有客户下单,后台就会接到消息,以便尽快发货处理. 要实现上述的功能,我们有几种备选的方案 ...

  5. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  6. JavaSe：UncaughtExceptionHandler

    Java中,出现对于异常的处理,通常是使用try{}catch()来捕获处理的.但是在使用trycatch时,未必会将所有的异常都捕获到,所以方法声明时可以有throws xxxException. ...

  7. spring cloud eureka高可用

    记录下自己踩的坑 spring cloud eureka的高可用网上的教程大致分为两种,一种是两两互相注册,一种是三个互相注册. 1.两两互相注册 普通服务的注册写法都是http://peer1/eu ...

  8. 初识Avro

    Avro是Hadoop生态圈的一部分,由Hadoop的创始人Doug Cutting牵头开发,当前最新版本1.8.2.Avro是一个数据序列化系统,设计用于支持大批量数据交换的应用.它的主要特点有: ...

  9. 【java】io流之字符输入流：java.io.Reader类及子类的子类java.io.FileReader

    package 文件操作; import java.io.File; import java.io.FileReader; import java.io.IOException; import jav ...

  10. Python 集体智慧编程PDF

    集体智慧编程PDF 1.图书思维导图http://www.pythoner.com/183.html p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12. ...