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

随机推荐

Python python 函数参数：关键字参数
# 关键字参数 '''关键字参数代表传入任意个含参数名的参数,这些关键字参数在函数内部自动组装为一个dict ''' def student(name,sex,**keywords): print(' ...
mybatis入门四解决字段名与实体类属性名不相同的冲突
一.创建测试需要使用的表和数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(20), ...
SpringBoot中遇到的一些问题
1.JQuery和bootstrap报404的问题在html页面导入的js和css的时候,不要加static这级目录,直接跳过即可,例如导入的时候不需要加static目录,直接导入js/和css/ ...
JavaScript实现哈希表
JavaScript实现哈希表一.哈希表简介 1.1.认识哈希表哈希表通常是基于数组实现的,但是相对于数组,它存在更多优势: 哈希表可以提供非常快速的插入-删除-查找操作: 无论多少数据,插入和删 ...
Matlab——m_map指南（4）——实例
1. 全球/地区温度图 (1)读取数据 clear all setup_nctoolbox %调用工具包 tic %计时 %% nc=ncgeodataset('tmpsfc.gdas.199401. ...
面试刷题31:分布式ID设计方案
面试中关于分布式的问题很多.(分布式事务,基本理论CAP,BASE,分布式锁)先来一个简单的. 简单说一下分布式ID的设计方案? 首先要明确在分布式环境下,分布式id的基本要求. 1, 全局唯一,在分 ...
【tensorflow2.0】处理时间序列数据
国内的新冠肺炎疫情从发现至今已经持续3个多月了,这场起源于吃野味的灾难给大家的生活造成了诸多方面的影响. 有的同学是收入上的,有的同学是感情上的,有的同学是心理上的,还有的同学是体重上的. 那么国内的 ...
1031 Hello World for U (20分)
Given any string of N (≥) characters, you are asked to form the characters into the shape of U. For ...
Linux学习66 运维安全-通信加密和解密技术入门
一.Linux Service and Security 1.OpenSSL(ssl/tls)协议 2.OpenSSH(ssh)协议 3.bind(dns) 4.web(http):httpd(apa ...
django自定义实现登录验证-更新版
django自定义实现登录验证 django内置的登录验证必须让开发者使用django内置的User模块,这会让开发者再某些方面被限制住下面的模块是我自己自定义实现的django验证,使用方式和dj ...

jquery选择时分插件

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

随机推荐

热门专题