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>



    </form>
<div/>

以下是我实现的JQuery两个功能。

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

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

为什么此代码段不起作用？有人可以帮我吗？

Answer 1

为此，您可以尝试以下方法：

<div class="form-group datePicker">
     <label for="deliveryDate" class="bmd-label-floating">Delivery Date</label>
     <input type="text" class="form-control datepicker" value="12/07/2018" name="deliveryDate" id="deliveryDate">
     <i class="fa fa-calendar" aria-hidden="true"></i>
</div>

添加以下脚本和html上方的脚本，以使其正常工作

(function($) {
  $(".datepicker").datepicker({
      changeMonth: true,
      changeYear: true
  });
})(jQuery)

Answer 2

$(document).ready(function(){

$('#yearPicker').tagsinput({
    typeaheadjs: {
        minViewMode: 2,
        format: 'yyyy',
        multidate: true,
        endDate: '+0y',
        startDate: '2016'
    }
});
$('#yearPicker').on('beforeItemRemove', function(event) {
  console.log("Deleting");

});
 $('.bootstrap-tagsinput input[type="text"]').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    format: 'yyyy',
    multidate: true,
    endDate: '+0y',
    startDate: '2016',
    onSelect: function(dateText) {
       $('#yearPicker').tagsinput('add', dateText);
       $('.bootstrap-tagsinput input[type="text"]').datepicker('setDate', null);
  }
});


});

#yearPicker{
 min-width:200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<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" data-role="tagsinput"  required>
               
            </div>
        </div>



    </form>
<div/>

这是您的解决方案。首先创建输入标签，然后使用此选择器.bootstrap-tagsinput input[type="text"]创建日期选择器

我想要在jQuery中为日期选择器输入Bootstrap标签

2 个答案: