how to change bootstrap datepicker month view to display quarters
You could 'invent' another language:
$.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();
});
});
With CSS:
.datepicker table tr td span {
width: 100%;
}
Example: http://jsfiddle.net/4mwk0d5L/1/