how to change bootstrap datepicker month view to display quarters

Question

I have an application where i have to submit monthly reports and quarterly reports. I am using the bootstrap-datepicker for the monthly report, and I want to keep the same s

Answer 1

a litte improvement and fix a issue when changing quarter typing in the input.

remove

.on("show", function(event) {
  $(".month").each(function(index, element) {
  if (index > 3) $(element).hide();
  });
 });

add css

 .datepicker-months table tbody tr td span:nth-child(1n + 5) {
 background: red;
 display: none;
 }

Answer 2

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/

Answer 3

React Datepikcer has Quarter Picker option https://reactdatepicker.com/