jQuery Datepicker 不会改变输入值答案

【问题标题】：jQuery Datepicker won't change value of inputjQuery Datepicker 不会改变输入值
【发布时间】：2014-05-20 08:06:51
【问题描述】：

我使用 jquery 中的 datepicker 函数。现在我已经集成了一个内联日历。应该可以点击所示月份中的某一天，然后提交表单或更改 url。我需要将新日期添加到 url，以便我可以跳转到该日期。

但我的代码不会改变输入的值 - 我不知道为什么。

这是我的代码：

在头部区域：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.de.js"></script>

HTML：

<form method="get" action="index.php">
  <div class="form-group">
    <div class="minicalendar"></div>
      <input class="form-control" type="text" name="submitDate" id="submitDate" />
  </div>
</form>

JS：

$('.minicalendar').datepicker({
    format: "dd.mm.yyyy",
    todayBtn: true,
    language: "de",
    calendarWeeks: true,
    todayHighlight: true,
    onSelect: function(dateText, inst) { 
      $('#submitDate').val(dateText);
   }
});

你知道为什么吗？我现在正在寻找时间，但我无法找到有效的解决方案......

谢谢。

【问题讨论】：

你能加个jsfiddle吗？以及为什么要包含 js 两次（在不同的版本中）？
您是说选择日期并提交表单后，您无法再次选择日期吗？
@dwrza 你是对的，我两次包含 jquery - 这是错误的！我现在改变了它......现在我在第二行中包含 jquery-ui。
@rps no 当我选择一个日期时，输入的值不会改变
您在问题中发布的代码运行良好，jsbin.com/dukimuxe/1/edit。检查浏览器控制台是否有任何错误

标签： javascript jquery datepicker

【解决方案1】：

您将日期选择器绑定到div 而不是input。

<input id="datepicker" />

$('#datepicker').datepicker({
     //...
});

您也不需要使用onSelect 事件更改输入文本。小部件将自动执行此操作。

【讨论】：

OK ...但是使用此解决方案，我必须单击输入区域以打开日历并选择一个日期。我希望日历一直可见。所以我只需要点击其中一天就可以提交表单。

【解决方案2】：

$('#submitDate').datepicker({
    format: "dd.mm.yyyy",
    todayBtn: true,
    language: "de",
    calendarWeeks: true,
    todayHighlight: true,
    onSelect: function(dateText, inst) { 
      $('#submitDate').val(dateText);
   }
});

使用这个。 Datepicker 不会绑定到 <div> 它必须是 <input> 元素。查看link 了解更多示例。

【讨论】：

【解决方案3】：

这是来自 JQuery UI DatePicker 的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

输入的 id 必须与 JQuery 中选择的元素相同。

【讨论】：