2

I am trying to disable months in a datepicker using the option datesDisabled. According to the docs it should work by passing an array of strings in the format of what I'm using for the datepicker but I can't get it to work.

HTML:

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

Javascript:

var dateStart = new Date(); dateStart.setDate(dateStart.getDate()-1); $( document ).ready(function() { var dp = document.getElementById("datepicker1"); $("#datepicker1").datepicker( { format: "mm-yyyy", startView: "months", minViewMode: "months", startDate: dateStart, datesDisabled: dp.dataset.datesDisabled.split() }).datepicker("setDate",null); });

Update:

It doesn't look like this will get answered so I decided to try and do this by finding all of the months and changing them to the disabled class. The problem is that I can't detect the clicks to be able to get the year of the current calendar.

HTML of the datepicker header:

 <tr> <th style="visibility: hidden;" class="prev">«</th> <th colspan="5" class="datepicker-switch">2015</th> <th style="visibility: visible;" class="next">»</th> </tr>

Javascript:

$("th.next:first").click(function(){ var currentYear = $("th.datepicker-switch:first").html(); console.log("current year is " + currentYear); // nothing happens here });

What's the correct way to detect clicks on elements inside of the datepicker?

Improve this question
11
  • works for me jsfiddle.net/z2v31Leo Commented Aug 18, 2015 at 22:12
  • I checked your Fiddle and Sep 2015 and Oct 2015 are still enabled? Commented Aug 18, 2015 at 23:02
  • oh. i didn't check that. will update the fiddle in some time. a little busy now Commented Aug 18, 2015 at 23:25
  • ok so i've been trying to work on the fix for your issue but m having a hard time. i see that you've updated your question and you're looking for a way to detect click events inside the datepicker. you can use the changeDate event. try this .on('changeDate', function (ev) { console.log(ev); }); Commented Aug 19, 2015 at 17:19
  • Updated @Sushil fidlde --> jsfiddle.net/SantoshPandu/z2v31Leo/2 Commented Aug 19, 2015 at 17:20

3 Answers 3

Reset to default
2

You can use the datepicker's show event to disable unavailable months:

var datesToDisable = $('#datepicker1').data("datesDisabled").split(','); // or... // var datesToDisable = ["Sep-2015", "Oct-2015"]; //var dateStart = new Date(); //dateStart.setDate(dateStart.getDate()-1); $('#datepicker1').datepicker({ format: "mm-yyyy", startView: "months", minViewMode: "months", //startDate: dateStart //datesDisabled: dp.dataset.datesDisabled.split() }).on("show", function(event) { var year = $("th.datepicker-switch").eq(1).text(); // there are 3 matches $(".month").each(function(index, element) { var el = $(element); var hideMonth = $.grep( datesToDisable, function( n, i ) { return n.substr(4, 4) == year && n.substr(0, 3) == el.text(); }); if (hideMonth.length) el.addClass('disabled'); /* To hide those months completely... if (hideMonth.length) el.hide(); */ }); });

Here's an example: https://jsfiddle.net/zadaey92/1/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Had similar issue to disable months and found shorter solution with beforeShowMonth option:

var monthsToDisable = ['2019-09']; $('#datepicker').datepicker({ format: "yyyy-mm", startView: "months", minViewMode: "months", beforeShowMonth: function(date) { var formattedDate = moment(date).format('YYYY-MM'); return $.inArray(formattedDate, monthsToDisable) < 0; } );
Improve this answer

Comments

0

In the datepicker plugin datesDisabled takes only dates, NOT MONTHS. check the below code

if (this.o.datesDisabled.length > 0 && $.grep(this.o.datesDisabled, function(d){ return isUTCEquals(date, d); }).length > 0) { cls.push('disabled', 'disabled-date'); }

so if you pass a month in format sep-2015 the function isUTCEquals returns false. So the Months will not be disabled.
above code is present in the below JS.

latest version JS -> http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js

To detect clicks inside datepicker

there are some events in this plugins -->http://bootstrap-datepicker.readthedocs.org/en/stable/events.html#events

for example :changeMonth event.

$("#datepicker1").on('changeMonth',function(date){ console.log(date.date.getMonth()+1); }) });

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

Improve this answer

1 Comment

J Santosh - I tried the few events that are available and they wont work for me. I don't even care if someone clicks a month because I only want to show months that are available for rent. The only thing that I need to get through is reading the year when next or prev are clicked.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.