基于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" 属性即可
随机推荐
- Linux内核中的netlink是什么?
答: 是一种内核与用户应用间的双向数据传输方式,用户态使用传统的socketAPI即可使用netlink提供的功能,但是内核态需要使用专门的api来使用netlink.
- luogu P5105 不强制在线的动态快速排序
前言 考试的时候居然想错了区间贡献,mdzz 思路 题目看着很方啊,难道要树套树? 但数据范围提醒我们,是nlogn的复杂度 Sort(S)的定义是不是很鬼畜 但我们不动脑子的打表容易发现 连续区间[ ...
- UVA 818 Cutting Chains（状压 + 暴搜）题解
题意:有1~n个小环,他们中的有些互相扣在一起,问你至少切开几个能把这写小环串成一条链 思路:还是太菜了,题目给的n<=15,显然可以暴力解决. 用二进制表示每个环切还是不切,然后搜索所有情况. ...
- 【做题】arc068_f-Solitaire——糊结论
把所有数字放入双端队列后,结果大概是这样一个排列: \[P_1 1 P_2\] 其中\(P_1\)是递减序列,\(P_2\)是递增序列. 我们以\(1\)所在的位置\(k\)分割最终的排列\(A\). ...
- 题解——UVA11997 K Smallest Sums
题面 背景 输入 输出 翻译(渣自翻) 给定K个包含K个数字的表,要求将其能产生的\( k^{k} \)个值中最小的K个输出出来 题解 k路归并问题的经典问题 可以转化为二路归并问题求解 考虑A[], ...
- Docker与.Net项目类型
使用Docker的项目,要求:基础类库与平台无关=>.netCore项目..netStandard项目 公共项目:.netCore项目 入口项目:.netStandard项目 例如:webapi ...
- 51nod 1615 跳跃的杰克
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1615 题意: 思路:一开始是觉得一旦超过了终点,中间某个地方往相反地方跳 ...
- windows下远程连接Mysql
使用“Ctrl + R”组合键快速打开cmd窗口,并输入“cmd”命令,打开cmd窗口. 使用“mysql -uroot -proot”命令可以连接到本地的mysql服务. 使用“use mysql” ...
- Android RealativeLayout 布局gravity不能居中的解决办法
对于LinerLayout中的gravity发现复制到realativeLayout布局中发现不起作用,后来发现只要在他的每个子组件中使用 android:layout_centerVertical ...
- SqlParameter 多个参数动态拼接解决参数化问题
多个参数化是固定比较easy,多个动态的就有点...工作中遇到的问题整理下来分享 ,上代码 SqlParameter[] param = new SqlParameter[] { }; List< ...