When a date appears in one field, make it also appear in a second field at the same time MVC

Question

When a user selects a date in the below HTML code

<div class="form-group">
                @Html.LabelFor(model => model.PPEDueDate, "PPE Due Date", new { @class = "control-label col-md-5" })
                <div class="col-md-offset-0">
                    @Html.TextBoxFor(model => model.PPEDueDate, new { @class = "datepicker5", id = "datepicker5" })
                    @Html.ValidationMessageFor(model => model.PPEDueDate)
                </div>
            </div>

Then the field below should automatically be populated too.

<div class="form-group">
                @Html.LabelFor(model => model.PPET_PPEDueDate, "PPE Due Date", new { @class = "control-label col-md-5" })
                <div class="col-md-offset-0">
                    @Html.TextBoxFor(model => model.PPET_PPEDueDate, new { @class = "datepicker28", id = "datepicker28" })
                    @Html.ValidationMessageFor(model => model.PPET_PPEDueDate)
                </div>
            </div>

My datepickers are populated by

<script>
                $(function () {

                    $("#datepicker5").datepicker({ dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true });

                    $("#datepicker28").datepicker({ dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true });
                                   });                           
            </script>

Answer 1

I disabled the datepicker28 field and reconfigured datepicker 5 like this

$("#datepicker5").datepicker({ dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true, onClose: function (dateseletced) { $("#datepicker28").val(dateseletced) } });

onSelect allowed the date selected in datepicker 5 be transferred automatically to datepicker 28.

I disabled datepicker 28 to ensure the user can't write in it.

<div class="form-group">
                @Html.LabelFor(model => model.PPET_PPEDueDate, "PPE Due Date", new { @class = "control-label col-md-5" })
                <div class="col-md-offset-0">
                    @Html.TextBoxFor(model => model.PPET_PPEDueDate, new { @class = "datepicker28", id = "datepicker28", @readonly = "readonly" })
                    @Html.ValidationMessageFor(model => model.PPET_PPEDueDate)
                </div>
            </div>

Answer 2

You can use this code to copy the value from your first datepicker to your second datepicker using JQuery:

$('#datepicker5').datepicker({
    onSelect: function(dateText) {
        $('#datepicker28').val(dateText);
    }
});

JSFiddle here

Answer 3

try it:

$('#datepicker5').datepicker({
     dateFormat: "dd-mm-yy", 
     changeMonth: true, 
     changeYear: true,
    onSelect: function(dateText){
            $("#datepicker28").val(dateText);

    }
});