daterangepicker - копирование поле ввода на другой вход поля

Question

Я пытаюсь скопировать поля из 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> 

Я тогда эти входы, первый вход используется для выбора daterangepicker 2 даты. Следующие 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> 

Answer 1

После Somes изменений, я получил его работал с этим кодом

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

}); 

Я просто добавил эти две строки в применяются функции сборщика диапазона дат

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

И затем, корректируя имя входа (date_start вместо DATERANGE)

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

Однако , похоже, что ваш импорт является obselete, я не знаю, если это то, что вы хотите, но вы должны взять последнюю версию JQuery и Daterangepicker.

Btw, календарь будет работать, только если вы выберете первый вход (aka Дата начала).

После вашего комментария Вот некоторые зависимости я обновление:

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