移动端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 ...
随机推荐
- JSR系列开篇
JSR是Java Specification Requests的缩写,意思是Java 规范提案.是指向JCP(Java Community Process)提出新增一个标准化技术规范的正式请求.任何人 ...
- Android系统拍照之后回显并且获取文件路径
/*调用拍照返回*/ case PHOTO_REQUEST_GALLERY: if (data != null) { Uri uri = data.getData(); String photopat ...
- 【java设计模式】【结构模式Structural Pattern】装饰模式Decorator Pattern
public class Client { public static void main(String[] args) { Component component=new ConcreteCompo ...
- 653. Two Sum IV - Input is a BST
Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...
- phpexcel用法（转）
.php导出excel(多种方法) (2013-03-23 15:44:02) 转载▼ 分类: php 基本上导出的文件分为两种: 1:类Excel格式,这个其实不是传统意义上的Excel文件,只 ...
- Unable to make the module: related gradle configuration was not found. Please, re-import the Gradle project and try again
到stack overflow找到的答案,老外还是专业 I also had a similar problem, Go to : View -> Tool Windows -> Grad ...
- JavaScript的DOM编程--09--节点的替换
节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,o ...
- Spring3.x企业开发应用实战读书笔记 —— 第三章IoC容器概述
声明: 本篇博客绝大多数内容为<Spring3.x企业开发应用实战>一书原内容,所有版权归原书作者所有!,仅供学习参考,勿作他用! 3.2 相关Java基础知识 Java语言允许通过 ...
- spring boot RESTFul API拦截 以及Filter和interceptor 、Aspect区别
今天学习一下RESTFul api拦截 大概有三种方式 一.通过Filter这个大家很熟悉了吧,这是java规范的一个过滤器,他会拦截请求.在springboot中一般有两种配置方式. 这种过滤器拦截 ...
- value toDF is not a member of org.apache.spark.rdd.RDD
idea显示toDF() 没有这个函数,显示错误: Error:(82, 8) value toDF is not a member of org.apache.spark.rdd.RDD[com.d ...