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

Posted 2023-05-08

【中文标题】如何使用 jQuery 日期选择器优化引导输入标签

【英文标题】：How to optimize Bootstrap Input Tags With a jQuery Date picker

【发布时间】：2019-03-14 22:07:34

【问题描述】：

我已经实现了一个日期选择器。这样当我从日期选择器中选择一年时，选定的年份需要在给定的输入字段中显示为标签

代码

<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='\d9'  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);
  
);

当我实现这两个问题时发现。

通常在标签的右上角有一个小 x 按钮可以将其删除。根据我错过的代码。 根据要求标签需要出现在输入文本区域内。但它已经走到了外面。

请看下面的截图。谁能建议我克服这个问题？谢谢。

【参考方案1】：

我找到了答案。我所要做的就是只添加

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

进入我的代码。