我不知道jQuery。 找到此脚本后,我正在寻找time picker 谁能帮助我,我应该如何利用这段代码在HTML页面中获取时间选择器。

/* jQuery timepicker
 * replaces a single text input with a set of pulldowns to select hour, minute, and am/pm
 *
 * Copyright (c) 2007 Jason Huck/Core Five Creative (http://www.corefive.com/)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version 1.0
 */

(function($){
    jQuery.fn.timepicker = function(){
        this.each(function(){
            // get the ID and value of the current element
            var i = this.id;
            var v = $(this).val();

            // the options we need to generate
            var hrs = new Array('01','02','03','04','05','06','07','08','09','10','11','12');
            var mins = new Array('00','15','30','45');
            var ap = new Array('am','pm');

            // default to the current time
            var d = new Date;
            var h = d.getHours();
            var m = d.getMinutes();
            var p = (h >= 12 ? 'pm' : 'am');

            // adjust hour to 12-hour format
            if(h > 12) h = h - 12;

            // round minutes to nearest quarter hour
            for(mn in mins){
                if(m <= parseInt(mins[mn])){
                    m = parseInt(mins[mn]);
                    break;
                }
            }

            // increment hour if we push minutes to next 00
            if(m > 45){
                m = 0;

                switch(h){
                    case(11):
                        h += 1;
                        p = (p == 'am' ? 'pm' : 'am');
                        break;

                    case(12):
                        h = 1;
                        break;

                    default:
                        h += 1;
                        break;
                }
            }

            // override with current values if applicable
            if(v.length == 7){
                h = parseInt(v.substr(0,2));
                m = parseInt(v.substr(3,2));
                p = v.substr(5);
            }

            // build the new DOM objects
            var output = '';

            output += '<select id="h_' + i + '" class="h timepicker">';             
            for(hr in hrs){
                output += '<option value="' + hrs[hr] + '"';
                if(parseInt(hrs[hr]) == h) output += ' selected';
                output += '>' + hrs[hr] + '</option>';
            }
            output += '</select>';

            output += '<select id="m_' + i + '" class="m timepicker">';             
            for(mn in mins){
                output += '<option value="' + mins[mn] + '"';
                if(parseInt(mins[mn]) == m) output += ' selected';
                output += '>' + mins[mn] + '</option>';
            }
            output += '</select>';              

            output += '<select id="p_' + i + '" class="p timepicker">';             
            for(pp in ap){
                output += '<option value="' + ap[pp] + '"';
                if(ap[pp] == p) output += ' selected';
                output += '>' + ap[pp] + '</option>';
            }
            output += '</select>';              

            // hide original input and append new replacement inputs
            $(this).attr('type','hidden').after(output);
        });

        $('select.timepicker').change(function(){
            var i = this.id.substr(2);
            var h = $('#h_' + i).val();
            var m = $('#m_' + i).val();
            var p = $('#p_' + i).val();
            var v = h + ':' + m + p;
            $('#' + i).val(v);
        });

        return this;
    };
})(jQuery);



/* SVN: $Id: jquery.timepicker.js 456 2007-07-16 19:09:57Z Jason Huck $ */

===============>>#1 票数:3 已采纳

的HTML

<input type="text" id="timepicker"/>

Java脚本

<script type="text/javascript">
$(document).ready(function() {
   $('#timepicker').timepicker();
});
</script>

在头安装jQuery库

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

这是下面的示例脚本吗?

演示版

演示

===============>>#2 票数:2

在HTML中

<input type="text" class="timepicker" name="foo" />

在页脚中,添加javascript,然后

$(document).ready(function() {
   $('.timepicker').timepicker();
});

假设您正在加载jQuery,并编写其余的HTML。

它还使用了一个不存在的(也许)名为“ timepicker”的类,因此仅通过将该类添加到每个输入即可轻松地将其同时分配给多个字段。 您也可以使用<div> ,但是我假设您希望输入<form>

加载订单示例

