移动端mobiscroll时间插件的调用
话不多说直接上代码：
<!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时间插件的调用的更多相关文章
- 基于zepto的移动端轻量级日期插件
前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
- selenium 难定位元素，时间插件，下拉框定位，string
1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...
- layui 时间插件laydate ,取消回调
背景:转型新公司不再是做前端展示H5之类的东西,主要业务是后台数据读取和插件搭建前端页面,接触的第一个老项目是layui制作的,由于业务需求,需要用到时间插件以下为时间插件的一些用法--------- ...
- selenium 难定位元素，时间插件，下拉框定位，string包含，定位列表中的一个，技巧
关于frame: 如果网页存在iframe的话,传统的定位有时候找不到元素,需要切换frame: # 切换到leftFrame定位“测井设计” driver.switch_to_frame(" ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- bootstrap时间插件 火狐不显示 完美解决方法
原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
随机推荐
- Vue深度学习（2）
Text 可以在表单的input 元素上使用v-model 指令来创建双向数据绑定.它会根据input元素的类型自动选取正确的绑定模式. <div id="app"> ...
- 原生JS与jQuery操作DOM对比
一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p&g ...
- Sagit.Framework For IOS 开发框架入门教程4：注册页布局-被消灭的变量
前言: 上篇写完:Sagit.Framework For IOS 开发框架入门教程3:Start引导页-框架布局和隐藏事件的内幕 之后,好久没写文章了,有IT连创业系列.有DotNetCore的一篇文 ...
- linhaifeng
http://www.cnblogs.com/linhaifeng/p/7278389.html http://blog.51cto.com/egon09
- 解题思路：best time to buy and sell stock i && ii && iii
这三道题都是同一个背景下的变形:给定一个数组,数组里的值表示当日的股票价格,问你如何通过爱情买卖来发家致富? best time to buy and sell stock i: 最多允许买卖一次 b ...
- ES6 Proxy和Reflect（下）
construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...
- Windows 刷新DNS缓存
释放IP配置信息 ipconfig /release 刷新DNS ipconfig /flushdns 更新网卡适配器 ipconfig /renew
- js随机数生成，生成m-n的随机数
使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备,Math.random()函数返回0和1之间的伪随机数 var random = Math.random(); console. ...
- 【http转https】其之一：腾讯云 DV SSL证书申请实验
文:铁乐猫 2016年1月 前言 大概2017年12月28日左右公司提出以后需要将公司网站由http提升到https级别,以便谷歌和火狐浏览器将之认定为安全网站. 主要是出于客户.用户那边用火狐或谷歌 ...
- SQL Server CPU
解决数据库系统的性能问题可能是一项艰巨的任务.了解如何找到问题很重要,但是了解系统对特定请求作出特定反应的原因更加重要.影响数据库服务器上的 CPU 利用率 的因素有很多:SQL 语句的编译和重新编译 ...