jQuery Bootstrap 日期选择器不工作。

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15713034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:38:50  来源:igfitidea点击:

Bootstrap Datepicker not working.

jquerycsstwitter-bootstrap

提问by weggie

Fiddle ex: http://jsfiddle.net/EmwFE/

小提琴前:http: //jsfiddle.net/EmwFE/

So I have been trying to get datepickerworking and I think I am following the directions but I can't get the calendar to pop up.

所以我一直在尝试让datepicker工作,我想我正在遵循指示,但我无法弹出日历。

TIA

TIA

Fiddle example above code below.

下面的代码上面的小提琴示例。

                 <label class="control-label" for="input08"> 
                    My Start Date
                 </label>
                 <div class="controls">
                    <script type="text/javascript">
                        $(document).ready(function() {
                        $('.datepicker').datepicker();
                    </script>

                    <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                        <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>

                </div>

回答by Lughino

Look this: jsfiddle

看这个: jsfiddle

You bet initialization the ID of the div that contains everything. you were aiming at nothing!

您打赌初始化包含所有内容的 div 的 ID。你什么都没有瞄准!

$('#dp3').datepicker();

回答by jgillich

You had several issues in your code.

您的代码中有几个问题。

  • Missing brackets after your ready () call
  • Using an id selector instead of an class selector (#datepickerrefers to id="datepicker", .datepickerto class="datepicker")
  • 调用 ready () 后缺少括号
  • 使用 id 选择器而不是类选择器(#datepickerid="datepicker", .datepickerto class="datepicker"

Working example

工作示例

回答by AaronLS

You didn't have an ID set. And something else that might cause you problems later, is the input has the class attribute defined TWICE, instead list each class in the same attribute seperated by a space:

您没有设置 ID。之后可能会导致您出现问题的其他事情是输入具有定义了两次的类属性,而是在由空格分隔的同一属性中列出每个类:

<input id="datepicker" class="span2 datepicker" size="16" type="text" value="12-02-2012">

http://jsfiddle.net/EmwFE/2/

http://jsfiddle.net/EmwFE/2/

I notice you had some javascript inline trying to reference it by class $('.datepicker')which didn't work because you had class attribute defined twice and the second definition is ignored. The javascript panel used $('#datepicker')which didn't work because you didn't have the ID set on the input. So either jquery selector technique would have worked, you just needed to fix the problems with the element.

我注意到您有一些 javascript 内联试图按类引用它$('.datepicker'),但没有工作,因为您定义了两次类属性,而忽略了第二个定义。使用的 javascript 面板$('#datepicker')不起作用,因为您没有在输入上设置 ID。因此,无论是 jquery 选择器技术都会起作用,您只需要修复元素的问题。

回答by Yatoom

Lughino's solution resulted in some strange behavior for me. I think you should remove

Lughino 的解决方案给我带来了一些奇怪的行为。我认为你应该删除

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

and

$('#dp3').datepicker();

And write this code in the javascript box:

并在 javascript 框中编写此代码:

$(document).ready(function () {
   $('#dp3').datepicker();
});

See jsfiddle.

请参阅jsfiddle

回答by Alex 75

The posted code example contains 2 errors:

发布的代码示例包含2 个错误

1) The function ready() is not closed:

1)函数ready()没有关闭:

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

2) The input element has "class" attribute defined 2 times:
(using the class attribute in the jQuery selector is perfect to find the element(s), no need to use the id)

2)输入元素有2次定义的“class”属性:(
在jQuery选择器中使用class属性可以完美地找到元素,不需要使用id)

<input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">

should be

应该

<input class="span2 datepicker" size="16" type="text" value="12-02-2012">

jsfiddle with correction

jsfiddle 修正