引导日期选择器不起作用

Posted 2023-05-07

【中文标题】引导日期选择器不起作用

【英文标题】：bootstrap datepicker doesn't work

【发布时间】：2013-08-28 03:47:51

【问题描述】：

我正在尝试使用引导程序日期选择器，但它不起作用。我在引导程序中查看了很多关于同一问题的页面。我几乎尝试了所有方法，但最后都没有用。它充当普通的文本字段。

我的文件中也包含了 bootstrap-datepicker.js。

我找到了这个例子，但我不知道为什么它不起作用：

<div id="search_modal" class="modal hide fade" style="width:50%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Search for a room</h3>
        </div>

        <div class="modal-body" align="">
            <label>City/place</label>
            <div class="input-append"><input type="text" id="" name=""><span class="add-on"><i class="icon-search"></i></span></div>

            <label>number of people</label>
            <div class="input-append"><input type="text" id="number" name="number"></div>

            </br>

            <input type="text" id="dp1">            
                    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js"></script>
             <script type="text/javascript">
            $( '#dp1' ).datepicker();
              </script>

        </div>

        <div class="modal-footer" >
            <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button class="btn btn-primary">Register</button>
        </div>

        </div>
        <div class=""> 
        <a class="btn btn-large btn-success" href="#search_modal" data-toggle="modal">Book a room ss</a>
        </div>

我该如何解决这个问题？

这是我为了解决问题而查看的一些页面。

Bootstrap Datepicker Example Detect change to selected date with bootstrap-datepicker Twitter Bootstrap DatePicker does not work

【问题讨论】：

您要精确吗？ jsfiddle.net/Sherbrow/ymp5D

是的，但我已经尝试过了，由于某种原因它不起作用。我的文件中有展位数据选择器 .css 和 .js。我也有 JQuery，但我不确定它不会工作

【参考方案1】：

    <div class="modal-body" align="">
        <label>City/place</label>
        <div class="input-append"><input type="text" id="" name=""><span class="add-on"><i class="icon-search"></i></span></div>

        <label>number of people</label>
        <div class="input-append"><input type="text" id="number" name="number"></div>

        </br>


        <div data-date-format="dd-mm-yyyy" data-date="12-02-2012" class="input-  append date myDatepicker">
        <input type="text" value="" size="16" class="span2">
        <span class="add-on"><i class="icon-calendar"></i></span>
        </div>
    </div>
    <div class="modal-footer" >
        <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Register</button>
    </div>

    </div>
    <div class=""> 
    <a class="btn btn-large btn-success" href="#search_modal" data-toggle="modal">Book a room ss</a>
    </div>
   <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
    $( '.myDatepicke' ).datepicker();
  </script>

它对我有用。

附言在你关闭你的身体标签之前添加整个东西

您可能还想查看this

这是jsfiddle 我编辑了你的代码 检查一下，它现在可以正常工作了

【讨论】：

在您关闭 body 标记之前添加整个 javascript 内容。你面临什么错误？

试试我提供的链接。让我知道它是否不起作用。检查您的浏览器控制台是否正在加载 javascript 文件。

我尝试了该网站 2 小时，但无法使其正常工作。我只是不知道出了什么问题，因为它不会给我任何错误。

你检查过你的控制台了吗？能贴出详细代码吗？

它的代码很长。这是您可以选择到达时间的表单的一部分，所有这些都在模态中实现。