基于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" 属性即可
随机推荐
- Spring Boot 笔记之 MVC 分层结构
视图层view:用于展示数据,与用户进行交互. 控制层controller:用于分发控制到来的请求,并将请求分发给相应的业务层.以及将数据返回给视图层展示. 业务层service:业务处理,调用数据访 ...
- fedora23 桌面工具栏fedy, 桌面美化 allow: 2'lau不是2'l2u
## Sudoers allows particular users to run various commands as ## the root user, without needing the ...
- Intellij IDEA 安装配置Gradle
1.安装 到官网链接下载最新的bin版本,解压到 D:\Program Files (x86)\JetBrains\IDEA Configuration And Cache\gradle 配置环境变量 ...
- 最大公约数gcd与最小公倍数lcm
最大公约数:gcd 最大公倍数:lcm gcd和lcm的性质:(我觉得主要是第三点性质) 若gcd (
- 安装ubuntu的坑&RHEL7配置
1.需要其他设置->分区,分区需要有/根目录分区和swap空间,后者文件系统类型选择swap,其他都是ext4 2.普通配置电脑,安装16.04.5 LTS,不要安装最新的,安装重启后卡在那里, ...
- MetInfo V5.1 GetShell一键化工具
# 漏洞解析: config/config.inc.php $langoks = $db->get_one("SELECT * FROM $met_lang WHERE lang='$ ...
- 网络_TCP连接的建立与释放
三报文握手 1.概述 TCP是面向连接的协议.TCP建立连接的过程叫做握手,握手需要在客户和服务器之间交换三个TCP报文段,即我们说的"三次握手"(严格讲是一次握手过程中交换了三个 ...
- 题解——洛谷P1250 种树（差分约束）
一道看一眼就知道差分约束的题目 但是最短路spfa的时候注意松弛条件是 if(dis[u]+w[i]<dis[v[i]]) dis[v[i]]=dis[u]+w[i]; 不能写成 if(dis[ ...
- Vue属性中带’-‘的处理方式
我们在写属性时经常会加入’-‘来进行分词,比如:<panda from-here=”China”></panda>,那这时我们在props里如果写成props:[‘form-h ...
- 浅谈IIS 和 asp.net的应用之间的关系
IIS可以理解为一个web服务器. 用于提供web相关的各种服务. IIS6.0中添加了一个新的功能, application pool. application pool的作用是将运行在同一个ser ...