基于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" 属性即可
随机推荐
- 【Python023/024--递归】
一.递归--汉诺塔 1.有三个轴(x,y,z),64个盘子,把所有盘子从X轴移动到Z轴,要求移动到Z轴的盘子从上到下排序 思路: 问题一:将X上的63个盘子借助Z移动到Y上,拆解为: a.将前62个盘 ...
- topcoder srm 662 div1
problem1 link 首先枚举差值$d$,判断是否存在一个序列任意连续两个之间的差值小于$d$. 首先将数字排序,然后从小到大依次放置每一个数字.每个当前的数字有两个位置可以放,当前序列的前面或 ...
- tomcat部署maven web项目
tomcat上部署maven web项目的三种方法 1.将maven项目打成war包,然后放到tomcat容器中发布: 2.在IDE工具中部署tomcat,然后使用远程部署方式部署本地maven项目: ...
- ODAC（V9.5.15) 学习笔记（四）TCustomDADataSet（1）
1.SQL相关 名称 类型 说明 BaseSQL String 没有被AddWhere.SetOrderBy.FilterSQL等方法处理过的原始SQL语句 FinalSQL String 被AddW ...
- iis默认文档有什么用?
设置默认文档就是指在只输入路径,不输入具体网页名的时候,浏览器显示的默认网页名称. 比如说,服务器地址:http://123.xxx.com,在未设置默认文档的时候或指定的默认文档不存在时,要正常访问 ...
- C# 里调用vb的inputbox弹出窗
https://blog.csdn.net/hutao1101175783/article/details/16800871 先对项目添加对Microsoft.VisualBasic的引用 Inter ...
- 题解——Codeforces Round #508 (Div. 2) T3 （贪心）
贪心的选取最优解 然后相减好 记得要开long long #include <cstdio> #include <algorithm> #include <cstring ...
- 《计算机网络》-CCNA命令大全
Router> //用户模式,只能简单的show及ping/tracer Router>enable //从用户模式进入特权模式 Router# //特权模式,能够进行所有的show及pi ...
- NLog——ElasticSearch——Kibana
Nlog.elasticsearch.Kibana以及logstash在项目中的应用(一) Nlog.elasticsearch.Kibana以及logstash在项目中的应用(二) ASP.NET ...
- js运算符的一些特殊应用
作者: 小文 来源: http://www.cnblogs.com/daysme/ 时间: 2017/3/2 17:21:03 本文集合了了js运算符的一些特殊应用. js位运行符的运用. js运算符 ...