刷新时不显示 JQuery 日期选择器答案

【问题标题】：JQuery Date Picker Not Showing on Refresh刷新时不显示 JQuery 日期选择器
【发布时间】：2016-10-03 00:04:00
【问题描述】：

据我所知，包括这样的例子

jQuery Datepicker - refresh pickable days based on selected option

这段代码应该可以工作。

这是我调用外部 jquery 脚本的地方

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

如果我使用的是引导主题但没有加载引导日期选择器，我会注意。

当我加载页面时，日期选择器可以使用下面的代码正常加载。（我会注意到我使用的是 jquery 更改事件，但将我的代码切换为更接近上述答案，以防我遗漏了一些小东西

$(function(ready){
    $(function() {
      $('#datepicker').datepicker({
        format: "mm/dd/yy",
        minDate: "+2W",
        maxDate: "+6W"
      });
    });
});

HTML

 <input type="radio" onchange="loadDatePicker()" tabindex="7" class="change" id="radio_1" name="freq" value="1"> Monthly <input type="radio"  onchange="loadDatePicker()" tabindex="8" id="radio_2" class="change" name="freq" value="2"> Bi-Weekly

  <input class="form-control" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="{{date}}">

输出的HTML如下：

<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">

然后我单击我的单选按钮并调用以下代码

function loadDatePicker(){
    console.log("test")
    $('#datepicker').datepicker("destroy");
    if($("input[type='radio'][name='freq']:checked").val() == 1){
      $('#datepicker').datepicker({
        format: "mm/dd/yy",
        minDate: "+2W",
        maxDate: "+6W"
      });
    }else if($("input[type='radio'][name='freq']:checked").val() == 2){
      $('#datepicker').datepicker({
        format: "mm/dd/yy",
        minDate: "+2W",
        maxDate: "+2W10D"
      });
    }
    $('#datepicker').datepicker("refresh");
  }

我可以看到输入的变化一秒钟，但很快又回来了

<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">

但是，现在点击日期选择器的输入时，日期选择器不再出现。

【问题讨论】：

日期选择器消失的唯一可能原因是`$('#datepicker').datepicker("destroy");`。您确定您的复选框值没有被其他地方操纵吗？我在这里试过你的代码：jsfiddle.net/rvaldez/D4AGz，它按预期运行。
@Runcorn 我找到了导致问题的原因。如果您对为什么这是一个问题有任何见解，我很想知道它是什么。

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

我终于解决了这个问题。

这是一段修改 DOM 的外部代码。

我正在为同一解决方案编写的聊天脚本的一部分包括导致它的以下代码行。（我注释掉了行，直到我发现哪些行破坏了它）

jQuery(document).ready(function($) {
$("body").append('<div id="chat" title="Basic chat"><div id="chats">Please Enter your Name: <input id="username" type="text" ></div></div>');
$("body").append('<div id="chat2" title="Basic chat"><div id="chatc"> </div><div id="chate"><input id="chatb" type="text" ></div></div>');
});

由于某种原因，系统反对这条线位于日期选择器最初声明的位置和修改的位置之间。

我将整个聊天代码库移到日期选择器代码上方和 jquery-ui 库上方，这一切都像变魔术一样开始工作。

【讨论】：