Question

47

Set Current Date as Selected in Bootstrap datepicker

rated 0 times [ 54] [ 7] / answers: 1 / hits: 81028 / 9 Years ago, fri, january 22, 2016, 12:00:00

I am using bootstrap-datepicker in my code. How Do I select current date in JavaScript and show it as selected?

After research this is code I am using but current day does not appear as selected:

var today = moment();



datepicker1.datepicker({

    endDate: today.toDate()

}); 



datepicker2.datepicker({

    startDate: today .toDate(),

    endDate: today.toDate()

});



datepicker1.datepicker('setDate', today.toDate());

datepicker2.datepicker('setDate', today.toDate());



datepicker1.datepicker('update');  //update the bootstrap datepicker

datepicker2.datepicker('update');

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

catrinas

Add To Favorites

Follow

Total Points: 587

Total Questions: 100

Total Answers: 105

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

answered 9 Years ago nestorjarettg · Accepted Answer

No idea about the code you are using and without HTML markup doesn't make much sense,

Here is a working example of what you are after

$(document).ready(function() {

  var date = new Date();

  var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

  var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());



  $('#datepicker1').datepicker({

format: mm/dd/yyyy,

todayHighlight: true,

startDate: today,

endDate: end,

autoclose: true

  });

  $('#datepicker2').datepicker({

format: mm/dd/yyyy,

todayHighlight: true,

startDate: today,

endDate: end,

autoclose: true

  });



  $('#datepicker1,#datepicker2').datepicker('setDate', today);

});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script>

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css />

<script src=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js></script>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css />

<div class=row>

  <div class=col-lg-2>

<div class=panel>

  <fieldset>

    <div class=form-group>

      <label for=datepicker1>Date</label>

      <input type=text class=form-control id=datepicker1>

    </div>

  </fieldset>

  <fieldset>

    <div class=form-group>

      <label for=datepicker2>Date2</label>

      <input type=text class=form-control id=datepicker2>

    </div>

  </fieldset>

</div>

  </div>

</div>