话不多说直接上代码：

<!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. Material使用02 图标MdIconModule、矢量图作为图标使用及改进

    1 MdIconModule模块的使用 1.1 在需要用到的模块中引入Material图标模块 import { BrowserModule } from '@angular/platform-bro ...

  2. 关于postgres中的一些宏的tips

    Postgresql作为C语言开发的代码,其中大量的运用了一些宏的操作. 因此理解这些宏很重要,然而有时候这些宏总让人很费解. 作为一个经常翻翻postgresql源码的小白,在这里做一个记录吧,方便 ...

  3. python_web----------数据可视化从0到1的过程

    一.数据可视化项目配置 1. django + Echarts 2. 服务器(linux:Ubuntu 17.04 (GNU/Linux 4.10.0-40-generic x86_64)) 3. I ...

  4. 配置nginx支持path_info模式

    简介:我们用thinkphp,CodeIgniter框架的时候,地址基本都是IP/index.php/group_controller?***的模式,通过index.php入口访问php文件 这种模式 ...

  5. 浅谈Unix I/O模型

    关于I/O模型的文章比较多,参考多篇后理解上仍然不太满意,终需自己整理一次,也是编写高吞吐量高性能网络接口模块的基础.这里所说的主要针对网络I/O,近几年面对越来越大的用户请求量,如何优化这些步骤直接 ...

  6. 通过 JS 判断页面是否有滚动条的简单方法

    前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁.最终通过参考不同方法,写了一个比较简单的方法.在判断滚动条的同时也需要计算滚动条的 ...

  7. web基础笔记整理(一)

    一.程序的分层 1.界面层: 某种类型的应用程序 a.DOS(控制台运行) b.桌面应用程序--独立安装,独立运行 c.web类型--现在流行的 单机版:电脑上要安装,程序升级之后,电脑上也要升级-- ...

  8. php trim源码分析

    本文同时发表于https://github.com/zhangyachen/zhangyachen.github.io/issues/9 核心代码如下: /* {{{ php_trim() * mod ...

  9. xamarin android 在代码中如何设置文本颜色

    xamarin android 在代码中如何设置文本颜色 TextView v = FindViewById<TextView>(Android.Resource.Id.Message); ...

  10. 【读书笔记】《Effective Java》——目录

    第二章——创建和销毁对象 第1条:考虑用静态工厂方法替代构造器 第2条:遇到多个构造器参数时要考虑用构建器 第3条:用私有构造器或者枚举类型强化Singleton属性 第4条:通过私有构造器强化不可实 ...