基于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'>&nbsp</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'>&nbsp</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'>&nbsp</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

转载于:https://www.cnblogs.com/zhichong/p/9642039.html

基于bootstrap模态框的日期选择器相关推荐

Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...
页面遮罩层,并且阻止页面body滚动.bootstrap模态框原理,.bootstrap模态实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为 ...
bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...

基于bootstrap模态框的日期选择器

基于bootstrap模态框的日期选择器相关推荐

最新文章

热门文章