daterangepicker - copying field input to another field input

Question

I'm trying to copy the fields from a daterangepicker as follows:

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

I then have these inputs, the first input uses the daterangepicker to select 2 dates. The next 2 inputs are essentially set to whatever start and end dates were chosen with the daterangepicker, while the latter two are the fields I want to copy to.

<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="" />

What I want to do is copy the start and end date inputs to some other fields, however they don't seem to work. I've tried two different scripts, both to no avail:

<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());
              });
            });

In the debugger:

(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')));

The full ctp file:

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

Answer 1

After somes changes, I got it worked with this code

<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="" />

JS :

$(function() {
    $('input[name="date_start"]').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="date_start"]').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'));
        $("#date_start5").val(picker.startDate.format('DD/MM/YYYY'));
        $("#date_end5").val(picker.startDate.format('DD/MM/YYYY'));
    });

    $('input[name="date_start"]').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

});

I just added these two lines in the apply functions of date range picker

$("#date_start5").val(picker.startDate.format('DD/MM/YYYY'));
$("#date_end5").val(picker.startDate.format('DD/MM/YYYY'));

And then, correcting the input name (date_start instead of daterange)

$('input[name="date_start"]')

However, it look likes your import are obselete, I don't know if it's what you want, but you should take the last version of JQuery and Daterangepicker.

Btw, the calendar will only work if you select the first input (aka Start date).

After your comment Here is some dependencies I updated :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2.1.24/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2.1.24/daterangepicker.css" />