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

最终效果图：

 

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