jQuery UI DateRangePicker startDate and endDate on load

Question

I have embedded the jQuery UI DateRangePicker from Tamble jquery-ui-daterangepicker

And it works as expected but I would like to add pre selected range when present onload to it. As per API description I have tried the option setRange but either I am missing something or my start and end formating is not correct.

CodePen Example

JS

$(function() {
    $("#e1").daterangepicker({
    initialText : 'Select period...',   
    setRange({"start":"2016-11-02", "end":"2017-01-20"}) // I tried different variations with and without quotes as well

    });
});

HTML

<input id="e1" name="e1" >

Answer 1

setRange is a Method, not a option. So maybe this code works:

$(function() {
    $("#e1")
    .daterangepicker({
        initialText : 'Select period...'
    })
    .daterangepicker('setRange', {start:"2016-11-02", end:"2017-01-20"});
});

Look at the example on the docs: https://tamble.github.io/jquery-ui-daterangepicker/#programmatic

EDIT: it looks like that you always need a new Date(); object for it. So Your Code should be:

$(function() {
    $("#e1")
    .daterangepicker({
        initialText : 'Select period...'
    })
    .daterangepicker('setRange', {
      start: new Date("2016-11-02"), 
      end: new Date("2017-01-20")
    });
});

Answer 2

You have putted attributes inside " ". Replcae your jQuery with this::

$(function() {
    $("#e1").daterangepicker({
    initialText : 'Select period...',   
    setRange({start:"2016-11-02", end:"2017-01-20"})    
    });
});

Hope it will work.