Javascript HTML、CSS、JS日历添加

我在我的网页上有这个搜索栏，但是当我点击日历时，什么都没有发生，你知道我应该在那里添加什么吗，这样日历就会以某种方式弹出

这里还有一个用于搜索栏的脚本：

    <!-- Search -->
        <script>
        $(window).ready(function(){
              var nowTemp = new Date();
              var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
              var checkin = $('#checkin').datepicker({
                onRender: function(date) {
                  return date.valueOf() < now.valueOf() ? 'disabled' : '';
                }
              }).on('changeDate', function(ev) {
                if (ev.date.valueOf() > checkout.date.valueOf()) {
                  var newDate = new Date(ev.date)
                  newDate.setDate(newDate.getDate() + 1);
                  checkout.setValue(newDate);
                }
                checkin.hide();
                $('#checkout')[0].focus();
              }).data('datepicker');
              var checkout = $('#checkout').datepicker({
                onRender: function(date) {
                  return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
                }
              }).on('changeDate', function(ev) {
                checkout.hide();
              }).data('datepicker');
            });
        </script>

$（窗口）.ready（函数（）{
var nowTemp=新日期（）；
var now=新日期（nowTemp.getFullYear（），nowTemp.getMonth（），nowTemp.getDate（），0,0,0）；
var checkin=$（'#checkin'）。日期选择器({
onRender:函数（日期）{
返回日期.valueOf（）checkout.date.valueOf（））{
var newDate=新日期（ev.Date）
newDate.setDate（newDate.getDate（）+1）；
checkout.setValue（newDate）；
}
checkin.hide（）；
$（'#checkout'）[0]。焦点（）；
}).数据（“日期选择器”）；
var checkout=$（“#checkout”）.datepicker({
onRender:函数（日期）{
返回日期。valueOf（）Jquery ui可以帮助您。
以下是解决方案：

<div class="input-group">
   <input type="text" class="form-control" id="checkin" placeholder="Check in">
   <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>