jquery UI datepicker没有显示在html输入文本上

时间:2015-06-03 09:02:42

标签: javascript jquery html css jquery-ui-datepicker

enter image description here

上面的输入文字或标签在点击其中任何一个时似乎都没有显示jQuery UI datepicker。我在SO和网上尝试了不同的解决方案组合。不知道为什么没有人工作。

Html代码:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>    
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  

<label class="tmDtpicker">
    <input id="dtinput" class="hasDatepicker" type="text" name="Start" placeholder='10/05/2014' data-constraints="@NotEmpty @Required @Date" />
</label>

CSS代码:

.tmDtpicker #dtinput {
    position: relative;
    cursor: pointer;
    width: 130px;
    margin-bottom: -2px;
}

.tmDtpicker:after {
    content:'\f073';
    position: absolute;
    z-index: 4;
    cursor: text;
}

js code:

</body>
   //other scripts

<script>
    $(document).ready(            
          function () {
              $("#dtinput").datepicker({ showWeek: true, firstDay :1,                  
                  showOtherMonths: true,
                  selectOtherMonths: true,
                  minDate: '0d', dateFormat: "dd-mm-yy"
              });
          }
        );
    </script>

1 个答案:

答案 0 :(得分:0)

您已加入2 jquery-ui

...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>    
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
...

删除第一个。

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

对于旁注,请始终先包含jQuery,然后再添加jqueryUI

等其他库

<强>更新

class="hasDatepicker"删除input