Question

从我能看到的内容，包括这个例子

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>

我会注意以防万一我使用引导主题，但没有加载引导带datepicker。

当我加载页面时，使用下面的代码加载日期选择器。（我会注意到我正在使用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="">

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

Answer 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库之上，所有这些都开始像魔术一样工作。

JQuery日期选择器没有在刷新上显示

1 个答案: