AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

一个简易的选择小时（时分秒）的插件

2023-11-09 70
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一个简易的选择小时（时分秒）的插件

老规矩，先上图，效果如下所示：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>、

再引入timepicker插件

<!-- 时间插件 -->
<link rel="stylesheet" type="text/css" href="css/timePicker.css">
<script type="text/javascript" src="js/jquery-timepicker.js"/>"></script>

简洁的js代码

//时间选择
        $("#beginTime").hunterTimePicker();
        $("#endTime").hunterTimePicker();

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
        <!-- 小时 -->
        <link rel="stylesheet" type="text/css" href="css/timePicker.css">
    </head>
    <body>
        <div class="row">
        <div class="form-group">
            <label class="col-sm-1 control-label" for="" id="">开始时间</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="beginTime"></input>
                <font color="red" id="validateBeginTime"></font>
            </div>
        </div>
        </div>
        <div class="row">
        <div class="form-group">
            <label class="col-sm-1 control-label" for="" id="">结束时间</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="endTime" ></input>
                <font color="red" id="validateEndTime"></font>
            </div>
        </div>
         </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 时间插件 -->
    <script type="text/javascript" src="js/jquery-timepicker.js"/>"></script>
    <script>
        //时间选择
        $("#beginTime").hunterTimePicker();
        $("#endTime").hunterTimePicker();
    </script>
</html>

附上：

timePicker.css

.Hunter-time-picker{
    position: absolute;
    border: 2px solid #c9cbce;
    width: 390px;
    background: #ffffff;
    z-index: 999999;
    font-size: 0;
}
.Hunter-time-picker:before, .Hunter-time-picker:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    position: absolute;
    left: 20px;
    z-index: 999999;
}
.Hunter-time-picker:before{
    border-color: transparent transparent #ffffff;
    top: -17px;
    z-index: 9999999;
}
.Hunter-time-picker:after{
    border-color: transparent transparent #c9cbce;
    top: -20px;
}
.Hunter-time-picker *{
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    color: #666666;
    font-family: "Microsoft YaHei";
    font-size: 14px;
}
.Hunter-time-picker ul{
    list-style: none;
}
.Hunter-time-picker ul li{
    display: inline-block;
    position: relative;
    margin: 4px;
    cursor: pointer;
}
.Hunter-time-picker p{
    font-weight: bold;
    padding: 0 4px;
    margin-top: 4px;
    margin-bottom: 10px;
}
.Hunter-time-picker .line{
    width: 340px;
    margin: 0 auto;
    margin-top: 4px;
    border-bottom: 1px solid #d8d8d8;
}
/*选择小时*/
.Hunter-time-picker .Hunter-wrap{
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: 9px;
}
.Hunter-time-picker .Hunter-hour-name{
    display: inline-block;
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: relative;
    background-color: #f5f5f5;
}
.Hunter-time-picker .Hunter-hour-name:hover{
    color: #002DFF;
}
.Hunter-time-picker .Hunter-hour.active{
    z-index: 999999999;
}
.Hunter-time-picker .active .Hunter-hour-name{
    color: #ffffff;
    background-color: #3A7ADB;
}
.Hunter-time-picker .Hunter-minute-wrap{
    display: none;
    border: 1px solid #D8D8D8;
    background: #ffffff;
    position: absolute;
    top: 29px;
    width: 370px;
    padding: 10px 10px 5px 10px;
}
.Hunter-time-picker .Hunter-minute{
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #999999;
    background-color: #f5f5f5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.Hunter-time-picker .Hunter-minute:hover{
    color: #002DFF;
}
.Hunter-time-picker .Hunter-minute.active {
    color: #ffffff;
    background-color: #3A7ADB;
}
.Hunter-time-picker .Hunter-clean-btn{
    width: 108px;
    height: 30px;
    background-color: #3A7ADB!important;
    color: #ffffff;
    background-image: none !important;
    border: 5px solid #3A7ADB;
    border-radius: 0;
}
.Hunter-time-picker .Hunter-clean-btn:hover{
    background-color: #0B4B94 !important;
    border-color: #3A7ADB;
}

附上：

jquery-timepicker.js

