【问题标题】:how to Display specific months in boostrap datepicker如何在引导日期选择器中显示特定月份
【发布时间】:2016-10-19 05:49:08
【问题描述】:

我使用只有月份选项的日期选择器,但我需要为这个日期选择器显示一些月份,例如(5 月,11 月)

我使用以下代码

$('.month-year').datepicker({
      format: "mm-yyyy",
      viewMode: "months", 
      minViewMode: "months"
})

电流输出

*从上方显示仅几个月(5 月、11 月)。

【问题讨论】:

  • 那么,您想禁用 2 月到 11 月吗?
  • 仅显示五月和十一月的月份

标签: javascript jquery twitter-bootstrap datepicker


【解决方案1】:

我不确定您是想让其他月份处于非活动状态还是对日期选择器完全隐藏它们,所以我已经包含了这两个选项。该演示目前将它们完全隐藏。

var monthsToShow = ['May', 'Nov'];

$('#example1').datepicker({
  format: "MM yyyy",
  minViewMode: 1,
  autoclose: true
}).on("show", function(event) {
  $(".month").each(function(index, element) {

    var el = $(element);

    // to make other months inactive use this:
    if ($.inArray(el.text(), monthsToShow) >= 0)
      el.removeClass('disabled');
    else
      el.addClass('disabled');

    // to hide inactive months use this:
    if ($.inArray(el.text(), monthsToShow) >= 0)
      el.show();
    else
      el.hide();    
  });
});

这是小提琴:http://jsfiddle.net/awv3cx4x/

【讨论】:

  • 这个解决方案不算多年吧?意思是,不能设置每个选定年份禁用不同的月份。
【解决方案2】:

你可以使用 beforeShowDay 事件监听器

$( "#datepicker" ).datepicker({
  beforeShowDay: disableSpecificWeekDays
});

var monthsToDisable = [1, 2, 3];

function disableSpecificWeekDays(date) {
    var month = date.getMonth();
    if ($.inArray(month, monthsToDisable) != -1) {
        return [false];
    }
    return [true];
}

DEMO

【讨论】:

  • OP 正在寻找 Bootstrap Datepicker 而不是 jQuery Datepicker
  • @Newbee Dev:代码不工作。我使用引导日期选择器
【解决方案3】:

试试@J Santosh 的这个答案

https://stackoverflow.com/a/32103637/6952155

这是小提琴

http://jsfiddle.net/santoshj/z2v31Leo/3/

sn-p

$(document).ready(function() {
    
    var dateStart = new Date();
dateStart.setDate(dateStart.getDate()-1);
    var dp = document.getElementById("datepicker1");

    $("#datepicker1").datepicker( {
        format: "mm-yyyy",
        startView: "months", 
        minViewMode: "months",
        startDate: dateStart,       
        datesDisabled: dp.dataset.datesDisabled.split()
    }).datepicker("setDate",null);
$("#datepicker1").on('changeMonth',function(date){
console.log(date.date.getMonth()+1);
})
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="modal-body">
 <div class="input-append date" id="datepicker1" data-date="Aug-2015" data-date-format="mm-yyyy" data-dates-disabled="Sep-2015,Oct-2015" style="display:inline-block; font-weight:bold;">
  Check In: <input  type="text" readonly="readonly" name="date1" >
  <span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span>      
 </div>       
</div>  

【讨论】:

  • 我只需要显示 5 月和 11 月。
  • 您可以编辑该代码。我已经给了你禁用月份的工作代码为什么不玩呢?您期望得到的答案可以为您提供所需的确切输出吗?努力的人。
猜你喜欢
  • 2017-08-30
  • 1970-01-01
  • 1970-01-01
  • 2015-05-01
  • 2012-05-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-23
相关资源
最近更新 更多