setting start date limit in bootstrap datepicker

Question

Update:

Updated date format in HTML and assigned today's date to data, although date range limit not restricting.

New fiddle: http://jsfiddle.net/D9Xav/143/

==========

I'm trying to a create a datepicker which allows the user to select a year and month. Currently, I'm confused as to why the start month is 2013, and why the start date limit is not preventing me to go beyond x year?

Here's the code: http://jsfiddle.net/D9Xav/140/

Docs:

• http://www.eyecon.ro/bootstrap-datepicker/
• https://github.com/eternicode/bootstrap-datepicker

Code here because rules:

<div id="dpMonths" class="input-append date" data-date-minviewmode="months"
    data-date-viewmode="years" data-date-format="mm-yyyy"
>
    <input type="text" readonly=""> 
    <span class="add-on">
        <i class="icon-th"></i>
    </span>
</div>

$('#dpMonths').data({
    date: '01/01/2000'
});

$('#dpMonths').datepicker('update');

$('#dpMonths').datepicker({
    startDate: '+10y'
}).on('changeDate', function (ev) {
    console.log(ev.date);
});

I set the datepicker data, because it'll break otherwise, wasn't sure how to get round it/nor do I know why it get's overwritten with today's date/month.

Solution

It looks like the date value 01/01/2000 needs to be in the same format as the date format you chose: mm-yyyy. So it needs to be 01-2000.

$('#dpMonths').data({
    date: '01-2000'
});

You could add that value into your HTML as a data attribute instead though, e.g. data-date="01-2000"

Once you make that change, the date limit will also work.

[edit] After you've updated to the new version, change your javascript part to just this:

$('#dpMonths')
    .datepicker({
        startDate: '-3y',
        format: 'mm-yyyy'
})
    .on('changeDate', function (ev) {
    console.log(ev.date);
});

Fiddle: http://jsfiddle.net/SdZBF/5/

Comments

[Michael]

Thanks for pointing out the date format issue, it's one issue fixed, although the date limit doesn't work for me? I updated the date format in the html and assigned today's date as the data. jsfiddle.net/D9Xav/143

[frostyterrier]

It looks like the version of the file you're using is outdated and doesn't even have startDate in it. Try downloading the newest version from here: github.com/eternicode/bootstrap-datepicker/blob/master/js/…

[frostyterrier]

The version you have is still the old one. It works with the new one. Check my updated answer and my fiddle.

[Michael]

Now it's on day view! I changed my mind with the restrictive start date, looks a bit weird when you can't select certain years, for usability sake, I'll leave it without the restriction. Thanks a lot though.

[frostyterrier]

If you add minViewMode: 'months' to the options it will be in month mode again.