/**
 *
 * @author  李凯飞
 *
 * 描述：选择时间组件，先选择小时再选择分钟，只支持00-23小时、00-05-10...50-55分钟。回调函数的e为源对象。
 *
 * 示例如下：
 *
 * $("#timePicker").hunterTimePicker();
 *
 * $('.time-picker').hunterTimePicker({
 *      callback: function(e){
 *          ....
 *      }
 * });
 *
 */
(function ($) {
    $.hunterTimePicker = function (box, options) {
        var dates = {
          hour: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
          minute: ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],
        };
        var box = $(box);
        var template = $('<div class="Hunter-time-picker" id="Hunter_time_picker"><div class="Hunter-wrap"><ul class="Hunter-wrap" id="Hunter_time_wrap"></ul></div></div>');
        var time_wrap = $('#Hunter_time_wrap', template);
        $(document).click(function() {
            template.remove();
        });
        box.click(function(event){
            event.preventDefault();
            event.stopPropagation();
            $('.Hunter-time-picker').remove();
            var _this = $(this);
            var offset = _this.offset();
            var top = offset.top + _this.outerHeight() + 15;
            template.css({
                'left': offset.left,
                'top': top
            });
            buildTimePicker();
            $('body').append(template);
            $('.Hunter-time-picker').click(function(event){
                event.preventDefault();
                event.stopPropagation();
            });
        });
        function buildTimePicker(){
            buildHourTpl();
            hourEvent();
            minuteEvent();
            cleanBtnEvent();
        };
        function buildHourTpl(){
            var hour_html = '<p>小时</p>';
            for(var i = 0; i < dates.hour.length; i++){
                var temp = box.val().split(":")[0];
                if(dates.hour[i]==temp){
                    hour_html += '<li class="Hunter-hour active" data-hour="' + dates.hour[i] +'"><ul class="Hunter-minute-wrap"></ul><div class="Hunter-hour-name">' + dates.hour[i] + '</div></li>';
                }else{
                    hour_html += '<li class="Hunter-hour" data-hour="' + dates.hour[i] +'"><ul class="Hunter-minute-wrap"></ul><div class="Hunter-hour-name">' + dates.hour[i] + '</div></li>';
                }
            }
            hour_html += '<li class="Hunter-clean"><input type="button" class="Hunter-clean-btn" id="Hunter_clean_btn" value="清 空"></li>'
            time_wrap.html(hour_html);
        };
        function buildMinuteTpl(cur_time){
            var poi = cur_time.position();
            var minute_html = '<p>分钟</p>';
            var temp = box.val().split(":")[1];
            for(var j = 0; j < dates.minute.length;j++){
                if(dates.minute[j]==temp){
                    minute_html += '<li class="Hunter-minute active" data-minute="' + dates.minute[j] + '">' + dates.minute[j] + '</li>';
                }else{
                    minute_html += '<li class="Hunter-minute" data-minute="' + dates.minute[j] + '">' + dates.minute[j] + '</li>';
                }
            }
            cur_time.find('.Hunter-minute-wrap').html(minute_html).css('left', '-' + (poi.left - 37) + 'px').show();
        };
        function hourEvent(){
            time_wrap.on('click', '.Hunter-hour', function(event){
                event.preventDefault();
                event.stopPropagation();
                var _this = $(this);
                time_wrap.find('.Hunter-hour').removeClass('active');
                time_wrap.find('.Hunter-hour-name').removeClass('active');
                time_wrap.find('.Hunter-minute-wrap').hide().children().remove();
                _this.addClass('active');
                _this.find('.Hunter-hour').addClass('active');
                var hourValue = _this.data('hour');
                var temp = box.val().split(":");
                if(temp.length > 1){
                    box.val(hourValue+":"+temp[1]);
                }else{
                    box.val(hourValue+":00");
                }
                buildMinuteTpl(_this);
                if(options.callback) options.callback(box);
                return false;
            });
        };
        function minuteEvent(){
            time_wrap.on('click', '.Hunter-minute', function(event) {
                event.preventDefault();
                event.stopPropagation();
                var _this = $(this);
                var minuteValue = _this.data('minute');
                var temp = box.val().split(":")[0]+":"+minuteValue;
                box.val(temp);
                template.remove();
                if(options.callback) options.callback(box);
                return false;
            });
        };
        function cleanBtnEvent(){
            time_wrap.on('click', '#Hunter_clean_btn', function(event){
                event.preventDefault();
                event.stopPropagation();
                box.val('');
                template.remove();
                if(options.callback) options.callback(box);
                return false;
            });
        };
    };
    $.fn.extend({
        hunterTimePicker: function (options) {
            options = $.extend({}, options);
            this.each(function () {
                new $.hunterTimePicker(this, options);
            });
            return this;
        }
    });
})(jQuery);
文章标签：
CDN
JavaScript
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
祈澈菇凉
目录
相关文章
&sup3;+++
|
7月前
|
存储 C语言 C++
c++日期和时间
c++日期和时间
&sup3;+++
46 0
风水道人
|
7月前
|
关系型数据库 MySQL Java
SpringBoor连接mysql数据库取数据库中时间格式是12小时制的时间，如何显示成24小时制
SpringBoor连接mysql数据库取数据库中时间格式是12小时制的时间，如何显示成24小时制
风水道人
88 0
白守苍间
|
7月前
|
C语言 C++
c++日期&时间
c++日期&时间
白守苍间
57 1
游客g7kiuqrvkhn3g
|
7月前
|
JavaScript 前端开发 Shell
JS获取当前时间、及一周之前、一个月之前日期
这段代码展示了JavaScript中获取当前时间以及过去特定日期的方法。包括获取时间戳和格式化日期的函数，例如获取一周、一个月前的日期。另外，还包含了添加随机数的日期时间戳生成和计算两个日期之间差值的示例。
游客g7kiuqrvkhn3g
545 1
魏红斌
|
7月前
|
弹性计算 运维 Shell
解析日期和时间
【4月更文挑战第29天】
魏红斌
48 1
仙鹤童子```
获取未来时间年月日
获取未来时间年月日
仙鹤童子```
65 0
无妄的罪
|
7月前
|
存储 JavaScript 前端开发
uniapp获取一周日期和星期
uniapp获取一周日期和星期
无妄的罪
215 0
GoodTime
|
JavaScript 前端开发
JS 计算两个时间戳相差年月日时分秒
JS 计算两个时间戳相差年月日时分秒
GoodTime
99 0
你可以叫我老白
|
存储 Java 程序员
实战：求年月日时间前后遇到的坑和解决方式
这周接到一个时间转换任务需要处理，本来没什么问题，后来完成后发现时间有偏差，又重写了一遍代码，感觉很有记录必要性，希望看过的小伙伴可以避坑。
你可以叫我老白
11558 3
实战：求年月日时间前后遇到的坑和解决方式
dddoger
|
Android开发
设置安卓系统默认时间格式为24小时制
笔记
dddoger
1173 0

