CODEWITHSUNDEEP
htmlcssdatepicker
danielori
danielori

Reputation: 63

Date picker on the same css class

I have a problem with my homepage. Events can be created with the following datas: - Start - End - Description

I use bootstrap datepicker with this code:

$('.form-control').datepicker({
      maxViewMode: 0,
      keyboardNavigation: false,
      forceParse: false,
      daysOfWeekDisabled: "0,6",
      daysOfWeekHighlighted: "0,6",
      todayHighlight: true,
      format: 'yyyy-mm-dd'
    });

And here is my html:

<!-- EndTime-->
  <div class="form-group">
    <label class="col-md-4 control-label">End</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    <input id="end" name="end" placeholder="Fill out!" class="form-control"  type="text">
      </div>
    </div>
  </div>

  <!-- Description -->
  <div class="form-group">
    <label class="col-md-4 control-label">Description</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
    <input id="description" name="description" class="form-control"  type="text">
      </div>
    </div>
  </div>

Of course the date picker appears in the description field too. I'd like to avoid that, but I would like to keep the "form-control" class.

Upvotes: 0

Views: 1968

Answers (1)

Geo George
Geo George

Reputation: 359

Please try this..



    $('.form-control[name="end"]').datepicker({
    maxViewMode: 0,
    keyboardNavigation: false,
    forceParse: false,
    daysOfWeekDisabled: "0,6",
    daysOfWeekHighlighted: "0,6",
    todayHighlight: true,
    format: 'yyyy-mm-dd'
    });

https://jsfiddle.net/geogeorge/jk5udey2/2/

Upvotes: 4

Related Questions