引导带时钟选择器（clockpicker不是一个功能）

本文介绍了引导带时钟选择器（clockpicker不是一个功能）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是bootstrap和jquery的初学者，当我尝试使用clockpicker包进行引导时，我遇到了这个错误。

I am a beginner to bootstrap and jquery , when I tried using clockpicker package for bootstrap I came across this error.

未捕获TypeError：$（...） .clockpicker不是函数。

Uncaught TypeError: $(...).clockpicker is not a function.

<html >
<head>
    <!-- Clockpicker and minified CSS -->
    <link rel="stylesheet" href="clockpicker-gh-pages/dist/bootstrap-clockpicker.min.css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Time Slot</title>
</head>
<body>

    <div class="col-xs-12" style="height:100px;"></div>
    <div class="container-fluid" >
            <form role="form" name="frm"  action ="timeslot" method="post" 
            onSubmit="return valid2()">

            <div class="form-group">
                    <label for="name" >Slot Name</label>
                    <input type="text" name="slotname" class="form-control" placeholder="Time Slot name" >
             </div>
             <div class="form-group">
                    <label for="name" >Time Slot</label>
                    <input type="text" name="slotname" class="form-control" placeholder="Time Slot name" >
             </div>
             <label for="name" >Time</label>
            <div class="input-group clockpicker">
                <input type="text" class="form-control" value="09:30">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>


            <div class="col-xs-12" style="height:30px;"></div>
            <div class="form-group">
                    <button type="submit" class="btn btn-info" name="submit">SUBMIT</button>
            </div>
        </div>
            </form>

            <script type="text/javascript">
            $('.clockpicker').clockpicker()
                .find('input').change(function(){
                    // TODO: time changed
                    console.log(this.value);
                });
            $('#demo-input').clockpicker({
                autoclose: true
            });

            if (something) {
                // Manual operations (after clockpicker is initialized).
                $('#demo-input').clockpicker('show') // Or hide, remove ...
                        .clockpicker('toggleView', 'minutes');
            }
            </script>


</body>
<!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="clockpicker-gh-pages/assets/js/bootstrap.min.js"></script>
    <script src="clockpicker-gh-pages/assets/js/highlight.min.js"></script>
    <script src="clockpicker-gh-pages/dist/jquery-clockpicker.min.js"></script>

</html>

推荐答案

如果你查看你发布的代码，你'我会发现你在加载clockpicker之前试图运行 clockpicker 。

If you look at the code you posted, you'll see that you are attempting to run clockpicker before clockpicker is loaded.

解决这个问题的最简单方法是使用jQuery 文档就绪函数，这会导致您的脚本在尝试运行之前一直等到整个页面被加载：

The simplest way to solve this problem is to use a jQuery document ready function, which causes your script to wait until the entire page is loaded before attempting to run:

// This line tells jQuery to wait until the whole page is loaded before running the code inside.
// This will solve your current problem, as well as many other potential problems.
jQuery(function($) {
        $('.clockpicker').clockpicker()
            .find('input').change(function(){
                // TODO: time changed
                console.log(this.value);
            });
        $('#demo-input').clockpicker({
            autoclose: true
        });

        if (something) {
            // Manual operations (after clockpicker is initialized).
            $('#demo-input').clockpicker('show') // Or hide, remove ...
                    .clockpicker('toggleView', 'minutes');
        }
// The line below "closes" the document ready function
});

这篇关于引导带时钟选择器（clockpicker不是一个功能）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！