jquery选择时分插件

<!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="./time/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>

        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="./time/js/timepicker.js"></script>

        <script type="text/jscript">

            //时间选择

            $("#beginTime").hunterTimePicker();

            $("#endTime").hunterTimePicker();

        </script>

    </body>

</html>

//附上引入的timePicker.css文件和timepicker.js文件

.Hunter-time-picker{

    position: absolute;

    border: 2px solid #c9cbce;

    width: 280px;

    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;

}

(function ($) {

    $.hunterTimePicker = function (box, options) {

        var dates = {

            hour: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],

            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];

                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 nowHour = cur_time[0].dataset.hour.split(':')[0];

            dates.minute = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];//重置分钟

            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++){

                dates.minute[j] = nowHour + ':' +dates.minute[j];

                minute_html += '<li class="Hunter-minute" data-minute="' + dates.minute[j] + '">' + dates.minute[j] + '</li>';

            }

            time_wrap.html(minute_html);

        };

        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(":");

                box.val(hourValue);

                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 = 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);

附上效果图

jquery选择时分插件的更多相关文章

[英] 推荐 15 个 jQuery 选择框插件
jQuery Selectbox Plugins let you create beautiful and eye catching select box for your websites inst ...
基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
选择29部分有用jQuery应用程序插件（免费点数下载）
免积分下载:http://download.csdn.net/detail/yangwei19680827/7238711 原文地址:http://www.cnblogs.com/sxwgf/p/36 ...
jQuery Tags Input 插件显示选择记录
利用jQuery Tags Input 插件显示选择记录最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
推荐几款jquery图片切换插件
一.前言毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
jQuery选择什么版本 1.x? 2.x? 3.x?
类似标题:jQuery选择什么版本?jquery一般用什么版本?jquery ie8兼容版本.jquery什么版本稳定? 目前jQuery有三个大版本:1.x:兼容ie678,使用最为广泛的,官方只做 ...
Jquery之树形插件
1.DynaTree (推荐使用,说明文档以及样例在下载的压缩包里\doc\samples.html) DynaTree 是一个优化的动态jQuery树查看插件,它只在需要时才创建DOM元素.支持ch ...

随机推荐

Downgrade ASM DATABASE_COMPATIBILITY (from 11.2.0.4.0 to 11.2.0.0.0) on 12C CRS stack.
使用Onecommand完成快速Oracle 12c RAC部署后发现ASM database compatibilty无法设置,默认为11.2.0.4.0. 由于我们还有些数据库低于这个版本,所以 ...
深入解读ES6系列（四）
来自老曾es6的前言: 哈喽小伙伴们,爱说'废'话的Z又回来了,欢迎来到Super IT曾的博客时间,上一节说了字符串,面向对象以及json的知识,这一节我们继续我们知识的海洋,一起奋斗不秃头!不足的 ...
Windows命令help的基本使用
写一个TODO App学习Flutter本地存储工具Moor
写一个TODO App学习Flutter本地存储工具Moor Flutter的数据库存储, 官方文档: https://flutter.dev/docs/cookbook/persistence/sq ...
数据科学 R语言速成
文章更新于:2020-03-07 按照惯例,需要的文件附上链接放在文首: 文件名:R-3.6.2-win.exe 文件大小:82.4M 下载链接:https://www.lanzous.com/i9c ...
Fastdfs文件系统扩容
1.简介 FastDFS文件服务器在设计时,为了支持大容量,存储节点(服务器)采用了分卷(或分组)的组织方式.存储系统由一个或多个卷组成,卷与卷之间的文件是相互独立的,所有卷的文件容量累加就是 ...
spark 大杂烩
累加器 val dataRdd = sc.makeRDD(List(1, 2, 3, 4), 2) var sum = 0 //累加器可以收集driver和各个excuter中累加的结果 //如果此处 ...
Go语言中文分词技术使用技巧（一）
分词技术就是搜索引擎针对用户提交查询的关键词串进行的查询处理后根据用户的关键词串用各种匹配方法进行分词的一种技术. 中文分词(Chinese Word Segmentation)指的是将一个汉字序列( ...
paste命令-合并文件
paste [-s] [-d " "] [file1] [file2] -s:将文件合并成行 -d:显示时的分割符 //1.txt 1 6 2 7 3 8 4 9 5 10 //2 ...
国外的一个代码仓库 github --- 里面类似一个svn 的代码仓库
https://github.com/wzhanke/shell 用户:wzh.e 邮箱:wzh.e@x.com 登陆密码:*wzh.e8*9

jquery选择时分插件

jquery选择时分插件的更多相关文章

随机推荐

热门专题