В настоящее время вы пытаетесь воссоздать существующий указатель даты.Вместо этого измените текущий экземпляр, используя методы setStartDate
и setEndDate
.
$("#txtClaimFrom").datepicker("setStartDate", minDate);
$("#txtClaimFrom").datepicker("setEndDate", maxDate);
$(document).ready(function() {
$('#txtClaimMonth').datepicker({
autoclose: true,
format: "MM yyyy",
viewMode: "months",
minViewMode: "months",
});
$('#txtClaimFrom').datepicker({
autoclose: true,
format: 'dd/mm/yyyy'
})
});
function MonthDatePick() {
var month = $('#txtClaimMonth').datepicker('getDate').getMonth() + 1; //('getMonth');
var year = $('#txtClaimMonth').datepicker('getDate').getFullYear(); //('getFullYear');
var minDate = new Date(year, month - 1, 1);
var maxDate = new Date(year, month, 0);
$("#txtClaimFrom").datepicker("setStartDate", minDate);
$("#txtClaimFrom").datepicker("setEndDate", maxDate);
}
.col-lg-3 { margin-bottom: 180px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<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>
В качестве альтернативы, вы можете remove
текущий указатель даты и повторно инициализировать его с нуля.Обратите внимание, что Bootstrap Datepicker использует startDate
и endDate
в качестве параметров, а не minDate
и maxDate
.
$("#txtClaimFrom").datepicker("remove");
$("#txtClaimFrom").datepicker({
autoclose: true,
startDate: minDate,
endDate: maxDate,
format: 'dd/mm/yyyy',
changeMonth: false,
changeYear: false,
});
$(document).ready(function() {
$('#txtClaimMonth').datepicker({
autoclose: true,
format: "MM yyyy",
viewMode: "months",
minViewMode: "months",
});
$('#txtClaimFrom').datepicker({
autoclose: true,
format: 'dd/mm/yyyy'
})
});
function MonthDatePick() {
var month = $('#txtClaimMonth').datepicker('getDate').getMonth() + 1; //('getMonth');
var year = $('#txtClaimMonth').datepicker('getDate').getFullYear(); //('getFullYear');
var minDate = new Date(year, month - 1, 1);
var maxDate = new Date(year, month, 0);
$("#txtClaimFrom").datepicker("remove");
$("#txtClaimFrom").datepicker({
autoclose: true,
startDate: minDate,
endDate: maxDate,
format: 'dd/mm/yyyy',
changeMonth: false,
changeYear: false,
});
}
.col-lg-3 {
margin-bottom: 180px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<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>