热门文章

最新文章

  • 1
    Hadoop迁移MaxCompute神器之DataX-On-Hadoop使用指南
  • 2
    Nginx的启动、停止与重启
  • 3
    Hive之数据倾斜的原因和解决方法
  • 4
    开发人员各级岗位胜任力模型
  • 5
    Node.js 中流操作实践
  • 6
    传奇龙版地图查看器
  • 7
    调整DC的网络对网络是否会有影响?
  • 8
    How to maintain Oracle10g Recyclebin?
  • 9
    你知道自己感染了恶意软件吗？
  • 10
    Groovy 快速入门
  • 1
    Python学习的自我理解和想法（9）
    90
  • 2
    Kimi 上线视觉思考模型，K1 系列强化学习模型正式开放，无需借助外部 OCR 处理图像与文本进行思考并回答
    102
  • 3
    CosyVoice 2.0：阿里开源升级版语音生成大模型，支持多语言和跨语言语音合成，提升发音和音色等的准确性
    79
  • 4
    Megrez-3B-Omni：无问芯穹开源最强端侧全模态模型，支持理解图像、音频和文本三种模态数据
    51
  • 5
    FreeScale：无需微调即可提升模型的图像生成能力，生成 8K 分辨率的高质量图像
    38
  • 6
    Freestyler：微软联合西工大和香港大学推出说唱音乐生成模型，支持控制生成的音色、风格和节奏等
    37
  • 7
    《C 语言与统计假设检验：洞察人工智能模型性能差异》
    83
  • 8
    《C 语言赋能：物联网环境下人工智能应用的能耗优化之道》
    22
  • 9
    《C 语言助力神经网络剪枝：优化模型的卓越之道》
    25
  • 10
    《C 语言复数运算：赋能人工智能信号处理新境界》
    20

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。