jQuery UI datepicker在点击时不会打开/显示:

时间:2016-07-19 16:18:19

标签: jquery angularjs datepicker

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="~/wwwroot/js/datePicker.js"></script>

datePicker.js:

 (function ($) {
   $("#datepicker").datepicker();
 })(jQuery);

HTML:

 <td>
    <input type="text" id="datepicker">
 </td>

的CSS:

   <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

我无法理解为什么单击文本输入字段时日历不会打开。我究竟做错了什么?奇怪的是,当我在一个小的html中使用脚本内联隔离这些元素时,它似乎起作用。

编辑:完整的HTML

@section Scripts {
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="~/wwwroot/js/angular/angular.min.js"></script>
    <script src="~/wwwroot/js/angular/angular-route.min.js"></script>
    <script src="~/wwwroot/js/simpleControls.js"></script>
    <script src="~/wwwroot/js/MassScheduler/schedulerLayout.js"></script>
    <script src="~/wwwroot/js/MassScheduler/massScheduler.js"></script>
    <script src="~/wwwroot/js/MassScheduler/schedulerManager.js"></script>
    <script src="./wwwroot/js/MassScheduler/schedulerController.js"></script>
    <script src="~/wwwroot/js/MassScheduler/schedulerTableFilter.js"></script>
    <script></script>
}

<div class="container-fluid">
    <div class="row" ng-app="massScheduler">
        <div ng-view></div>
    </div>
</div>

NG-视图:

<div ng-controller="schedulerController as vm">
    <div id="scheduler-index-main">
        <scheduler-form ng-show="!vm.showErrorMessage"></scheduler-form>
        <scheduler-status-table ng-show="!vm.showErrorMessage"></scheduler-status-table>
        <div ng-show="vm.showErrorMessage" id="error-message">
            <h4>Error occurred. Please try again later.</h4>
        </div>
    </div>
</div>

没有错误输出到控制台。我替换了datePicker.js的路径。它正在查找文件,我可以在Chrome工具中看到它。但输入没有显示。

1 个答案:

答案 0 :(得分:0)

您的代码正在运行,请检查您的js路径是否正常(“〜/ wwwroot / js / datePicker.js”)。

 (function ($) {
   $("#datepicker").datepicker();
 })(jQuery);
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<td>
    <input type="text" id="datepicker">
 </td>