They should be working as in this example:





    $('.datepicker').datepicker({
        startDate: '-3d'
    })

    $(document).on('click', '.fa-calendar', function(){
        $(this).closest('.input-group')
               .find('input.form-control')
               .datepicker("show");
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <p>start with datepicker:</p>
    <input class="form-control datepicker" type="text" /><br/>

    <p>start with icon:</p>
    <div class="input-group">
      <input type="text" class="form-control" >
      <span class="input-group-addon" >
        <i class="fa fa-calendar"></i>
      </span>
    </div>




**References**: 

* [datepicker.css][css]
* [bootstrap-datepicker.js][js]
* [Docs][docs]

[css]: //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css
[js]: //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js
[docs]: http://eternicode.github.io/bootstrap-datepicker/

I'm using bootstrap-datepicker, and I'm getting this error message:

> Uncaught TypeError: Cannot read property 'split' of undefined 

I don't think I have an old version of datepicker.js because I got the cdn from their website. 

This is how I'm currently instantiating the datepicker and click event:

    j('.fa-calendar').datepicker({
        startDate: '-3d'
    })

    j(document).on('click', '.fa-calendar', function(){
        j('.fa-calendar').datepicker("show");
    }); 

Datepicker date undefined

This is a little bit of a hack job, but you can conditionally hide and show the elements to avoid an infinite loop.  On hide, check if this is the first time attempting to hide.  If the input does not have focus (meaning they have used the dropdown and we've lost our tab order, then refocusing will cause the picker to show.  We'll also catch this show and hide from there, entering back into our original code.  We'll pass back and forth a property on the object so we can manage state.

That will look like this:



    $(".datepicker").datepicker({
      autoclose: true
    })
    .on('hide', function () {
      if (!this.firstHide) {
        if (!$(this).is(":focus")) {
          this.firstHide = true;
          // this will inadvertently call show (we're trying to hide!)
          this.focus(); 
        }
      } else {
        this.firstHide = false;
      }
    })
    .on('show', function () {
      if (this.firstHide) {
        // careful, we have an infinite loop!
        $(this).datepicker('hide'); 
      }
    })

**Stack Snippet Demo**:






    $(".datepicker").datepicker({
      autoclose: true
    })
    .on('hide', function () {
      if (!this.firstHide) {
        if (!$(this).is(":focus")) {
          this.firstHide = true;
          // this will inadvertently call show (we're trying to hide!)
          this.focus(); 
        }
      } else {
        this.firstHide = false;
      }
    })
    .on('show', function () {
      if (this.firstHide) {
        // careful, we have an infinite loop!
        $(this).datepicker('hide'); 
      }
    })



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>

If you initialize a [bootstrap datepicker from eternicode][0] with `autoclose: true`, two undesirable behaviors happen:

1. After the picker closes, when you tab into the next field, you'll start at the beginning of the document again.  This can be quite cumbersome on long forms.
2. Because the picker changes the value programatically, any listeners that you have that care about the blur event on the input won't behave properly.  The  blur actually occurs when you select the picker value and the input's value hasn't changed.  Then the bootstrap-datepicker programmatically updates the field so blur is never fired with the new value.

**Here's a demo in stack snippets**:  
*select any field, select a value from the picker, and then hit <kbd>Tab</kbd>





    $(".datepicker").datepicker({
      autoclose: true
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>



According to the answer to [Focus the field after selecting the jQuery UI datepicker][1],  you can tap into the `onClose` or `onSelect` events, but the [bootstrap picker doesn't offer those events][2].

Simply replacing them with `hide` doesn't seem to work either, since the refocusing will create an endless loop that always keeps the picker open any time you try to close it.




    $(".datepicker").datepicker({
      autoclose: true
    })
    .on('hide', function () {
      $(this).focus();
    });

**Stack Snippet Demo**:






    $(".datepicker").datepicker({
      autoclose: true
    })
    .on('hide', function () {
      $(this).focus();
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>



[0]: https://github.com/eternicode/bootstrap-datepicker
[1]: https://stackoverflow.com/a/20755786/1366033
[2]: http://bootstrap-datepicker.readthedocs.org/en/latest/events.html

Bootstrap datepicker return focus after select

You only pass in the options (as in `datepicker({ startDate: '+1d'})`) when you're initializing the controller.  Since it's already initialized you don't need to do that.  Instead you want to use the [`setDate()`][1] method and then pass in <del>[the javascript date representation of tomorrow][2]</del> a string representing the relative date like this:



    $('#txtDateOfJourney').datepicker('setDate', "+1d");


### Demo in Stack Snippets





    $('#btnTomorrow').click(function() {     
      $('#txtDateOfJourney').datepicker('setDate', "+1d");
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>

    <input type="text" id="txtDateOfJourney" class="datepicker" />
    <button type="button" id="btnTomorrow" class="btn btn-info">Tomorrow</button>




[1]: https://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setdate
[2]: https://stackoverflow.com/q/3674539/1366033

I have a button which sets the datepicker to tomorrow using the following code:



    $("#txtDateOfJourney").datepicker({ startDate: '+1d'});

But it's not working.

[**Here's a demo in fiddle**](http://jsfiddle.net/86k80L59/)

Any Ideas?

Bootstrap DatePicker - Setting the date to Tomorrow

If you wanted the simplicity of handling this all on the client with the native format you've chosen for the datepicker, you can just trigger the formatting by setting the date to itself on page load:



    // update and date to trigger formatting
    $('#myDate').datepicker('update',$('#myDate').datepicker("getDate"))

Alternatively, here's an extension method you can add that will reformat the date in an control when called:



    $.fn.reformatDate = function(settings) {  
      return this.each(function() {  
        $this = $(this);
        if (!$this.data('datepicker')) return 
        $this.datepicker('setDate',$this.datepicker("getDate"))
      });
    };

Then use it like this:



    $('#myDate').reformatDate();


### Demo in Stack Snippets





    $.fn.reformatDate = function(settings) {  
      return this.each(function() {  
        $this = $(this);
        if (!$this.data('datepicker')) return 
        $this.datepicker('setDate',$this.datepicker("getDate"))
      });
    };

    $(function() {
        // simulate pre-filled date from server
        $("#myDate").val(new Date());
      
        // initialize like normal
        $('#myDate').datepicker();
        
        // update date to trigger formatting
        $('#myDate').reformatDate();
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>

    <input id="myDate" type="text" class="datepicker"  />

My datepicker textbox is generated in ASP.NET MVC:

    @Html.TextBoxFor(model => model.StartDate, new {@class = "form-control datepicker", placeholder = "Pick a date...", data_date_format="mm/dd/yyyy"})

'.datepicker()` is then called:

    $().ready(function() {
        $('.datepicker').datepicker();
    });

It appears there is the format in place, just not in the beginning. 

When the page is first loaded, the textbox shows `4/24/2015 12:00:00 AM`. But when a date is picked, the format then applies and shows a date without the time stamp.

Is there any option or setting I've missed?

The date format of bootstrap-dateppicker is not effective on page load

The classes changed from Bootstrap 2 to Bootstrap 3

The [date range markup in the docs][1] is out of date for bootstrap 2:

    <div class="input-daterange">
        <input type="text" class="input-small" />
        <span class="add-on">to</span>
        <input type="text" class="input-small" />
    </div>

But if you go to the [online demo with input ranges][2], you can see the correct markup:

    <div class="input-daterange input-group">
        <input type="text" class="input-sm form-control" />
        <span class="input-group-addon">to</span>
        <input type="text" class="input-sm form-control" />
    </div>


### Demo in Stack Snippets





    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <div class="input-daterange input-group" id="datepicker">
      <input type="text" class="input-sm form-control" name="start" />
      <span class="input-group-addon">to</span>
      <input type="text" class="input-sm form-control" name="end" />
    </div>



I'll leave adding a button as an exercise for the reader, but check out how to style [input group buttons in Bootstrap][3]



[1]: http://bootstrap-datepicker.readthedocs.org/en/latest/markup.html#date-range
[2]: http://eternicode.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox
[3]: http://getbootstrap.com/components/#input-groups-buttons

I am trying to use the datepicker from the [datepicker][1] site, but the CSS is not working as it should. 

Here is my output and what I want it to look like:

![What I want it to look like vs What it actually looks like][3]


Here's a [jsFiddle here][2] and the relevant code: 



    <div class="input-daterange">
      <input type="text" class="input" value="2012-04-05" />
      <span class="add-on">to</span>
      <input type="text" class="input" value="2012-04-19" />
      <button type="submit" class="btn btn-default" id='submit'>Submit</button>
    </div>


But I can't tell what part of the css is being overridden to change the display of the datepicker. 


[1]: https://bootstrap-datepicker.readthedocs.org/en/latest/markup.html#date-range
[2]: https://jsfiddle.net/8zjh5d0u/
[3]: http://i.stack.imgur.com/coW0S.png