my97datepicker 选择框

#日期控件 my97日期控件 如何使年，月，时间选择框修改成滚动条

three说的对，你想实现我这种横拉滚动？

img


给你代码，需要调整自己修改参数即可：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日期</title>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
    <style>
        .scrollbar {
            width: 200px;
            height: 200px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="scrollbar">
        <input type="text" id="dateInput">
    </div>
    <script>
        function initDatePicker() {
            var dateInput = $('#dateInput');
            dateInput.datetimepicker({
                dateFormat: 'yy-mm-dd',
                timeFormat: 'HH:mm:ss',
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true
            });

            var scrollbar = $('.scrollbar');
            scrollbar.scroll(function() {
                dateInput.datetimepicker('hide');
            });
        }

        $(document).ready(function() {
            initDatePicker();
        });
    </script>
</body>
</html>

你的问题有歧义，你是希望手机上那种滚轮转盘式样的日期选择，还是希望在年月日上增加一对上下箭头，可以微调的那种。

修改样式就可以了

.WdateDiv select.WdateY,
.WdateDiv select.WdateM,
.WdateDiv select.WdateD,
.WdateDiv select.WdateH,
.WdateDiv select.WdateMI {
    appearance: none;
    -webkit-appearance: none;
    overflow: auto;
}

my97datepicker好像滚动条的功能，

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/183213
  • 你也可以参考下这篇文章：My97DatePicker 默认加载时间在时间选择框显示方法
  • 以下回答由chatgpt基于相关博客总结生成:

    要使用my97datepicker库创建日期选择框，可以按照以下步骤进行：

    1. 引入my97datepicker库的相关文件，可以从官网下载，并将文件放置在项目中。
    <!-- 引入CSS文件 -->
<link rel="stylesheet" type="text/css" href="my97datepicker/skin/WdatePicker.css">

<!-- 引入JS文件 -->
<script src="my97datepicker/WdatePicker.js"></script>
    1. 在HTML文件中，创建一个input元素作为日期选择框。
    <input id="datepicker" type="text" class="Wdate">
    1. 在JavaScript中，使用onFocus事件绑定日期选择器。
    document.getElementById("datepicker").addEventListener("focus", function() {
    WdatePicker();
});
    1. 如果需要特殊日期的高亮显示，可以使用specialDates属性。
    document.getElementById("datepicker").addEventListener("focus", function() {
    WdatePicker({specialDates: ['....-..-01', '....-..-15']});
});
    1. 如果只允许选择特定时间范围，可以使用minTime和maxTime属性。
    document.getElementById("datepicker").addEventListener("click", function() {
    WdatePicker({dateFmt: 'yyyy年M月d日 H时m分', minTime: '09:00:00', maxTime: '17:30:00'});
});
    1. 如果需要传入静态日期作为快速选择项，可以使用quickSel属性。
    document.getElementById("datepicker").addEventListener("click", function() {
    WdatePicker({dateFmt: 'yyyy年MM月dd日', qsEnabled: true, quickSel: ['2000-1-10', '2000-2-20']});
});

    以上是使用my97datepicker库创建日期选择框的基本步骤和常用属性。根据具体需求，可以调整和组合使用这些属性来实现特定的功能。如果需要更多详细信息和代码示例，可以参考my97datepicker官方文档。

#日期控件 my97日期控件 web端如何使年，月，时间选择框修改成滚动条式的选择框

img