无法根据下拉列表的值更新日期选择器中的日期答案

【问题标题】：Unable to update the date in a datepicker based on the value of a dropdown list无法根据下拉列表的值更新日期选择器中的日期
【发布时间】：2020-04-08 10:28:08
【问题描述】：

如果用户在下拉列表 (#status) 中选择状态 2，则尝试使用当前日期更新 datepicker(#test2)。不知道我的错误是什么，感谢任何帮助。

<div class="form-group">
    @Html.LabelFor(model => model.Rental.Status, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EnumDropDownListFor(m => m.Rental.Status, "Select Status", new { @class = "form-control", id = "status" })
        @Html.ValidationMessageFor(model => model.Rental.Status, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.ReturnDate, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(x => x.Rental.ReturnDate, "{0:yyyy-MM-dd}", new { @class = "form-control", @type = "date", id = "test2" })
        @Html.ValidationMessageFor(model => model.Rental.ReturnDate, "", new { @class = "text-danger" })
    </div>
</div>


<script>
    $(document).ready(function () {
        $("#status").change(function () {
            var selectedVal = $(this).children("option:selected").val();
           // console.log(selectedVal);
            if (selectedVal == 2) {
                //   console.log(selectedVal);
                $("#test2").datepicker({ dateformat: "0:yyyy-MM-dd" }).datepicker('setDate', new Date());
            }

        });

    });
</script>

【问题讨论】：

尝试使用$(this).val(); 而不是$(this).children("option:selected").val();。 jQuery.val() documentation
您使用的是纯 HTML 日期控件还是 JS 日期选择器库？如果是后者，你用的是哪一个？
感谢您的回复@Robiseb。我能够获得 selectedVal 值并进入 if 语句，它是关于更新不起作用的日期选择器的部分。
@RoryMcCrossan 我正在使用 jquery ui

标签： javascript jquery model-view-controller

【解决方案1】：

假设您使用的是纯 HTML 日期输入，那么您可以使用 valueAsDate 属性将值设置为选择 2 时的当前日期：

$(document).ready(function() {
  $("#status").change(function() {
    if ($(this).val() === '2') {
      $("#test2")[0].valueAsDate = new Date()
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="status" class="control-label col-md-2">Rental Status</label>
  <div class="col-md-10">
    <select id="status" class="form-control">
      <option value="">Select...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label for="test2" class="control-label col-md-2">Return Date</label>
  <div class="col-md-10">
    <input type="date" id="test2" value="2020-05-01" class="form-control" />
  </div>
</div>

我正在使用 jQueryUI

在这种情况下，您可以使用setDate 选项来更新该字段。另请注意，该字段应为 type="text" 才能与 jQueryUI 日期选择器一起使用。

$(document).ready(function() {
  $("#test2").datepicker();

  $("#status").change(function() {
    if ($(this).val() === '2') {
      $("#test2").datepicker("setDate", new Date());
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div class="form-group">
  <label for="status" class="control-label col-md-2">Rental Status</label>
  <div class="col-md-10">
    <select id="status" class="form-control">
      <option value="">Select...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label for="test2" class="control-label col-md-2">Return Date</label>
  <div class="col-md-10">
    <input type="text" id="test2" class="form-control" />
  </div>
</div>

【讨论】：