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 ...

随机推荐

Thread ---java 内存模型
1,Java 线程之间的通信由Java 内存模型(JMM)控制.JMM决定一个线程对共享变量的写入时,能对另一个线程可见. 从抽象的角度来看,JMM定义了线程和主内存之间的抽象关系: 线程之间的共享变 ...
[bzoj1800]fly 飞行棋<暴力>
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1800 说实话我这几天运气不错,随便在bzoj上找题都可以找到水题,这题在代码上没有丝毫难度 ...
UVA11300 Spreading the Wealth 数学
前方数学警告题目链接:https://onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=25&am ...
js实现多级联动
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
Scheme语言实例入门--怎样写一个“新型冠状病毒感染风险检测程序”
小学生都能用的编程语言 2020的春季中小学受疫情影响,一直还没有开学,孩子宅在家说想做一个学校要求的研究项目,我就说你做一个怎么样通过编程来学习数学的小项目吧,用最简单的计算机语言来解决小学数学问题 ...
Scratch 第4课满天星
素材及视频下载链接:https://pan.baidu.com/s/1qX0T2B_zczcLaCCpiRrsnA提取码:xfp8
DG磁盘分区提示错误
文章更新于:2020-02-26 一.当你使用 DG 分区遇到错误时 1.错误复现 2.解决办法以管理员身份打开cmd 运行 chkdsk /f /x g:(这里的 g 替换成你要检查的盘符) 然后 ...
Python中list（列表）、dict（字典）、tuple（元组）、set（集合）详细介绍
更新时间:2019.08.10 更新内容: "2.14加入sorted()函数" "2.3"加入一种删除元素的方法 "二.字典"新增1.5, ...
小程序wepy2 模拟vant PasswordInput, NumberKeyboard 密码输入框控件
vant weapp小程序端控件目前是没有PasswordInput,NumberKeyboard的.实现效果: 数字键盘组件代码(keyboard.wpy): <template> &l ...
Thymeleaf+SpringBoot+Mybatis实现的家庭财务管理系统
项目简介项目来源于:https://gitee.com/darlingzhangsh/graduation_project 本系统是基于Thymeleaf+SpringBoot+Mybatis.是非 ...

jquery选择时分插件

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

随机推荐

热门专题