jak zmienić widok miesiąca datepicker w celu wyświetlenia kwartałów

Question

Mam aplikację, w której muszę składać raporty miesięczne i raporty kwartalne. Używam bootstrap-datepicker do raportu miesięcznego i chcę zachować te same standardy w mojej aplikacji, więc byłoby wspaniale, gdybym unikał używania okna wyboru do wyświetlania kwartałów. To co oferuje bootstrap, gdy jesteś w trybie podglądu na miesiąc

I to jest to, co chcę zrobić

Kiedy jest wybrany, wszystkie 3 miesiące kwartału będą być wybranym.

Sprawdziłem plik bootstrap-datepicker.js i widziałem tylko kod generacji stół, który był następujący:

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>'; 

aw zmiennej DPGlobal były szablony:

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>' 

Cała pomoc jest mile widziana

Answer 1

Można 'wynaleźć' innym języku:

$.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(); 
    }); 

}); 

z CSS:

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

przykład: http://jsfiddle.net/4mwk0d5L/1/

Answer 2

Spróbuj wyszukać: http://www.daterangepicker.com/, a także http://bootstrap-datepicker.readthedocs.org/en/release/options.html#multidate
w pierwszej będzie można dostosować zakres wyboru datepicker, a także datepicker też.

Mam nadzieję, że problem został rozwiązany.