CODEWITHSUNDEEP
javascripttwitter-bootstrapdatepickerbootstrap-datepicker
Nanou Ponette
Nanou Ponette

Reputation: 1402

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.

Upvotes: 0

Views: 8090

Answers (4)

Ogi
Ogi

Reputation: 1

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")
    })
});

Upvotes: 0

Ali. L
Ali. L

Reputation: 39

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.

Upvotes: -2

VincenzoC
VincenzoC

Reputation: 31482

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/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 component 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").

Upvotes: 4

George
George

Reputation: 6739

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"

Upvotes: 4

Related Questions