How to set a TextBox value when another TextBox value is changed

I have two textboxes with datepicker like this.

<script type="text/javascript">
    $(function () {
        $('#value_date').datetimepicker({ format: 'MM/DD/YYYY' });
        $('#run_date').datetimepicker({ format: 'MM/DD/YYYY hh:mm a' });
    });

</script>

<div class='input-group date' id='value_date'>
    <input type="text" id="txtValueDate" class="form-control" runat="server" placeholder="Value Date"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
 </div>

<div class='input-group date' id='run_date'>
    <input type="text" id="txtRunDate" class="form-control" runat="server" placeholder="Run Date" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
 </div>

Then, when value_date's value changed, (e.g. 03/31/2016), the run_date is automatically set to value_date's yesterday (03/30/2016) as the default run_date, but still can be changed by datetimepicker. How I do this?