JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="input-group date" style="width: 200px">
<input type="text" id="example1" class="form-control" style="cursor: pointer" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
CSS
body {
margin: 10px;
}
.datepicker table tr td span {
width: 100%;
}
JavaScript
$.fn.datepicker.dates['qtrs'] = {
days: ["Sunday", "Moonday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Moon", "Tue", "Wed", "Thu", "Fri", "Sat"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
months: ["Q1", "Q2", "Q3", "Q4", "", "", "", "", "", "", "", ""],
monthsShort: ["Jan Feb Mar", "Apr May Jun", "Jul Aug Sep", "Oct Nov Dec", "", "", "", "", "", "", "", ""],
today: "Today",
clear: "Clear",
format: "mm/dd/yyyy",
titleFormat: "MM yyyy",
/* Leverages same syntax as 'format' */
weekStart: 0
};
$('#example1').datepicker({
format: "MM yyyy",
minViewMode: 1,
autoclose: true,
language: "qtrs",
forceParse: false
}).on("show", function(event) {
$(".month").each(function(index, element) {
if (index > 3) $(element).hide();
});
}).on('changeDate', function() {
alert('test');
});