基于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() { 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> /*根据需求决定模态框个数*/

最终效果图：

注意：未经本人同意，不得私自转载！！！