基于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