How to set beforeShowDay for long back dates in bootstrap datepicker? - datepicker

Question

hi I'm trying to use a datepicker bootstrap with a long date backwards selection. now I can only get 45 days back.
$( "#from" ).datepicker({
multidate: true,
beforeShowDay: function (date) {
var tgl = ['15/08/2018', '16/08/2018', '17/08/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
the code will disable all dates except the date specified in the array, but only a maximum of 45 days back. so the date of the array is not included.
any suggestions for this problem?
Thank you for your help

Answer 1

TRy this... Use '15/08/2018' to '15/8/2018'
$( "#js-date" ).datepicker({
multidate: true,
beforeShowDay: function (date) {
var tgl = ['15/8/2018', '16/8/2018', '17/8/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text" class="form-control" id="js-date">

Answer 2

Just another example, ("0" + (date.getMonth() + 1)).slice(-2) will get month in 2 digit format.
$('#datepicker').val("08-15-2018");/* for demo purpose */
$('#datepicker').datepicker({
multidate: true,
beforeShowDay: function(date) {
var tgl = ['15/08/2018', '16/08/2018', '17/08/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + ("0" + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
td.day.disabled {
opacity: 0.2;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<input id="datepicker">