话不多说直接上代码：

<!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开发框架中工作流模块的表设计分析

    在较早博客随笔里面写过文章<Winform开发框架之简易工作流设计>之后,很久没有对工作流部分进行详细的介绍了,本篇继续这个主题,详细介绍其中的设计.实现及效果给大家,这个工作流在好几年前 ...

  2. 【CSS3】布局

    浮动布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  3. 队列queue(1) 结构体实现队列

    前言 首先,我们先来做一道解密题:一串数列 7  6  8  6  6  7  0  4  1  ,规定一个回收站,把第一个数删除,添加到回收站里,然后把第二个数排到队伍最末尾,把第三个删除,添加到回 ...

  4. Python 集体智慧编程PDF

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

  5. webpack 3.X学习之多页面打包

    简介 我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢? 单页面打包 我们知道要打包 ...

  6. Core Erlang：Erlang的Core中间表示

    随着erlang的不断发展,它的语法越来越复杂,不便于诸如分析器,调试器此类程序在源码层次直接进行解析,而CORE Erlang旨在为Erlang提供一个人类可读可改的中间表示(Intermediat ...

  7. Mybatis篇总结

    本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 JDBC写法 //sql: String sql = "s ...

  8. 'boost/iterator/iterator_adaptor.hpp' file not found之xcode生成时报错的解决方案

    xcode生成rn(0.49.3)项目的时候出现“'boost/iterator/iterator_adaptor.hpp' file not found之xcode”报错. 原因: /Users/x ...

  9. 细谈最近上线的Vue2.0项目（一）

    8月初离职,来到现在的新东家负责一个新的项目.而我最近开发的两个webapp一直都是以Vue为主,这也是这篇文章的由来. 正文前的胡侃&一点点吐槽 在经历了两个公司不同的项目后,发现都存在一个 ...

  10. .NET使用存储过程实现对数据库的增删改查

    一.整体思路 先建立存储过程,再通过.net 调用存储过程,来实现对表的增删改查. 二.新建数据库及存储过程 打开SqlServer2008,新建数据库orm1,及表Student. 数据库和表建立好 ...