JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css">
<div class="col-lg-3">
<label>Claim Month</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtClaimMonth" onchange="MonthDatePick();">
<div class="input-group-addon bg-purple">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
<div class="col-lg-3">
<label>Claim From</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtClaimFrom">
<div class="input-group-addon bg-purple">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
JavaScript
$(document).ready(function(){
$('#txtClaimMonth').datepicker({
autoclose: true,
format: "MM yyyy",
viewMode: "months",
minViewMode: "months",
});
$('#txtClaimFrom').datepicker({
autoclose: true,
format: 'dd/mm/yyyy'
})
});