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:
JavaScript
x
17
17
1
var today = moment();
2
3
datepicker1.datepicker({
4
endDate: today.toDate()
5
});
6
7
datepicker2.datepicker({
8
startDate: today .toDate(),
9
endDate: today.toDate()
10
});
11
12
datepicker1.datepicker('setDate', today.toDate());
13
datepicker2.datepicker('setDate', today.toDate());
14
15
datepicker1.datepicker('update'); //update the bootstrap datepicker
16
datepicker2.datepicker('update');
17
Advertisement
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
JavaScript
1
22
22
1
$(document).ready(function() {
2
var date = new Date();
3
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
4
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
5
6
$('#datepicker1').datepicker({
7
format: "mm/dd/yyyy",
8
todayHighlight: true,
9
startDate: today,
10
endDate: end,
11
autoclose: true
12
});
13
$('#datepicker2').datepicker({
14
format: "mm/dd/yyyy",
15
todayHighlight: true,
16
startDate: today,
17
endDate: end,
18
autoclose: true
19
});
20
21
$('#datepicker1,#datepicker2').datepicker('setDate', today);
22
});
JavaScript
1
23
23
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
2
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
4
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
5
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
6
<div class="row">
7
<div class="col-lg-2">
8
<div class="panel">
9
<fieldset>
10
<div class="form-group">
11
<label for="datepicker1">Date</label>
12
<input type="text" class="form-control" id="datepicker1">
13
</div>
14
</fieldset>
15
<fieldset>
16
<div class="form-group">
17
<label for="datepicker2">Date2</label>
18
<input type="text" class="form-control" id="datepicker2">
19
</div>
20
</fieldset>
21
</div>
22
</div>
23
</div>