Select2 With DatePicker

This is a custom control usibg select2 & datepicker Developed By Ravi Makwana [email protected]

by RaviMakwana

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<div id="banner-message">
   <p>SELECT 2 With Date Picker</p>
   <div class="input-group col-md-12" style="width:200px">
      <div class=" date" id="js-date" style="position: absolute;width: 35px;right: -25px; top: -36px; z-index: 1;">
         <input type="text" id="txtDate" style="width: 0px;height: 0px;margin: -2px;visibility: hidden;">
         <div class="input-group-addon" style="    height: 51px;">
            <span class="glyphicon glyphicon-th"></span>
         </div>
      </div>
      <select id="ddlDate" class="form-control" multiple />

   </div>
</div>

CSS

body {
   background: #20262E;
   padding: 20px;
   font-family: Helvetica;
}

#banner-message {
   background: #fff;
   border-radius: 4px;
   padding: 20px;
   font-size: 25px;
   text-align: center;
   transition: all 0.2s;
   margin: 0 auto;
   width: 400px;
}

button {
   background: #0084ff;
   border: none;
   border-radius: 5px;
   padding: 8px 14px;
   font-size: 15px;
   color: #fff;
}

#banner-message.alt {
   background: #0084ff;
   color: #fff;
   margin-top: 40px;
   width: 200px;
}

#banner-message.alt button {
   background: #fff;
   color: #000;
}

JavaScript

$(document).ready(function() {
    
    $('#ddlDate').select2({
       placeholder: "Select Data",
       tags: true,
       tokenSeparators: [",", " "]
    })
    $('#js-date').datepicker({
                autoclose: true,
                minViewMode: 1,
                format: 'M-yyyy'
            }).on('changeDate', function(){
       var isDateExist = false;
       
       if($('#ddlDate').val().indexOf($("#dtVersionDate").val()) != -1) 
          isDateExist = true; 
       
       if(isDateExist) 
          return;
       $("#ddlDate").append('<option value="'+$('#txtDatetxtDatetxtDate').val()+'" selected>'+$('#txtDate').val()+'</option>')
});

 })