Невозможно обновить дату в средстве выбора даты на основе значения раскрывающегося списка

Question

Попытка обновить указатель даты (# test2) на текущую дату, если при использовании в раскрывающемся списке выбран статус 2 (#status). Не уверен, что моя ошибка, любая помощь приветствуется.

<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>

Answer 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>