Question

这可能很容易，但我无法做到。我正在使用jQuery datepicker。我的表单中有一个textarea，我希望能够将日期（从datepicker）插入到文本的结尾。

例如：用户在textarea中键入此内容：我希望我的项目能够通过

传递

然后使用日期选择器并选择一个日期： 2015年1月1日

最终结果应该是：我希望我的项目能够在2015年1月1日之前交付

＆＃13;

$( "#fieldA" ).datepicker({
  showOn: "button",
  buttonText: "Day",
  inline: true,
  altField: '#updateTextField'
});

＆＃13;

#updateTextField{
  width:150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<textarea id="updateTextField">Add date at the end of sentence.</textarea>
<input type="input" id="fieldA" class="datepicker" style="display:none;" />

＆＃13;

Answer 1

你应该使用另一个参数而不是altField，因为它覆盖了数据，我没有在jquery ui文档中看到如何操作它，无论如何我编辑了你的脚本，以便日期将附加到textarea val使用onSelect参数。

$( "#fieldA" ).datepicker({
      showOn: "button",
      buttonText: "Day",
      inline: true,
      onSelect: function() {
          $('#updateTextField').append(' '+$(this).val());
    }
});

<强>更新

如果您想要返回严格的值，那么我建议您更改此行

$('#updateTextField').append(' '+$(this).val());

到这个

$('#updateTextField').val('I would like my items to be delivered by  '+$(this).val());

Answer 2

将onSelect添加到你的日期选择器：

    $("#fieldA").datepicker(
    {
      showOn: "button",
      buttonText: "Day",
      inline: true,
      altField: '#updateTextField',
      onSelect: function()
      { 
        var dateObject = $(this).datepicker('getDate'); 
        $("#updateTextField").val("I would like my items to be delivered by " + 
         dateObject.getDate() + "-" + dateObject.getMonth() + "-" + dateObject.getFullYear() );
      }

示例：http://jsfiddle.net/L4j3g86u/

通过添加所选日期来更新textarea

2 个答案: