移动端日期选择器

<!--时间选择组件-->
<div class="text-no-select" style="width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,.3);">
    <div style="width:100%;height:235px;background:#fff;position:absolute;bottom:0px;left:0px;">
        <div style="width:100%;height:35px;line-height:35px;text-align:center;border-bottom:1px solid #333;">
            <span style="float:left;cursor:pointer;padding:0 20px;">取消</span>
            <span>选择时间</span>
            <span style="float:right;cursor:pointer;padding:0 20px;">确定</span>
        </div>
        <div style="width:100%;height:200px;display:flex;overflow: hidden;">
            <div class="year-div" style="width:100%;height:auto;transform: translate3d(0,0,0);">

            </div>
            <div class="month-div" style="width:100%;height:auto;transform: translate3d(0,0,0);">

            </div>
            <div class="day-div" style="width:100%;height:auto;transform: translate3d(0,0,0);">

            </div>
        </div>
        <!--居中焦点线框-->
        <div style="width:100%;height:40px;position:absolute;bottom:80px;left:0px;pointer-events: none;border-top:1px solid #ccc;border-bottom:1px solid #ccc;"></div>
        <!--遮罩-->
        <div style="width:100%;height:200px;position:absolute;bottom:0px;left:0px;pointer-events: none;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
        background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
        background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);"></div>
    </div>
</div>

<!--日期选项模板-->
<script type="text/template" id="timeSelectTemplate">
    <div data-value="" style="width:100%;height:40px;line-height:40px;text-align:center;">
        <span>2022</span>
    </div>
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

    $(function () {

        // =====全局参数=====
        var year_value = 1995;
        var month_value = 1;
        var day_value = 1;
        var moveYearTotalY = 0;
        var moveMonthTotalY = 0;
        var moveDayTotalY = 0;
        var unit = 40;

        // 生成年份
        function createYear() {
            var timeSelectTemplate = $("#timeSelectTemplate").html().trim();
            var html_year = '';
            var start_year = 1970;
            var min_year = new Date().getFullYear();
            for (var i = min_year; i >= start_year; i--) {
                var dom = $(timeSelectTemplate);
                dom.html(i);
                dom.attr("data-value", i);
                html_year += dom.prop('outerHTML');
            }
            $(".year-div").html(html_year);

            //设置默认值
            var unit_count = year_value - min_year;
            moveYearTotalY = (unit_count + 2) * unit;
            $(".year-div").css({ "transform": "translate3d(0," + moveYearTotalY + "px,0)" });
        }
        createYear();

        // 生成月份
        function createMonth() {
            var timeSelectTemplate = $("#timeSelectTemplate").html().trim();
            var html_month = '';
            var start_month = 1;
            var max_month = 12;
            for (var i = start_month; i <= max_month; i++) {
                var dom = $(timeSelectTemplate);
                dom.html((i < 10 ? ('0' + i) : i));
                dom.attr("data-value", i);
                html_month += dom.prop('outerHTML');
            }
            $(".month-div").html(html_month);

            //设置默认值
            moveMonthTotalY = 2 * unit;
            $(".month-div").css({ "transform": "translate3d(0," + moveMonthTotalY + "px,0)" });
        }
        createMonth();

        // 生成天数
        function createDay() {
            var timeSelectTemplate = $("#timeSelectTemplate").html().trim();
            var html_day = '';
            var start_day = 1;
            var max_day = getMonthDay(year_value, month_value);
            for (var i = start_day; i <= max_day; i++) {
                var dom = $(timeSelectTemplate);
                dom.html((i < 10 ? ('0' + i) : i));
                dom.attr("data-value", i);
                html_day += dom.prop('outerHTML');
            }
            $(".day-div").html(html_day);

            //设置默认值
            moveDayTotalY = 2 * unit;
            $(".day-div").css({ "transform": "translate3d(0," + moveDayTotalY + "px,0)" });
        }
        createDay();

        function getMonthDay(year, month) {
            var days = new Date(year, month, 0).getDate()
            return days
        }

        // =====滑动事件=====
        // 滑动时间 - 年份
        function moveYear() {

            var name = '.year-div';
            var startY = 0;
            var valueY = 0;
            var div = document.querySelector(name);
            div.addEventListener('touchstart', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                startY = touches.clientY;
            });

            div.addEventListener('touchmove', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                valueY = touches.clientY - startY + moveYearTotalY;
                $(name).css({ "transform": "translate3d(0," + valueY + "px,0)" });
            });

            div.addEventListener('touchend', function () {
                if (valueY == 0) return;
                moveYearTotalY = valueY;
                var unit_count = Math.round(moveYearTotalY / unit);
                $(name).animate({}, 300, function () {
                    $(name).css({ "transform": "translate3d(0," + unit_count * unit + "px,0)" });
                });
            });
        }
        moveYear();

        // 滑动时间 - 月份
        function moveMonth() {

            var name = '.month-div';
            var startY = 0;
            var valueY = 0;
            var div = document.querySelector(name);
            div.addEventListener('touchstart', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                startY = touches.clientY;
            });

            div.addEventListener('touchmove', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                valueY = touches.clientY - startY + moveMonthTotalY;
                $(name).css({ "transform": "translate3d(0," + valueY + "px,0)" });
            });

            div.addEventListener('touchend', function (event) {
                if (valueY == 0) return;
                moveMonthTotalY = valueY;
                var unit_count = Math.round(moveMonthTotalY / unit);
                $(name).animate({}, 300, function () {
                    var _y = unit_count * unit;
                    if (_y > 80) _y = 80;
                    $(name).css({ "transform": "translate3d(0," + _y + "px,0)" });
                });
            });
        }
        moveMonth();

        // 滑动时间 - 天数
        function moveDay() {

            var name = '.day-div';
            var startY = 0;
            var valueY = 0;
            var div = document.querySelector(name);
            div.addEventListener('touchstart', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                startY = touches.clientY;
            });

            div.addEventListener('touchmove', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                valueY = touches.clientY - startY + moveDayTotalY;
                $(name).css({ "transform": "translate3d(0," + valueY + "px,0)" });
            });

            div.addEventListener('touchend', function (event) {
                if (valueY == 0) return;
                moveDayTotalY = valueY;
                var unit_count = Math.round(moveDayTotalY / unit);
                $(name).animate({}, 300, function () {
                    var _y = unit_count * unit;
                    if (_y > 80) _y = 80;
                    $(name).css({ "transform": "translate3d(0," + _y + "px,0)" });
                });
            });
        }
        moveDay();
    });
</script>

转自：https://developer.aliyun.com/article/1140269