没有互联网的日期选择器工作

时间:2017-12-28 09:08:38

标签: datepicker offline offline-caching

我需要使用日期选择器才能在没有互联网的情况下工作。

我已将源链接从https链接更改为本地下载的文件。但随后日期选择器停止工作。 有人可以告诉我如何克服这个问题吗?

理想的源链接:

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

已更改为本地下载的文件

 <script src = "jquery-ui.js"></script>
      <script src = "jquery-1.10.2.js"></script>
      <script src = "jquery-ui.css"></script>

如果我能确保即使使用https链接,我也会很好,当互联网不存在时,我的日期选择器会正常工作。可能会通过一些缓存。

使用datepickers代码更新我的问题:

<span style="float: left;margin-left:2em"> <b>Date Range: </b>
        <input type="text" id="datepicker" > <b>to </b>
        <input type="text" id="datepicker2"> </span><div id = "Alert" style="float:left;margin-left:2em"> Please select a valid Date Range!</div>
        .............................................   

    var startDate;
        var endDate;
        var start;
        var end;



            $(function() {
                $("#datepicker").datepicker({
                    onSelect: function() {
                        startDate = $(this).datepicker('getDate');
                        start = formatDate(startDate);
                        if( start!=null && end!=null && end>=start)
                        {document.getElementById('Alert').style.visibility = 'hidden';
                        document.getElementById('canvas-holder').style.visibility = 'visible'; 

                        initial(start, end);

                        }
                        else {
                       document.getElementById('Alert').style.visibility = 'visible'; //Will show
                        document.getElementById('canvas-holder').style.visibility = 'hidden'; 
                        }
                    }

                });
                $("#datepicker2").datepicker({
                    onSelect: function() {
                        endDate = $(this).datepicker('getDate');
                        end = formatDate(endDate);
                        alert('skn here s' + startDate);
                        alert('skn here e' + endDate);
                        if( start!=null && end!=null && end>=start)
                        {document.getElementById('Alert').style.visibility = 'hidden';
                        document.getElementById('canvas-holder').style.visibility = 'visible'; 
                        initial(start, end);
                        }
                        else {
                            document.getElementById('Alert').style.visibility = 'visible'; //Will show
                            document.getElementById('canvas-holder').style.visibility = 'hidden'; 
                                  }
                        }

                    });

                });

请在浏览器控制台中找到以下错误。

Uncaught TypeError: $(...).datepicker is not a function
    at HTMLDocument.<anonymous> (index.html:64)
    at fire (jquery-1.10.2.js:3048)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3160)
    at Function.ready (jquery-1.10.2.js:433)
    at HTMLDocument.completed (jquery-1.10.2.js:104)

我已根据建议纳入了更改。在这种情况下,日期选择器显示但不是预期的。

日期PickerIssue: enter image description here

预期日期选择器 enter image description here

1 个答案:

答案 0 :(得分:1)

尝试将此更改为

<link href = "jquery-ui.css" rel = "stylesheet">
 <script src = "jquery-1.10.2.js"></script>
<script src = "jquery-ui.js"></script>

你需要在jquery-ui.js之前加载jquery