Bootstrap datepicker setting startdate fails

Question

I am using the Bootstrap Datapicker script (Link here) and having problems setting the startdate.

Option: startDate

Date or String. Default: Beginning of time

The earliest date that may be selected; all earlier dates will be disabled.

Date should be in local timezone. String must be parsable with format.

JavaScript:

function initializeDatePicker() {
    if ($.isFunction($.fn.datepicker)) {
        var datepickerLang = lang;
        if (datepickerLang === "nl") {
            datepickerLang = "nl-BE";
        }

        $(".input-group.date input").datepicker({
            autoclose: true,
            todayBtn: "linked",
            clearBtn: true,
            todayHighlight: true,
            language: datepickerLang,
            format: "dd-mm-yyyy",
            startDate: $(this).data("startdate")
        });
    }
}

HTML:

<div class="input-group date small">
    <input id="StartDate" class="form-control" name="StartDate" value="" data-is-required="True" data-startdate="01-12-2016" type="text">
    <div class="input-group-addon">
        <span class="fa fa-calendar"></span>
    </div>
</div>

What does work?

If I hardcode the startdate to:

startDate: new Date() => today

startDate: "01-12-2016"

What does not work?

If I try to get the date from my data attribute nothing works.

startDate: new Date($(this).data("startdate")) => returns 'Date Invalid'

startDate: $(this).data("startdate")

I don't understand what is wrong and how I can fix it.

Answer 1

The problem is you're using

$(this).data("startdate")

in this instance "this" is set to the document so it'll return null/undefined. What you need to do is change it to this

$("#StartDate").data("startdate")

----------------Edit---------------

If you want to use this once on a page but have multiple datepickers you can use the data attributes insead, so remove the startDate from the options

$(".input-group.date input").datepicker({
    autoclose: true,
    todayBtn: "linked",
    clearBtn: true,
    todayHighlight: true,
    language: datepickerLang,
    format: "dd-mm-yyyy",
});

And in your html add this attribute on the datapickers

data-date-start-date="01-12-2016"