//Initializing the datepicker
$('dob').on('click',function(){
$('.datepicker').datepicker({
"format": "dd/mm/yyyy",
"autoclose": true
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
<link href="assets/css/common-rtl.min.css" rel="stylesheet" type="text/css" />
<form class="form-horizontal" action="employee.cfm" method="post" role="form">
<div class="container col-md-12">
<div class="col-md-8 jumbotron">
<div class="form-group">
<label class="control-label col-sm-3" for="dob">تاریخ پیدائش</label>
<div class="controls col-sm-3">
<input type="text" id="dob" name="dob" placeholder="DOB" class="form-control datepicker" value="">
</div>
</div>
</div>
</div>
</form>The webpage I designed is in Arabic, with right-to-left content alignment. I encountered an issue with the alignment of a datepicker in a text field.
To address this issue, I utilized the commonrtl.css file.