ブートストラップ日付ピッカーendDatesに

Question

を変更することができない私は、名前が「タイプ」と値が「標準」と「試用」であるラジオボタンを得ました。それから私はまた、IDが "datepicker"であるテキストボックスを持っています。 標準ボタンをクリックすると、datePickerのendDateは3日となります。試用ボタンをクリックすると、datePickerのendDateはとなります。となります。私は「標準」値でラジオボタンをチェックすると

私の問題は今、その後、endDateには3日になっています。しかし、「トライアル」のラジオボタンをチェックした場合、endDateはまだ3日です。そうでなければ、私は「試用」最初にチェックすると、値が1日になり、「標準」チェックするとendDateに結果が1日ているのと同じになります。

私は$(".datepicker").datepicker("refresh");と$(".datepicker").datepicker("destroy");を試しましたが、動作していないようです。

<script type="text/javascript" src="~/Scripts/jquery-2.0.2.js"></script> 
    <link rel="stylesheet" type="text/css" href="~/Content/datepicker.min.css"> 
    <script type="text/javascript" src="~/Scripts/bootstrap-datepicker.js"></script> 
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css"> 

    <script type="text/javascript"> 
     $(window).load(function() { 
      $('.datepicker').val('dd/mm/yyyy'); 
      dateExpiry(); 
     }); 
     $("input[name='Type']").change(function() { 
      $('.datepicker').val('dd/mm/yyyy'); 
      dateExpiry(); 
     }); 

     function dateExpiry() { 
      var type = $("input[name='Type']:checked").val(); 
      if (type == 'Trial') { 
       $('.datepicker').datepicker({ 
        format: 'dd/mm/yyyy', 
        startDate: '-0d', 
        endDate: '+1d', 
        autoclose: true 
       }); 
      } 
      else if (type == 'Standard') { 
       $('.datepicker').datepicker({ 
        format: 'dd/mm/yyyy', 
        startDate: '-0d', 
        endDate: '+3d', 
        autoclose: true 
       }); 
      } 
     }; 
    </script> 

Answer 1

datepickerを新規作成しないでください。 setEndDateメソッドを使用して、終了日の値を設定します。

$('.datepicker').datepicker({ 
 
    format: 'dd/mm/yyyy', 
 
    startDate: '-0d', 
 
    endDate: '+1d', 
 
    autoclose: true 
 
}); 
 
ChangeRange(); 
 
$("input[name='Type']").change(ChangeRange); 
 
function ChangeRange() { 
 
    if ($("input[name='Type']:checked").val()=="Standard") { 
 
    $('.datepicker').datepicker('setEndDate', '+3d'); 
 
    } 
 
    else if ($("input[name='Type']:checked").val()=="Trial") { 
 
    $('.datepicker').datepicker('setEndDate', '+1d'); 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.min.js"></script> 
 

 
<div class="checkbox"> 
 
    <label> 
 
    <input type="radio" name="Type" value="Standard"> 
 
    Standard 
 
    </label> 
 
</div> 
 
<div class="checkbox"> 
 
    <label> 
 
    <input type="radio" name="Type" value="Trial" checked="checked"> 
 
    Trial 
 
    </label> 
 
</div> 
 
<div class="input-group"> 
 
    <input type="text" class="form-control datepicker" value="21/06/2017"> 
 
    <div class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-th"></span> 
 
    </div> 
 
</div>