I am currently utilizing the bootstrap datepicker along with bootstrap-rtl.
The problem I encountered was that I had two fields, one for the date and one for the name. The datepicker would not appear until I clicked on the date input first, then on the name input. After that, when I clicked back on the date input, the datepicker would finally show up. This issue only occurred on the initial page load, and it worked fine after that until the page was reloaded.
<div class="col-md-6">
<div class="form-group">
<label for="name" class="control-label">name</label>
<input type="text" maxlength="40" name="name" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<span class="text-danger Bold">*</span>
<label for="civilIDExpiredDate" class="control-label">ExpiredDate</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="ExpiredDate" class="form-control datepicker">
</div>
</div>
</div>
<script type="text/javascript">
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
</script>