<html>
 <head>
   ...
 </head>
 <body>
   ...
   <form ... >
   ...

   <input type="text" class="timepicker" name="foo" />

   ...
   </form>
   ...
 </body>

 <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
 <script src="WHATEVER_YOU_NAMED_TIMEPICKER.js" type="text/javascript"></script>

 <script type="text/javascript">
   $(document).ready(function() {
     $('.timepicker').timepicker();
   });
 </script>

</html>

===============>>#3 票数:0

我在下面的jQuery库中使用

    <html>
 <head>
   ...
 </head>
 <body>
   ...
   <form ... >
   ...

   <input type="text" class="timepicker" name="timepicker" />

   ...
   </form>
   ...
 </body>

 <script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

 <script type="text/javascript">
   $(document).ready(function() {
     $('.timepicker').timepicker({
            timeFormat: 'h:mm p',
            interval: 30,
            minTime: '10',
            maxTime: '6:00pm',
            defaultTime: '11',
            startTime: '10:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true
         });
   });
 </script>

</html>

  ask by saplingPro translate from so

未解决问题?本站智能推荐:

2回复

如何使用jQuery获取每个选择器的同级

假设我有以下HTML: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <
1回复

jQuery如何使用x2 .next()函数获取选择器

这种情况已经在那里发布了很多,但是我没有找到解决问题的最佳方法。 请帮我这个。 链接 我要使按钮打开/隐藏表格内容。 我在JQuery和next()中使用了slideToggle()来整理表内容。在jsfiddle中可以看到。 我的代码成功了。 但是它只是在“ 单
1回复

在我的情况下,如何使用jquery获取指定的选择器?

我想告诉下面的所有内容a标签,如article11和article12鼠标进入▼在content1 。 $(function() { $("ul#nav span").hover(function() { console.log("i am in mouseover"); $(t
2回复

jQuery日期时间选择器在加载时显示

您好,我有一个jQuery用户界面日期时间选择器。 现在,我希望它在页面加载时显示的输入字段上显示,因此它必须已经被显示而没有单击或聚焦。 我也想隐藏输入字段类型。 链接到网站: HERE 有人有什么想法吗? 我已经搜索了该网站和Google,但找不到任何东西。
2回复

jQuery日期时间选择器布局格式问题

我是日期时间选择器的jQuery。 它的工作正常,但是,上个月或下个月的图标没有显示,如图所示。但是当我单击无图片区域时,它也可以工作。 我需要在图像的角落显示图像。 请提出问题所在。 我从http://trentrichardson.com/examples/timepicke
3回复

jQuery选择器

我需要在JavaScript中选择一个类并更改其属性之一。 但是由于该类正与不同的div一起使用,因此我需要更改仅悬停在其上的类的属性,而不更改其他悬停的类。 那可能吗? html结构如下所示: javascript: 有人可以帮忙吗?
2回复

带有jQuery的选择器

我正在尝试使用皇家滑梯。 我想根据图像更改来更改ID。 我尝试了一些诸如使用translateX值之类的操作,但是这对我来说真的很困难,因为我对jQuery / JavaScript没有太多的经验。 所以当我看到这个时,我想到了另一个想法: 我认为最好的选择是使用:nth-chil
4回复

选择器jQuery

你好,我在学习jquery和JavaScript,我有很多div并在其中跨度,所有这些div都具有相同的类,而且当我将鼠标悬停在div上时,它们的跨度都具有相同的类,使用该div内的标签span更改字母的颜色。 生病的你让我如何构造我的鳕鱼和我的jQuery函数。 我想知道如何使用选择器来实
1回复

jQuery-在样式表中获取CSS选择器

我想为元素选择器与样式表中编写的元素完全相同。 例如,我有一个样式表,其中包含如下所示的input字段的样式: html如以下示例所示: 单击该input字段时,我想使用jquery从样式表中获取其所有选择器: 如何做呢?
1回复

如何通过Webstorm搜索由jquery选择器获取的引用?

当您在参考上使用ctrl + g时,它将在同一文件中找到您 是否有更全局的搜索(项目中的所有文件)可以找到直接引用以及调用jquery来获取对象引用的那些位置?