Я хочу ввод тегов Bootstrap для выбора даты в jQuery - PullRequest
Новая
       23

Я хочу ввод тегов Bootstrap для выбора даты в jQuery

0 голосов
/ 09 октября 2018

В моем проекте я реализовал Выбор даты.Выбранные годы хотят, чтобы их вводили в виде тегов.Вот сегменты кода, которые я реализовал. 

<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'
    }
});

Почему этот сегмент кода не работает?кто-нибудь может мне помочь здесь?

Ответы [ 2 ]

0 голосов
/ 09 октября 2018 

$(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"] для создания выбора даты

0 голосов
/ 09 октября 2018

Для этого вы можете попробовать следующее: 

<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)
...