ブートストラップdatetimepickerフォーマットを動的に変更する

Question

私はいくつかのイベントが発生したときにブートストラップdatetimepickerのフォーマットを更新するために使用している関数を持っています。それ以降、datetimepickerをクリックすると、新しい形式を使用してピッカーがレンダリングされます。たとえば、フォーマットをYYYYに設定すると、それは年だけが表示されます。ただし、日付ピッカーを閉じてもう一度開くと、完全なカレンダーがレンダリングされます。私は何か間違っているのですか、これはdatetimepickerのバグですか？

function updateInterval(interval) { 
    $('#interval').val(interval); 
    if (interval === 'LAST24') { 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY HH:mm:ss'); 
    } else if (interval === 'HOURLY') { 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY'); 
    } else if (interval === 'DAILY') { 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY'); 
    } else if (interval === 'WEEKLY') { 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/YYYY'); 
    } else if (interval === 'MONTHLY') { 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('YYYY'); 
    } 
} 

ドキュメントによれば、私は間違っているとはっきりしていないようです。

Answer 1

コードは問題ありません.Eonasdanのbootstrap-datetimepickerの最新バージョンのknown bugです。あなたはgithubのリンクで提案されているか、古いバージョンを使用して、次の作業のスニペットに示すように、4.17.37のように、コンポーネントコードにcurrentViewMode = 0;を設定しようとすることができます：

var jq182 = $; 
 
function updateInterval(interval) { 
 
    $('#interval').val(interval); 
 
    if (interval === 'LAST24') { 
 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY HH:mm:ss'); 
 
    } else if (interval === 'HOURLY') { 
 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY'); 
 
    } else if (interval === 'DAILY') { 
 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY'); 
 
    } else if (interval === 'WEEKLY') { 
 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/YYYY'); 
 
    } else if (interval === 'MONTHLY') { 
 
     jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('YYYY'); 
 
    } 
 
}

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

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/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="input-group date" id="endDatePicker"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div> 
 

 
<button type="button" class="btn btn-default" onclick="updateInterval('LAST24')">LAST24</button> 
 
<button type="button" class="btn btn-default" onclick="updateInterval('HOURLY')">HOURLY</button> 
 
<button type="button" class="btn btn-default" onclick="updateInterval('DAILY')">DAILY</button> 
 
<button type="button" class="btn btn-default" onclick="updateInterval('WEEKLY')">WEEKLY</button> 
 
<button type="button" class="btn btn-default" onclick="updateInterval('MONTHLY')">MONTHLY</button> 
 

 
<input type="text" id="interval" class="form-control" readonly>

Hereとhere人同じ問題を抱えていた