如何更改bootstrap datepicker月视图来显示宿舍 [英] how to change bootstrap datepicker month view to display quarters

问题描述

我有一个申请，我必须提交每月报告和季度报告。我在每月报告中使用bootstrap-datepicker，我想在我的应用程序中保持相同的标准，因此如果我避免使用选择框显示宿舍，这将是巨大的。
这是当您在月视模式下时bootstrap提供的功能。

这是我想要做的

< img src =https://i.stack.imgur.com/WL5TD.jpgalt =季度查看>

选择时，所有3个月该季度将被选中。

我查看了 bootstrap-datepicker.js 文件，我只看到表生成代码是： p>

  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 =5class =datepicker-switch>< / th& + 
'< th class =next>&＃187;< / th>'+ 
'< / tr>'+ 
'< / thead> '，
 contTemplate：'< tbody>< tr>< td colspan =9>< / td>< / tr>< / tbody>'，
 footTemplate： '< tfoot>'+ 
'< tr>'+ 
'< th colspan =7class =today>< / th& < / tr>'+ 
'< tr>'+ 
'< th c olspan =7class =clear>< / th>'+ 
'< / tr>'+ 
'< / tfoot>'
  

所有的帮助是赞赏

解决方案

你可以发明另一种语言：

  $。fn.datepicker.dates ['qtrs'] = {
天：[星期日，周末，星期二，星期三，星期四，星期五，星期六]，
 daysShort：[太阳，月亮 ，Wed，Thu，Fri，Sat]，
 daysMin：[Su，Mo，Tu，We，Th，Fr Sa]，
个月：[Q1，Q2，Q3，Q4，，，，，， ]，
 monthsShort：[Jan& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp; 2月& nbsp;& nbsp;& nbsp;& nbsp; ;& nbsp;& nbsp; Mar，四月& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;五月& nbsp;& nbsp;& nbsp;& ; & nbsp; Jun，Jul& nbsp;& nbsp;& nbsp;& nbsp& & ; 8月& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp; Sep，10月& nbsp;& nbsp;& nbsp;& nbsp& ;& nbsp; Nov& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp; Dec，，，，，， ，]，
今天：今天，
清除：清除，
格式：mm / dd / yyyy，
 titleFormat：MM yyyy ，
 / *利用与format相同的语法* / 
 weekStart：0 
}; 
 
 $（'＃example1'）。datepicker（{
格式：MM yyyy，
 minViewMode：1，
 autoclose：true，
语言：qtrs，
 forceParse：false 
}）on（show，function（event）{
 
 $（。month （index，element）{
 if（index> 3）$（element）.hide（）; 
}）; 
 
}）; 
  

使用CSS：

  .datepicker table tr td span {
 width：100％; 
} 
  

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

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 standarts in my application therefore it would be great if I avoid using a select box to display quarters. This is what bootstrap offers when you are in month view mode

And this is what I want to do

When it's selected, all 3 months of the quarter will be selected.

I checked the bootstrap-datepicker.js file and i only saw the table generation code which was:

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

and in the DPGlobal variable were the templates:

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

All the help is appreciated

解决方案

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/

这篇关于如何更改bootstrap datepicker月视图来显示宿舍的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！