javascript - Bootstrap datepicker setting startdate fails - Stack Overflow

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.

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.

• javascript
• twitter-bootstrap
• datepicker
• bootstrap-datepicker

Share Improve this question Follow edited Nov 21, 2016 at 11:13 VincenzoC 31.5k1212 gold badges100100 silver badges121121 bronze badges asked Nov 21, 2016 at 10:01 Nanou PonetteNanou Ponette 1,39244 gold badges2424 silver badges4747 bronze badges 3

• @GeorgeLee Does not work. If I hardcode the date it does work with "01/12/2016" – Nanou Ponette Commented Nov 21, 2016 at 10:22
• 1 So if you log the value of "this" it turns out to be the document so you'll have to replace it with $("#StartDate").data("startdate") – George Commented Nov 21, 2016 at 10:24
• 1 Note that the datepicker supports data attributes init too, so in your case you can use data-date-start-date instead of data-startdate – VincenzoC Commented Nov 21, 2016 at 10:31

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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" 

The datepicker supports data attributes initialization, so you can use data-date-start-date in your HTML instead of data-startdate.

Here a working example:

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

<link href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.nl.min.js"></script>

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

Note that since you are using ponent markup, data-date-* attributes must be on the div instead of on th input, moreover your selector should be $(".input-group.date") instead of $(".input-group.date input").

It does not work because $(this) in the startDate option is not a reference to the input element. You should use .each and set the datapicker for all of the elements in the selector one by one:

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

Firstly, be sûr to have the good value of your date data variable, for example by printing it just before constructing the datePicker.

Then, when you are sûr to have the good value with the good format, you can pass it to the startDate attribute :

• By giving the date string that must be parsable with "format"
• OR by constructing the Date object as flow : new Date(yyyy,mm,dd) (by splitting the content of your data variable).

I hope this help you.