Unable to update the date in a datepicker based on the value of a dropdown list

Question

Trying to update the datepicker(#test2) with the current date if the use selects status of 2 in the dropdown (#status). Not sure what my error is, any assistance is appreciated.

<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

Assuming you're using a plain HTML date input, then you can use the valueAsDate property to set the value to the current date when 2 is selected:

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

I am using jQueryUI

In this case you can use the setDate option to update the field. Also note that the field should be type="text" for it to work with the jQueryUI datepicker.

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