CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
Mahesh Jagdale
Mahesh Jagdale

Reputation: 174

how to Display specific months in boostrap datepicker

I use date picker with only option with months but i need to display some months for this date picker like (May ,Nov)

I use Following code:

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

Current Output
enter image description here

*From Above Display only months (May ,Nov).

Upvotes: 0

Views: 1216

Answers (3)

Royts
Royts

Reputation: 511

try this answer from @J Santosh

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

this is the fiddle

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

snippet 

$(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>

Upvotes: 0

K Scandrett
K Scandrett

Reputation: 16540

I wasn't sure if you want to just make the other months inactive or to hide them completely from the date picker, so I've included both options. The demo currently hides them completely.

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

Here's the fiddle: http://jsfiddle.net/awv3cx4x/

Upvotes: 1

Beginner
Beginner

Reputation: 4153

you can use beforeShowDay event listener

$( "#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

Upvotes: 0

Related Questions