如何更改引導日期選擇器月視圖來顯示宿舍

Question

我有一個應用程序，我必須提交月度報告和季度報告。我爲月度報告使用了bootstrap-datepicker，並且我希望在應用程序中保持相同的標準，因此如果我避免使用選擇框來顯示宿舍，那將是非常好的。 這是當你在月視圖模式是什麼引導提供

這就是我想要當它選擇做

，所有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>' 

所有幫助表示讚賞

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

}); 

使用CSS：

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

例子：http://jsfiddle.net/4mwk0d5L/1/

Answer 2

試試看：http://www.daterangepicker.com/還有http://bootstrap-datepicker.readthedocs.org/en/release/options.html#multidate
在第一個中，您將能夠自定義日期選擇器和日期選擇器的選擇範圍。

希望你的問題解決了。