Nanou Ponette Nanou Ponette - 11 days ago 8
Javascript Question

Bootstrap datepicker setting startdate fails

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

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