基于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" 属性即可
随机推荐
- Ubuntu + CUDA9 + CUDNN7 + OpenCV3.4 + contrib +CAFFE-master
安装ubuntu时赞美Rufus(建议ubuntu16.04.04),过程参考 https://www.cnblogs.com/willnote/p/6725594.html 安 装 前 一 定 要 ...
- Spring 学习——Spring框架结构、概念
maven项目结构 记忆:在一个项目中,project下一层级时src,也就是源文件,所有需要进行编译的文件都是在这个目录下,其实也就是这一个目录,然后向下扩展.在src目录下,存在main文件夹,里 ...
- 02MySQL中的数据类型
一.数值 INT DECIMAL 准确的小数值 FLOAT DOUBLE 二.字符串类型 CHAR(m) 此数据类型用于表示固定长度的字符串,可以包含最多达255个字符,其中m代表字符串的长度.长度固 ...
- spring与mybatis四种整合方法
转载: 1.采用数据映射器(MapperFactoryBean)的方式,不用写mybatis映射文件,采用注解方式提供相应的sql语句和输入参数. (1)Spring配置文件: <!-- 引 ...
- es索引维护的常用帖子
Elasticsearch 新增字段
- 一个 xxx is not defined 引发的爬坑之路
出处 https://www.cnblogs.com/daysme/ - 2018-01-06 昨晚找了一个代码解决了我对配置的需求.高兴的拿到手机上测试却发现点击没有效果,电脑上是可以的呀,电脑上的 ...
- Perl CGI编程
http://www.runoob.com/perl/perl-cgi-programming.html 什么是CGI CGI 目前由NCSA维护,NCSA定义CGI如下: CGI(Common Ga ...
- VirtualBox安装Centos6.8出现——E_INVALIDARG (0x80070057)
VirtualBox使用已有的虚拟硬盘出错: 问题描述:UUID已经存在 Cannot register the hard disk 'E:\system_iso\centos6.8.vdi' {05 ...
- Ubuntu18.04的网络配置
网卡与DNS配置 1)打开命令窗口(右键单机桌面选择Open Terminal或者用快捷键Ctrl+Alt+T打开终端),输入ip a查看自己的网卡编号 2)输入命令sudo vim /etc/net ...
- 设计模式（四） Factory Pattern工厂模式
核心: 实例化对象,实现创建者和调用者的分离 简单工厂模式 工厂方法模式 抽象工厂模式 面对对象设计的基本原则: ocp(open closed principle) 开闭原则:一个软件的实体应当对拓 ...