话不多说直接上代码：

<!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. Winform开发框架中工作流模块的业务表单开发

    在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...

  2. 学习Git的最佳资料

    1. ProGit中文版:https://git-scm.com/book/zh/v2 2. 廖雪峰的Git教程: http://www.liaoxuefeng.com/wiki/0013739516 ...

  3. 使用Intellij IDEA的svn时提示出错：Can't use Subversion command line client: svn

    问题 原因是安装SVN的时候没有安装command-line功能,要单独安装VisualSVN 下载页面:http://subversion.apache.org/packages.html SVN1 ...

  4. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  5. iOS学习——内存泄漏检查及原因分析

    项目的代码很多,前两天老大突然跟我说项目中某一个ViewController的dealloc()方法没有被调用,存在内存泄漏问题,需要排查原因,解决内存泄漏问题.由于刚加入项目组不久,对出问题的模块的 ...

  6. 快速学习Bash

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. Shell是Linux下经典的文本互动方式,而Bash是现在最常用的一种Shell.我在这里总结了Bash ...

  7. bootstrap html页面禁止放大缩小

    用bootstrap写的html页面,在手机端中禁止放大缩小: 亲测有效: <meta name="viewport" content="width=device- ...

  8. javascript + sql编写SQL客户端工具tabris

    祝大家2018新年快乐, 前不久发现了一个创意的脚本JtSQL(java编写) 开源地址为:https://github.com/noear/JtSQL JtSQL 特点:*.结合了JS.SQL.模板 ...

  9. Jmeter+Ant+Jenkins接口自动化测试（二）_测试方案设计及jmeter脚本开发

    前言 根据之前部署好的测试环境,进行接口自动化测试的方案设计及Jmeter脚本开发.测试方案设计过程中采用了数据分离和对象分离等思路,因此直接通过特定的测试用例文档来驱动整个自动化接口测试的执行,相关 ...

  10. Node.js平台的一些使用总结

    Node.js的安装 菜鸟教程 npm -v查看npm的版本. npm更新 npm官网 npm权限问题 由于npm经常会因为权限问题,不能全局安装模块,所以解决办法如下: npm官网 npm切换淘宝源 ...