CODEWITHSUNDEEP
phpjquerycodeigniter
Neha
Neha

Reputation: 13

Date picker not working on jQuery CodeIgniter

HTML:

<div class="col-md-6">
    <div class="form-group">
         <label class="control-label">Expected Date</label>
         <div class="input-group date form_datetime form_datetime bs-datetime">
            <input id="access_from" name="access_from" size="16" class="form-control" id="from" type="date">
            <span  class="input-group-addon">
               <button id="click" class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
             </span>
        </div>
    </div>   
</div>

jQuery code:

<script type="text/javascript">
    $(document).ready(function(){
        $("#click").click(function() {
            $("#access_from").datepicker("show");
        });
    });
</script>

From this code, my date picker is not opening. What am I doing wrong?

Upvotes: 0

Views: 1766

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

You are adding id attribute twice in your input element. Remove id="from" and type="date"(which has specific date formats) and use the below

 <input id="access_from" name="access_from" size="16" class="form-control" />


$(document).ready(function() {
  $("#click").click(function() {
    $("#access_from").datepicker("show");
  });
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<div class="col-md-6">
  <div class="form-group">
    <label class="control-label">Expected Date</label>
    <div class="input-group date form_datetime form_datetime bs-datetime">
      <input id="access_from" name="access_from" size="16" class="form-control"/>
      <span class="input-group-addon">
          <button id="click" class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
      </span>
    </div>
  </div>
</div>

Upvotes: 4

Related Questions