基于bootstrap模态框的日期选择器
近来由于工作需求，以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器，能够满足多样的需求，目前处于第一个版本，后续可能会继续更新。废话不多说，直接进入制作过程。
首先，需要引入一些js文件,bootstrap.css和是模态框使用需要，bootstrap.min.js，而controll_selectdate.js是实现选择器所有功能的代码。
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/controll_selectdate.js" type="text/javascript"></script>
下面是对模态框内的一些样式定义，这里的样式会影响到原有样式，请注意放置位置
.modal-footer .btn+.btn {
min-width: 30%;
margin-left: 0
}
.modal-footer .btn {
min-width: 30%;
margin-left: 0
}
.modal-date {
width: 15%;
display: inline-block;
text-align: center
}
.modal-year {
width: 49%;
display: inline-block;
text-align: center
}
.modal-month {
width: 23%;
display: inline-block;
text-align: center
}
.modal-dialog {
margin-top: 30%;
}
ul {
display: inline-block;
margin: 0 auto;
width: 49%;
height: 126px;
overflow: hidden;
overflow-y: scroll;
overflow-x: hidden;
}
.list-group-item {
height: 42px;
border: none;
background-color: rgba(0, 0, 0, 0);
}
.selected {
font-size: 20px;
font-weight: 10px;
}
.modal {
width: 100%;
z-index:999999999
}
.year {
}
.month {
}
.date {
}
下面则是controll_selectdate.js的内容
$(document).ready(
/*渲染年月日选择列表*/
function() {
var time = new Date();
/*渲染年*/
for (var i = time.getFullYear() - 16; i <= time
.getFullYear() + 16; i++) {
if (i === time.getFullYear() - 16
|| i === time.getFullYear() + 16) {
$(".year").append(
"<li class='list-group-item'> </li>");
} else {
if (i === time.getFullYear() - 15) {
$(".year").append(
"<li class='list-group-item selected'>"
+ i + "</li>");
} else {
$(".year").append(
"<li class='list-group-item'>" + i
+ "</li>");
}
}
} /*渲染月*/
for (var i = 0; i <= 13; i++) {
if (i === 0 || i === 13) {
$(".month").append(
"<li class='list-group-item'> </li>");
} else {
if (i === 1) {
$(".month").append(
"<li class='list-group-item selected'>"
+ i + "</li>");
} else {
$(".month").append(
"<li class='list-group-item'>" + i
+ "</li>");
}
}
} /*渲染日*/
for (var i = 0; i <= 32; i++) {
if (i === 0 || i === 32) {
$(".date").append(
"<li class='list-group-item'> </li>");
} else {
if (i === 1) {
$(".date").append(
"<li class='list-group-item selected'>"
+ i + "</li>");
} else {
$(".date").append(
"<li class='list-group-item'>" + i
+ "</li>");
}
}
}
}) /*添加选择滑动*/
function scrollEvent() {
var sctop = $(this).scrollTop();
var number = Math.round((sctop + 41) / 41);
$(this).children('li').removeClass('selected');
var inde = number;
$(this).children("li:eq(" + inde + ")").addClass('selected');
}
$('#startyear').scroll(scrollEvent);
$('#endyear').scroll(scrollEvent);
$('#startyear1').scroll(scrollEvent);
$('#startmonth').scroll(scrollEvent);
$('#endyear1').scroll(scrollEvent);
$('#endmonth').scroll(scrollEvent);
$('#startyear2').scroll(scrollEvent);
$('#startmonth1').scroll(scrollEvent);
$('#startdate').scroll(scrollEvent);
$('#endyear2').scroll(scrollEvent);
$('#endmonth1').scroll(scrollEvent);
$('#enddate').scroll(scrollEvent); /*弹框出现时年份默认选择*/
$(function() {
$('#yearModal').on('shown.bs.modal', defaultyear)
})
/*弹框消失时取消年份默认选择*/
$('#enterbtn1').click(function() {
$(function() {
$('#yearModal').off('shown.bs.modal', defaultyear)
})
}) /*手动选择默认年份*/
$('#thisyear').click(defaultyear) /*默认年份实现*/
function defaultyear() {
var num = (current.getFullYear() - (current.getFullYear() - 15)) * 41
var num1 = num - (41 * 7)
$('#startyear').scrollTop(num1)
$('#endyear').scrollTop(num)
} /*弹框出现时年月份默认选择*/
$(function() {
$('#monthModal').on('shown.bs.modal', defaultmonth)
}); /*弹框消失时年月份取消默认*/
$('#enterbtn2').click(function() {
$(function() {
$('#monthModal').off('shown.bs.modal', defaultmonth)
})
}) /*手动选择年月份默认*/
$('#thismonth').click(defaultmonth) /*默认年月份实现*/
function defaultmonth() {
var num = current.getMonth() * 41
var num1 = (current.getFullYear() - (current.getFullYear() - 15)) * 41
var num2 =(current.getMonth() -current.getMonth())* 41
var num4 = (current.getFullYear() - (current.getFullYear() - 15)) * 41
if ((current.getMonth() - 3) <= 0) {
num4 = num1 - 41
}
if (current.getMonth() - 3 == -1) {
num2 = 41 * 11
}
if (current.getMonth() - 3 == -2) {
num2 = 41 * 10
}
if (current.getMonth() - 3 == -3) {
num2 = 41 * 9
}
$('#startyear1').scrollTop(num4)
$('#endyear1').scrollTop(num1)
$('#startmonth').scrollTop(num2)
$('#endmonth').scrollTop(num)
} /*弹框出现时日期默认选择*/
$(function() {
$('#dateModal').on('shown.bs.modal', defaultdate)
}); /*弹框消失时取消日期默认选择*/
$('#enterbtn3').click(function() {
$(function() {
$('#dateModal').off('shown.bs.modal', defaultdate)
})
}) /*手动选择默认日期*/
$('#thisdate').click(defaultdate) /*默认日期实现*/
function defaultdate() {
var num = current.getDate() * 41 - 41
var num1 = current.getMonth() * 41
var num2 = num5 = (current.getFullYear() - (current.getFullYear() - 15)) * 41
var num3 = (current.getDate() - 7)*41
var num4 = current.getMonth() * 41
if (num3 <= 0) {
if (current.getMonth() - 1 == -1) {
num4 = 11 * 41
num5 -= 41
} else {
num4 = (current.getMonth() - 1) * 41
}
}
if (num3 == 0) {
if (current.getMonth() - 1 == 1) {
num3 = 27 * 41;
} else if (current.getMonth() - 1 == 3 || current.getMonth() - 1 == 5
|| current.getMonth() - 1 == 8 || current.getMonth() - 1 == 10) {
num3 = 29 * 41
} else {
num3 = 30 * 41;
}
}
if (num3 == -1) {
if (current.getMonth() - 1 == 1) {
num3 = 26 * 41;
} else if (current.getMonth() - 1 == 3 || current.getMonth() - 1 == 5
|| current.getMonth() - 1 == 8 || current.getMonth() - 1 == 10) {
num3 = 28 * 41
} else {
num3 = 29 * 41;
}
}
if (num3 == -2) {
if (current.getMonth() - 1 == 1) {
num3 = 25 * 41;
} else if (current.getMonth() - 1 == 3 || current.getMonth() - 1 == 5
|| current.getMonth() - 1 == 8 || current.getMonth() - 1 == 10) {
num3 = 27 * 41
} else {
num3 = 28 * 41;
}
}
if (num3 == -3) {
if (current.getMonth() - 1 == 1) {
num3 = 24 * 41;
} else if (current.getMonth() - 1 == 3 || current.getMonth() - 1 == 5
|| current.getMonth() - 1 == 8 || current.getMonth() - 1 == 10) {
num3 = 26 * 41
} else {
num3 = 27 * 41;
}
}
if (num3 == -4) {
if (current.getMonth() - 1 == 1) {
num3 = 23 * 41;
} else if (current.getMonth() - 1 == 3 || current.getMonth() - 1 == 5
|| current.getMonth() - 1 == 8 || current.getMonth() - 1 == 10) {
num3 = 25 * 41
} else {
num3 = 26 * 41;
}
}
if (num3 == -5) {
if (current.getMonth() - 1 == 1) {
num3 = 22 * 41;
} else if (current.getMonth() - 1 == 3 || current.getMonth() - 1 == 5
|| current.getMonth() - 1 == 8 || current.getMonth() - 1 == 10) {
num3 = 24 * 41
} else {
num3 = 25 * 41;
}
}
if (num3 == -6) {
if (current.getMonth() - 1 == 1) {
num3 = 21 * 41;
} else if (current.getMonth() - 1 == 3 || current.getMonth() - 1 == 5
|| current.getMonth() - 1 == 8 || current.getMonth() - 1 == 10) {
num3 = 23 * 41
} else {
num3 = 24 * 41;
}
} /*默认选择添加滑动*/
$('#startyear2').scrollTop(num5)
$('#endyear2').scrollTop(num2)
$('#startmonth1').scrollTop(num4)
$('#endmonth1').scrollTop(num1)
$('#startdate').scrollTop(num3)
$('#enddate').scrollTop(num)
} /*选择日期赋值字符串*/
var current = new Date()
var yearString1
var yearString2
var yearString3
var yearString4
var yearString5
var yearString6
var monthString1
var monthString2
var monthString3
var monthString4
var dateString1
var dateString2
var parentelement /*获取确定按钮父元素*/
function getElement(inputId) {
parentelement = document.getElementById(inputId).parentElement;
} //选择年确认事件
/*选择年份*/
$('#enterbtn1').click(function getValue() {
yearString1 = $('#startyear').children('.selected').text()
yearString2 = $('#endyear').children('.selected').text()
var hiddenval = $('#' + parentelement.id).find('.noshowing')
$(hiddenval[0]).val(yearString1)
$(hiddenval[1]).val(yearString2)
if (yearString1 > yearString2) {
alert("开始时间比结束时间晚，请重新选择!")
} else {
var string = yearString1 + "年-" + yearString2 + "年"
$('#' + parentelement.id).find('.selectedate').text(string);
swichBlock(yearString1 , yearString2 , 2);
}
}); /*选择年月份*/
$('#enterbtn2').click(
function getValue() {
yearString3 = parseInt( $('#startyear1').children('.selected').text())
monthString1 =parseInt( $('#startmonth').children('.selected').text())
yearString4 = parseInt( $('#endyear1').children('.selected').text())
monthString2 =parseInt( $('#endmonth').children('.selected').text())
var hiddenval = $('#' + parentelement.id).find('.noshowing')
$(hiddenval[0]).val(yearString3)
$(hiddenval[1]).val(yearString4)
$(hiddenval[2]).val(monthString1)
$(hiddenval[3]).val(monthString2)
if (yearString3 > yearString4) {
alert("开始时间比结束时间晚，请重新选择!")
}else if(yearString3===yearString4 && monthString1>monthString2){
alert("开始时间比结束时间晚，请重新选择!")
}else{
var string = yearString3 + "年" + monthString1 + "月-"
+ yearString4 + "年" + monthString2 + "月"
$('#' + parentelement.id).find('.selectedate').text(string);
var startDate = yearString3 + '-' + monthString1 + '-01';
var endDate = yearString4 + '-' + monthString2 + '-31';
swichBlock(startDate , endDate , 1);
} }); /*选择年月日*/
$('#enterbtn3').click(
function getValue() {
yearString5 =parseInt($('#startyear2').children('.selected').text())
monthString3 = parseInt($('#startmonth1').children('.selected').text())
dateString1 = parseInt($('#startdate').children('.selected').text())
yearString6 = parseInt($('#endyear2').children('.selected').text())
monthString4 = parseInt($('#endmonth1').children('.selected').text())
dateString2 = parseInt($('#enddate').children('.selected').text())
if (yearString5 > yearString6 ) {
alert("开始时间比结束时间晚，请重新选择!")
}else if(yearString5===yearString6 && monthString3>monthString4){
alert("开始时间比结束时间晚，请重新选择!")
}else if(yearString5===yearString6 && monthString1==monthString2 && dateString1>dateString2){
alert("开始时间比结束时间晚，请重新选择!")
} else {
var string = yearString5 + "年" + monthString3 + "月"
+ dateString1 + "日-" + yearString6 + "年" + monthString4
+ "月" + dateString2 + "日"
$('#' + parentelement.id).find('.selectedate').text(string);
var startDate = yearString5 + '-' + monthString3 + '-' + dateString1;
var endDate = yearString6 + '-' + monthString4 + '-' + dateString2;
swichBlock(startDate , endDate , 0);
}
}); /*未选择年份时回复到滑动前的状态*/
$('#cancelbtn1').click(function() {
var num1 = (yearString1 - (current.getFullYear() - 15)) * 41
var num2 = (yearString2 - (current.getFullYear() - 15)) * 41
$('#startyear').scrollTop(num1)
$('#endyear').scrollTop(num2)
}) /*未选择年月份时回复到滑动前的状态*/
$('#cancelbtn2').click(function() {
var num1 = (yearString3 - (current.getFullYear() - 15)) * 41
var num2 = (yearString4 - (current.getFullYear() - 15)) * 41
var num3 = (monthString1 - 1) * 41
var num4 = (monthString2 - 1) * 41
$('#startyear1').scrollTop(num1)
$('#endyear1').scrollTop(num2)
$('#startmonth').scrollTop(num3)
$('#endmonth').scrollTop(num4)
}) /*未选择年月日时回复到滑动前的状态*/
$('#cancelbtn3').click(function() {
var num1 = (yearString5 - (current.getFullYear() - 15)) * 41
var num2 = (yearString6 - (current.getFullYear() - 15)) * 41
var num3 = (monthString3 - 1) * 41
var num4 = (monthString4 - 1) * 41
var num5 = (dateString1 - 1) * 41
var num6 = (dateString2 - 1) * 41
$('#startyear2').scrollTop(num1)
$('#endyear2').scrollTop(num2)
$('#startmonth1').scrollTop(num3)
$('#endmonth1').scrollTop(num4)
$('#startdate').scrollTop(num5)
$('#enddate').scrollTop(num6)
}) /*默认当前选择时间*/
$(document).ready(
function() {
var initdate = new Date()
var inityear = initdate.getFullYear();
var initmonth = initdate.getMonth();
var initday = initdate.getDate();
$('#headBlock .selectedate').text(
(inityear - 7) + "年-" + inityear + "年")
})
下面是页面上需要放置的代码
<div class="modal fade" id="yearModal" tabindex="-1" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content"
style="background-color: white; border-radius: 10px; overfiow: hidden; text-align: center;">
<p style="padding-top: 5px">请选择年份</p>
<div class="modal-year">
<p>年</p>
</div>
<div class="modal-year">
<p>年</p>
</div>
<div
style="width: 100%; height: 126px; border-top: 1px solid #e7e4f0"
id="scroll1">
<div
style="overflow: hidden; background-color: #dddddd; width: 100%; height: 42px; position: absolute; margin-top: 42px"></div>
<div
style="overflow: hidden; background-color: #e7e4f0; width: 1px; height: 126px; position: absolute; left: 50%"></div>
<ul class="list-group year" id="startyear">
</ul>
<ul class="list-group year" id="endyear">
</ul>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal"
class="btn btn-outline-secondary patternbtn" id="cancelbtn1">取消
</button>
<button type="button" class="btn btn-outline-secondary patternbtn"
id="thisyear">默认</button>
<button type="button" data-dismiss="modal"
class="btn btn-primary patternbtn" id="enterbtn1">确定</button>
</div>
</div>
</div>
</div>
/*根据需求决定模态框个数*/
最终效果图：
注意：未经本人同意，不得私自转载！！！
基于bootstrap模态框的日期选择器的更多相关文章
- 基于bootstrap模态框的alert弹窗
完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...
- 基于bootstrap模态框的二次封装
一.参数设置 $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:true, //显示关 ...
- 基于bootstrap模态框、fakeLoader实现全局遮罩层
一.fakeLoader.js介绍 fakeLoader.js 是轻量级的 jQuery 插件,帮助你创建动态的全屏加载掩饰微调效果,模拟页面预加载的效果. 插件下载地址:https://github ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- bootstrap模态框input不能获取焦点并编辑【转】
Bootstrap模态框时input标签[日期控件也有这样的问题]不能编辑的问题,下面是我的解决方法: 1.将下图中框出来的属性删掉即可: 2.兼容火狐浏览器,笔者在火狐中还是不能编辑,去掉下图属性即 ...
- 第二百四十三节，Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...
- js控制Bootstrap 模态框（Modal）插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- Bootstrap模态框按钮
1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...
- 解决bootstrap模态框内输入框无法获取焦点
bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可
随机推荐
- ODAC（V9.5.15) 学习笔记（十一）TOraEncryptor、TOraPackage和TOraAlerter
TOraEncryptor 名称 类型 说明 DataHeader TCREncDataHeader 一些附加信息放入加密数据中,包括: ehNone 无附加信息 ehTag GUID和随机生成的 ...
- javaScript随机数取值方法
Math.random()方法返回0到1之间的一个随机数,不包括0和1 如若想取的一个范围的随机数可套用下面的公式: 一.X+开始数-1=结束数 二.Math.floor(Math.random()* ...
- ubuntu18.04智能拼音候选字体调节方法
原文链接:https://jingyan.baidu.com/article/1974b2895a737ef4b1f774f1.html 1.原来ibus框架的拼音输入法,候选字的大小,可以在终端命令 ...
- POJ1741 Tree（树分治——点分治）题解
题意:给一棵树,问你最多能找到几个组合(u,v),使得两点距离不超过k. 思路:点分治,复杂度O(nlogn*logn).看了半天还是有点模糊. 显然,所有满足要求的组合,连接这两个点,他们必然经过他 ...
- reshape2
require(reshape2)x = data.frame(subject = c("John", "Mary"), tim ...
- 【Hadoop 分布式部署 五：分布式部署之分发、基本测试及监控】
1.对 hadoop 进行格式化 到 /opt/app/hadoop-2.5.0 目录下 执行命令: bin/hdfs namenode -format 执行的效果图如下 ( 下图成功 ...
- ZooKeeper分布式过程协同技术详解1——ZooKeeper的概念和基础
简介 分布式系统和应用,不仅能提供更强的计算能力,还能为我们提供更好的容灾性和扩展性. ZooKeeper是Google的Chubby项目的开源实现,它曾经作为Hadoop的子项目,在大数据领域得到广 ...
- jquery及jquery常用选择器使用
本文为博主原创,未经允许不得转载: 1.jquery强大之处: 容易上手,强大的选择器,解决浏览器的兼容 完善的时间机制,出色的ajax封装,丰富的ui 2.jquery是一个javas ...
- awk详解2
7.控制语句 if(condition) {statments} 单分支语句 if(condition) {statments} else {statements}组合语句 while(condito ...
- .Net ASP.NET 打开指定文件夹
比如要打开指定的文件夹,而不是弹出对话框 System.Diagnostics.Process.Start(@"D:\"); 这样就打开了D盘,和正常打开D盘是一样的.