将字段输入复制到另一个字段输入

我正在尝试从一个daterangepicker复制字段如下:

<script type="text/javascript">
    $(function() {
        $('input[name="daterange"]').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            },
            format: "DD/MM/YYYY",
            startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
            endDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
            minDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
        });
        $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
            $("#date_start").val(picker.startDate.format('DD/MM/YYYY'));
            $("#date_end").val(picker.endDate.format('DD/MM/YYYY'));
        });
        $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>

然后我有这些输入，第一个输入使用daterangpicker选择2个日期。接下来的两个输入基本上被设置为使用daterangepicker选择的任何开始和结束日期，而后两个是我想要复制到的字段。

<div class="col-sm-6">
            <?= $this->Form->input('daterange', ['class'=>'form-control', 'type'=>'text']);?>
        </div>
<input type="text" name="date_start" id="date_start" value="" />
<input type="text" name="date_end" id="date_end" value="" />
<input type="text" name="date_start5" id="date_start5" value="" />
<input type="text" name="date_end5" id="date_end5" value="" />

我想做的是将开始和结束日期输入复制到其他一些字段，但是它们似乎不起作用。我尝试了两种不同的脚本，都无济于事:

<script>
            $(function(){
                var $date_start = $('#date_start');
                var $date_start5 = $('#date_start5');
                function onChange() {
                    $date_start5.val($date_start.val());
                };
                $('#date_start')
                    .change(onChange)
                    .keyup(onChange);
            });
            </script>
<script type=text/javascript>
            $(function() {
              var dateStart = $('#date_start');
              dateStart.change(function() {
                $('#date_start5').val(dateStart.val());
              });
            });

调试器:

(function (alreadyInjectedPropertyName, responseEventId) {
    var scriptPluginsInitialized = !!(alreadyInjectedPropertyName in window);
    var event = new CustomEvent(responseEventId, { detail: scriptPluginsInitialized });
    window.dispatchEvent(event);
}).apply(this, JSON.parse(document['currentScript'].getAttribute('args')));

完整的ctp文件:

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<script type="text/javascript">
    $(function() {
        $('input[name="daterange"]').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            },
            format: "DD/MM/YYYY",
            startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
            endDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
            minDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
        });
        $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
            $("#date_start").val(picker.startDate.format('DD/MM/YYYY'));
            $("#date_end").val(picker.endDate.format('DD/MM/YYYY'));
        });
        $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>
<div class="container" style="margin-top: 70px;">
    <?= $this->Flash->render('auth') ?>
    <?php $this->Form->templates([
        'inputContainer' => '<div class="form-group">{{content}}</div>',
        'inputContainerError' => '<div class="error" style="color:red;">{{content}}{{error}}</div>'
    ]);?>
    <div class="col-sm-2">
    </div>
    <div class="col-sm-8">
        <div class="container col-sm-12" style="border-radius: 10px; border: 1px solid;" >
            <?= $this->Form->create() ?>
            <div class="col-sm-6">
                <?= $this->Form->input('daterange', ['class'=>'form-control', 'type'=>'text', 'label'=>'Session Dates',
                'placeholder'=>'Please select the start and end dates for your session.']);?>
            </div>
            <input type="text" name="date_start" id="date_start" value="" />
            <input type="text" name="date_end" id="date_end" value="" />
            <input type="text" name="date_start5" id="date_start5" value="" />
            <input type="text" name="date_end5" id="date_end5" value="" />
            <script>
            $(function(){
                var $date_start = $('#date_start');
                var $date_start5 = $('#date_start5');
                function onChange() {
                    $date_start5.val($date_start.val());
                };
                $('#date_start')
                    .change(onChange)
                    .keyup(onChange);
            });
            </script>
            <script>
            $(function(){
                var $date_end = $('#date_end');
                var $sessiondate_end = $('#date_end5');
                function onChange() {
                    $sessiondate_end.val($date_end.val());
                };
                $('#date_end')
                    .change(onChange)
                    .keyup(onChange);
            });
            </script>
            <script>
            $(function() {
              var dateEnd = $('#date_end');
              dateEnd.change(function() {
                $('#date_end5').val(dateEnd.val());
              });
            });
            </script>
            <script type=text/javascript>
            $(function() {
              var dateStart = $('#date_start');
              dateStart.change(function() {
                $('#date_start5').val(dateStart.val());
              });
            });
            </script>
            <?= $this->Form->end() ?>
          </div>
          </div>
          <div class="col-sm-2">
          </div>
          </div>