Как изменить начальный месяц даты загрузки для отображения кварталов

У меня есть приложение, в котором я должен представлять ежемесячные отчеты и ежеквартальные отчеты. Я использую bootstrap-datepicker для ежемесячного отчета, и я хочу сохранить одни и те же стандарты в своем приложении, поэтому было бы здорово, если бы я не использовал поле выбора для отображения кварталов. Это то, что предлагает бутстрап, когда вы находитесь в режиме просмотра месяца.

Month View Bootstrap Datepicker

И это то, что я хочу сделать

Quarterly View

Когда он будет выбран, будут выбраны все 3 месяца квартала.

Я проверил файл bootstrap-datepicker.js, и я увидел только код генерации таблицы, который был:

DPGlobal.template = '<div class="datepicker">'+
                        '<div class="datepicker-days">'+
                            '<table class=" table-condensed">'+
                                DPGlobal.headTemplate+
                                '<tbody></tbody>'+
                                DPGlobal.footTemplate+
                            '</table>'+
                        '</div>'+
                        '<div class="datepicker-months">'+
                            '<table class="table-condensed">'+
                                DPGlobal.headTemplate+
                                DPGlobal.contTemplate+
                                DPGlobal.footTemplate+
                            '</table>'+
                        '</div>'+
                        '<div class="datepicker-years">'+
                            '<table class="table-condensed">'+
                                DPGlobal.headTemplate+
                                DPGlobal.contTemplate+
                                DPGlobal.footTemplate+
                            '</table>'+
                        '</div>'+
                    '</div>';

и в переменной DPGlobal были шаблоны:

headTemplate: '<thead>'+
                        '<tr>'+
                            '<th class="prev">&#171;</th>'+
                            '<th colspan="5" class="datepicker-switch"></th>'+
                            '<th class="next">&#187;</th>'+
                        '</tr>'+
                    '</thead>',
    contTemplate: '<tbody><tr><td colspan="9"></td></tr></tbody>',
    footTemplate: '<tfoot>'+
                        '<tr>'+
                            '<th colspan="7" class="today"></th>'+
                        '</tr>'+
                        '<tr>'+
                            '<th colspan="7" class="clear"></th>'+
                        '</tr>'+
                    '</tfoot>'

Вся помощь приветствуется

Ответы

Ответ 1

Вы можете "изобрести" другой язык:

$.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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Feb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mar", "Apr&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;May&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jun", "Jul&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aug&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sep", "Oct&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nov&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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();
  });

});

С CSS:

.datepicker table tr td span {
  width: 100%;
}

Пример: http://jsfiddle.net/4mwk0d5L/1/