Set Current Date as Selected in Bootstrap datepicker

Question

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

Answer 1

Im using bootstrap datepicker. below code worked for me:

$('#my-datepicker').datepicker('setDate', 'now');

Answer 2

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>

Answer 3

The problem in selecting currentdate when using minDate : moment() .
The solution is to use below code for assigning datetimepicker:

$('#datetimepicker6').datetimepicker({ 
    format: 'DD/MM/YYYY', 
    minDate: moment().millisecond(0).second(0).minute(0).hour(0),
    clear : false 
});

Answer 4

This works for me

$("#order_date").datepicker( {
   autoclose: true,
});

var orderDate = '2021-03-05';
$('#order_date').datepicker('update', new Date(Date.parse(orderDate)));

Reference

Answer 5

 $(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>