Jquery - 将从日期选择器中选择的值显示到另一个文本框中答案

【问题标题】：Jquery - Displaying the value selected from datepicker into another textboxJquery - 将从日期选择器中选择的值显示到另一个文本框中
【发布时间】：2012-04-16 05:55:06
【问题描述】：

我正在使用 jquery 来获取从文本框中选择的值，并将它们显示在摘要页面上的不同文本框中（全部设计在同一页面上）。例如，我有以下 HTML：

<label for="txt-outbound-date" class="left p-input-label" >Date: </label>
<input type="text" id="txt-outbound-date" name="txt-outbound-date" class="input-txt-sml left required" />

摘要页面 HTML：

<div class="div-contact-label-wrap">
    <label for="txt-selected-date" class="right p-input-label" >Outbound Date: </label>
</div>
<div class="div-contact-input-wrap">
    <input type="text" id="txt-selected-date" name="txt-selected-date" class="input-txt-sml left" disabled="disabled" />
</div>

JQuery 代码：

$('#txt-outbound-date').change(function() {
    $('#txt-selected-date').val($(this).val());
});

除了使用 Jquery datepicker 获取选定值的“选定日期”文本框外，这对我拥有的每个文本框都非常有效。当我选择一个值并进入摘要页面时，不会复制任何值。如果我返回上一页并选择不同的日期，之前选择的日期将显示在文本框中。

有人知道我该如何解决这个问题吗？

我也试过了：

$('#txt-outbound-date').click(function() {
   $('#txt-selected-date').val($(this).val());
});

但这也没有用。请问有什么建议吗？

【问题讨论】：

标签： jquery

【解决方案1】：

你可以使用 datepicker-event onSelect:

$('#txt-outbound-date').datepicker({
   onSelect: function(dateText, inst) { 
      $('#txt-selected-date').val(dateText);
   }
});

【讨论】：

如果它不起作用，您为什么接受它作为答案？不行怎么办？
很奇怪。 jsfiddle.net/G89dN - 似乎正在工作。 1) 您是否删除了有问题的change 事件处理程序？ 2) 您是在 datepicker 的初始化中添加 onSelect 还是只插入答案中的代码？
它确实有效，问题在于日期选择器已经有一个 onSelect 函数，当我从其他人的代码中接管时，我没有意识到这一点。我只是将这个功能添加到现有的功能中，它可以工作，感谢您的帮助。

【解决方案2】：

此解决方案（datepicker-event onSelect）不适用于这种类型的 datepicker

  params.datepicker = {
  selector: '#startdate, #enddate, minDate:'<%=date()%>'
  }

此解决方案仅在您在文本框中键入或单击日期选择器图像图标后将光标放在文本框中时才有效

$(document).ready(function() {
$('#startdate').click(function() {
            var inputValues = [];
            $("#startdate").each(function() {
                inputValues.push($(this).val());
            });
            $('#enddate').each(function(index) {
                if(index < inputValues.length) {
                    $(this).val(inputValues[index]);
                }
            });
        });
 });

而且这个解决方案适用于 html5/bootstraps（但我正在寻找一个旧的解决方案，它使用带有旧版本 datepicker 的 wet2 模板）

$('#startdate').change(function(){
    $('#enddate').val($(this).val());
})

【讨论】：

这似乎不是原始问题的答案。如果您有问题，请将其作为新问题发布。