Remove lines that consist of entirely disabled days in the past or future

[gplusdotgr]

I'm implementing a datepicker that shows a fixed period of 15 days in the future. Therefore the by design display of a entire month of the plugin is not necessary.

Would it be somehow possible to remove/hide those disabled "weeks" or if not, only render a specific duration of time ?

[Azaret]

You can by overriding the css like so:

.disabled-date {
    display: none;
}

[gplusdotgr]

@Azaret that class isn't here.

[Azaret]

Which version are you using ? It works fine in 1.5 with the demo page.

[gplusdotgr]

I just upgraded to 1.5.0.

Here's the HTML generated

<table class=" table-condensed"><thead><tr><th class="prev" style="visibility: hidden;">«</th><th colspan="5" class="datepicker-switch">November 2015</th><th class="next" style="visibility: hidden;">»</th></tr><tr><th class="dow">Mo</th><th class="dow">Tu</th><th class="dow">We</th><th class="dow">Th</th><th class="dow">Fr</th><th class="dow">Sa</th><th class="dow">Su</th></tr></thead><tbody><tr><td class="old disabled day">26</td><td class="old disabled day">27</td><td class="old disabled day">28</td><td class="old disabled day">29</td><td class="old disabled day">30</td><td class="old disabled day">31</td><td class="disabled day">1</td></tr><tr><td class="disabled day">2</td><td class="disabled day">3</td><td class="disabled day">4</td><td class="day">5</td><td class="day">6</td><td class="day">7</td><td class="day">8</td></tr><tr><td class="day">9</td><td class="day">10</td><td class="day">11</td><td class="day">12</td><td class="day">13</td><td class="day">14</td><td class="day">15</td></tr><tr><td class="day">16</td><td class="day">17</td><td class="day">18</td><td class="day">19</td><td class="day">20</td><td class="disabled day">21</td><td class="disabled day">22</td></tr><tr><td class="disabled day">23</td><td class="disabled day">24</td><td class="disabled day">25</td><td class="disabled day">26</td><td class="disabled day">27</td><td class="disabled day">28</td><td class="disabled day">29</td></tr><tr><td class="disabled day">30</td><td class="new disabled day">1</td><td class="new disabled day">2</td><td class="new disabled day">3</td><td class="new disabled day">4</td><td class="new disabled day">5</td><td class="new disabled day">6</td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table>

[Azaret]

How are you disabling the dates ?

[gplusdotgr]

I'm passing an array as such:

            var datesDisabled = [
                "07/11/2015",
                "10/11/2015"
            ];
            $('#fake-date-input').datepicker({
                autoclose: true,
                weekStart: 1,
                maxViewMode: 0,
                minViewMode: 0,
                format: 'MM dd, yyyy',
                startDate: '0d',
                endDate: '+15d',
                language: $('html').attr('lang'),
                datesDisabled: datesDisabled,
                container: '#fake-date-input'
            });

[Azaret]

Ok I see. You can use disabled then. But you'll have an issue: http://jsfiddle.net/sm6937h7/8/ I recommend you to use beforeShowDay like so: http://jsfiddle.net/sm6937h7/9/ While @acrobat will tag this as a feature request for a later version.

[vsn4ik]

@gkatsanos, datesDisabled must correspond format. For your example

var datesDisabled = [
  "November 07, 2015",
  "November 10, 2015"
];