Bootstrap-datepicker how to put date into input field

Question

Im wondering how I can put the selected date with bootstrap-datepicker into an input field when the calender is embedded. Somehow I can't get it to work.

Right now I have this:

<script>
$('#sandbox-container div').datepicker({
    weekStart: 1,
    startDate: "-",
    maxViewMode: 0,
    clearBtn: true,
    language: "nl",
    orientation: "top auto",
    daysOfWeekDisabled: "0,1,2,3,4",
    calendarWeeks: true,
    todayHighlight: true
});
</script>

And in the template I have:

<div id="sandbox-container">
  <div id="datepicker"></div>
</div>

However when i'm trying to do something like:

<script>
$('#sandbox-container input').datepicker({
    weekStart: 1,
    startDate: "-",
    maxViewMode: 0,
    clearBtn: true,
    language: "nl",
    orientation: "top auto",
    daysOfWeekDisabled: "0,1,2,3,4",
    calendarWeeks: true,
    todayHighlight: true
});
</script>

and:

<div id="sandbox-container">
  <input type=text id="datepicker">
</div>

Its is only showing a input field. What am I doing wrong?

Answer 1

Two things:

1) Presumably you know that the datepicker comes with JQueryUI. However, if you didn't know this then you'll need to include that under JQuery first. For example:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

2) Secondly, it looks like your selector isn't written properly. This should work:

<script>
  $(function() {
    $("#sandbox-container input").datepicker({
      weekStart: 1,
      startDate: "-",
      maxViewMode: 0,
      clearBtn: true,
      language: "nl",
      orientation: "top auto",
      daysOfWeekDisabled: "0,1,2,3,4",
      calendarWeeks: true,
      todayHighlight: true
    });
  });
</script>