合并 Bootstrap 日期选择器和输入标签答案

【问题标题】：Merging Bootstrap datepicker and input tags合并 Bootstrap 日期选择器和输入标签
【发布时间】：2017-05-21 04:19:06
【问题描述】：

Bootstrap 提供了日期库和标签库，我想合并这些库，以便用户选择多个日期，看起来应该添加标签。

标签的Jquery：-

        $("#ContentPlaceHolder1_txtSkipDate").tagsinput({
            maxTags: 15,
            trimValue: true,
            confirmKeys: [13],
            allowDuplicates: false,
            onTagExists: function (item, $tag) {
                alert('Tag already exists')
                $tag.hide.fadeIn();
            }
        });

引导日期选择器：-

    $('.BootdateMulti').datepicker({
        multidate: true,
        format: 'mm/dd/yyyy'
    });

【问题讨论】：

我不确定我是否理解您的问题，但听起来您的目标是 class 而不是 id
不，它们实际上是一样的，我想要的是引导日期选择器可以选择多个用逗号分隔的日期，我想要标签的形式

标签： jquery twitter-bootstrap twitter-bootstrap-3 datepicker bootstrap-tags-input

【解决方案1】：

试试这个。

$(document).ready(function(){

$('#inputTags').tagsinput({
    typeaheadjs: {
        minViewMode: 2,
        format: 'yyyy',
        multidate: true,
        endDate: '+0y',
        startDate: '2016'
    }
});
 $('#yearPicker').datepicker({

changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    format: 'yyyy',
    multidate: true,
    endDate: '+0y',
    startDate: '2016',
    onSelect: function(dateText) {
    $('#inputTags').tagsinput('add', dateText);
  }
});


});

.bootstrap-tagsinput input[type="text"]{
    display:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>


<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"  required>
                 <input class='tags' type="hidden" id="inputTags" data-role="tagsinput" style="display:none">
            </div>
        </div>



    </form>
<div/>

【讨论】：