는 daterangepicker - 나는 다음과 같이 daterangepicker에서 필드를 복사하기 위해 노력하고있어 다른 필드 입력

Question

에 필드 입력을 복사 :

<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 개의 입력은 기본적으로 daterangepicker로 선택된 시작 날짜와 종료 날짜로 설정되며 후자의 두 입력은 복사 할 필드입니다.

내가하고 싶은 일은 시작 및 종료일 입력을 다른 입력란에 복사하는 것이지만 작동하지 않는 것 같습니다. 디버거에서

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

: 나는 아무 소용이 서로 다른 두 스크립트를 모두 시도했습니다

전체 CTP 파일

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

: SOMES 변경 후

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

, 나는 그것을 가지고 이 코드로 작업했습니다.

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

}); 

는 방금 입력 이름 (대신 DATERANGE의 DATE_START) 그러나

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

보정,

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

그리고 기간 선택기의 적용 기능이 두 라인을 추가 , 당신의 import가 obselete 인 것을 좋아하는 것처럼 보입니다. 만약 당신이 원하는 것이면 나는 모르겠지만 JQuery와 Daterangepicker의 마지막 버전을 가져 가야합니다.

Btw를 사용하면 첫 번째 입력 (일명 시작일)을 선택한 경우에만 캘린더가 작동합니다. 당신이 콘솔을 말할 때, 당신은 요소를 검사 한 후 콘솔 뜻

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