Bootstrap-datepicker, как поставить дату в поле ввода

Question

Мне интересно, как я могу поместить выбранную дату с помощью bootstrap-datepicker в поле ввода, когда календар включен. Почему-то я не могу заставить его работать.

Сейчас у меня есть это:

<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> 

И в шаблоне у меня есть:

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

Однако, когда я пытаюсь сделать что-то вроде:

<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> 

и :

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

В нем отображается только поле ввода. Что я делаю не так?

Answer 1

Две вещи:

1) Предположительно вы знаете, что DatePicker поставляется с JQueryUI. Однако, если вы этого не знали, тогда вам нужно включить это под JQuery. Например:

<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) Во-вторых, похоже, что ваш селектор не написан правильно. Это должно работать:

<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>