如何使用jQuery日期选择器优化Bootstrap输入标签

Question

我已经实现了日期选择器。因此，当我从日期选择器中选择年份时，需要在给定的输入字段内将所选的年份显示为标签

代码

<div class="panel-body">
    <form id="sbYearRevForm" class="form-horizontal" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">Year(s)<span style="color: red"> *</span></label>
            <div class="col-sm-10">
                <!-- <input type="tel" pattern='\d{9}'  id="msisdn" name="msisdn" placeholder="Subscriber No.(77xxxxxxx)" class="form-control input-sm" required> -->
                <input type="text" id="yearPicker" name="years" class="form-control input-sm" data-role="tagsinput" required>   
            </div>
        </div>

相关的jQuery功能如下。

$('#yearPicker').tagsinput({
    typeaheadjs: {
       minViewMode: 2,
       format: 'yyyy',
       multidate: true,
       endDate: '+0y',
       startDate: '2016'
    }
});
$('.bootstrap-tagsinput input[type="text"]').datepicker({
    minViewMode: 2,
    format: 'yyyy',
    multidate: true,
    endDate: '+0y',
    startDate: '2016',
    onSelect: function(dateText) {
        $('#yearPicker').tagsinput('add', dateText);
  }
});

当我实现这两个问题时。

1. 通常，标签中的右上角有一个小x按钮将其删除。根据我错过的代码。
2. 根据需求，标记必须出现在输入文本区域内。但它已经到了外面。

请参见下面的屏幕截图。有人可以建议我克服这个问题吗？谢谢。

Answer 1

我找到了答案。我要做的是仅添加

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css 

进入我的代码。