단추를 클릭 할 때 DateTimePicker보기 전환

Question

내 프로젝트의 달력에 DateTimePicker 3 Bootstrap을 사용하고 있습니다. 일부 datetimepicker 뷰를 'month to date'또는 'date to month'로 전환해야합니다. jQuery를 사용하여 시도했지만 전혀 작동하지 않습니다. 코드에서 실수를했는지 확인하십시오.

나의 현재 마크 업 및 스크립트 코드 :

<script> 
$(document).ready(function(){ 
    $("#Month").click(function() { 
     $('#datetimepicker3').datetimepicker({ 
      format: 'M-YYYY', 
      maxDate: 'now' 
     }); 
    }); 
    $("#Date").click(function() { 
     $('#datetimepicker3').datetimepicker({ 
      format: 'DD-MM-YYYY', 
      maxDate: 'now' 
     }); 
    }); 
}); 
</script> 

<div class="form-group"> 
    <div class='input-group date' id='datetimepicker3'> 
     <input type='text' class="form-control" name="date" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-time"></span> 
     </span> 
    </div> 
</div> 

내 원하는 결과 :

Answer 1

는 단순히 viewMode 옵션을 사용할 수 있습니다보기 모드를 변경합니다.

기본 구성 (일 또는 월)으로 datepicker를 초기화 한 다음 viewMode 및 format 기능을 사용하여 옵션을 변경할 수 있습니다.

당신은 예를 들어 다음과 같은 코드를 사용할 수 있습니다 : 당신의 대답은 완벽하게 작동하고

// Init datetimepicker with default config 
 
// (if you want date config change format: 'DD-MM-YYYY' and viewMode: 'days') 
 
var picker = $('#datetimepicker3').datetimepicker({ 
 
    format: 'M-YYYY', 
 
    maxDate: 'now', 
 
    viewMode: 'months' 
 
}); 
 

 
$("#Month").click(function() { 
 
    picker.data("DateTimePicker").format('M-YYYY'); 
 
    picker.data("DateTimePicker").viewMode('months'); 
 

 
}); 
 
$("#Date").click(function() { 
 
    picker.data("DateTimePicker").format('DD-MM-YYYY'); 
 
    picker.data("DateTimePicker").viewMode('days'); 
 

 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="form-group"> 
 
    <div class="input-group date" id="datetimepicker3"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <button id="Month" class="btn btn-default">Month</button> 
 
    <button id="Date" class="btn btn-default">Date</button> 
 
</div>