移动端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 ...
随机推荐
- canvas图形函数
function drawStar(cobj,x, y, radius1, radius2, num, drawType, color) {//参数:画笔,圆心X.圆心Y,半径1,半径2,形状边,实心 ...
- JAVA入门[9]-mybatis多表关联查询
概要 本节要实现的是多表关联查询的简单demo.场景是根据id查询某商品分类信息,并展示该分类下的商品列表. 一.Mysql测试数据 新建表Category(商品分类)和Product(商品),并插入 ...
- 【TEGer 在全球架构师峰会】 : 腾讯海外计费系统架构演进
欢迎大家前往云加社区,获取更多腾讯海量技术实践干货哦~ 作者简介:abllen,2008年加入腾讯,一直专注于腾讯计费平台建设,主导参与了腾讯充值中心.计费开放平台.统一计费米大师等项目,见证了米大师 ...
- 17089 最大m子段和
17089 最大m子段和 时间限制:1000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC;VC Description "最大m子段和 ...
- 引号在jsp页面中正确显示的处理
写在前面: 在前面的博客中已经有了对一些特殊字符的处理,但是万万没有想到,出来了一个含有引号的字符串,比如这样的ab"c"d的一个字符串.如果在超链接传值的时候,会与前面的引号成对 ...
- Linux下添加源的几种方法
sudo add-apt-repository xxxxxxx sudo gedit /etc/apt/sources.list然后把源粘贴进去,保存,最后shell输入sudo apt-get u ...
- BZOJ 4816 数字表格
首先是惯例的吐槽.SDOI题目名称是一个循环,题目内容也是一个循环,基本上过几年就把之前的题目换成另一个名字出出来,喜大普奔亦可赛艇.学长说考SDOI可以考出联赛分数,%%%. 下面放解题报告.并不喜 ...
- bzoj 4515: [Sdoi2016]游戏
Description Alice 和 Bob 在玩一个游戏. 游戏在一棵有 n 个点的树上进行.最初,每个点上都只有一个数字,那个数字是 123456789123456789. 有时,Alice 会 ...
- 解析JSON的两种方法eval()和JSON.parse()
解析JSON 一种方法是使用eval函数. var dataObj = eval("("+json+")"); 必须把文本包围在括号中,这样才能避免语法错误,迫 ...
- ubuntu14 搭建单机版hadoop2.6
1. 如果你的集群尚未安装所需软件,你得首先安装它们. 以Ubuntu Linux为例: $ sudo apt-get install ssh $ sudo apt-get install rsync ...