我之前曾问过要为另一个日期选择器的月/年更改设置一个日期选择器日期。我没有确切的答案,但是通过引用各种堆栈溢出答案,我设法以某种方式设法将最小和最大日期设置为日期选择器。但是最小和最大日期设置无法正常工作。
月份和年份选择日期选择器:
<label> Month</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtMonth" onchange="MonthDatePick();">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
我选择的月份日期选择日期选择器:
<div class="col-lg-3">
<label> From</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtFrom">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
脚本:
function MonthDatePick() {
var month = $('#txtMonth').datepicker('getDate').getMonth() + 1;//('getMonth');
var year = $('#txtMonth').datepicker('getDate').getFullYear();//('getFullYear');
var minDate = new Date(year, month-1, 1);
var maxDate = new Date(year,month, 0);
$("#txtFrom").datepicker({
autoclose: true,
minDate: minDate,
maxDate: maxDate,
format: 'dd/mm/yyyy',
//defaultDate:minDate,
changeMonth: false,
changeYear: false,
});
}
我调试后发现,选择月份时,已定义了最小和最大日期。
对于Ex:如果选择,Feb 2018
表示
min date comes as :01/02/2018
max date comes as : 28/02/2018,
但更改不会复制到我选择日期的日期选择器中
调试图像图片
调试显示最小日期的图像
这里是my fiddle
该如何解决?
答案 0 :(得分:1)
您使用的选项不正确:
function MonthDatePick() {
var month = $('#txtMonth').datepicker('getDate').getMonth() + 1;//('getMonth');
var year = $('#txtMonth').datepicker('getDate').getFullYear();//('getFullYear');
var minDate = new Date(year, month-1, 1);
var maxDate = new Date(year,month, 0);
$("#txtFrom").datepicker({
autoclose: true,
startDate: minDate,
endDate: maxDate,
format: 'dd/mm/yyyy',
//defaultDate:minDate,
changeMonth: false,
changeYear: false,
});
}
将minDate
更改为startDate
,将maxDate
更改为endDate
答案 1 :(得分:1)
您当前正在尝试重新创建现有的日期选择器。而是使用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>
答案 2 :(得分:0)
请尝试使用此代码
HTML代码:
<label> Month</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtMonth" onchange="MonthDatePick();">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
<div class="col-lg-3">
<label> From</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtFrom">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
JS代码:
<script type="text/javascript">
$("#txtMonth").datepicker({
autoclose: true,
startView: "months",
minViewMode: "months",
format: 'M-yyyy',
//defaultDate:minDate,
changeMonth: false,
changeYear: false,
});
function MonthDatePick() {
var month = $('#txtMonth').datepicker('getDate').getMonth() + 1;//('getMonth');
var year =
$('#txtMonth').datepicker('getDate').getFullYear();//('getFullYear');
var minDate = new Date(year, month-1, 1);
minDate = minDate.toLocaleDateString('en-GB');
var maxDate = new Date(year,month, 0);
maxDate = maxDate.toLocaleDateString('en-GB');
$("#txtFrom").datepicker('destroy').datepicker({
autoclose: true,
startDate: minDate,
endDate: maxDate,
format: 'dd/mm/yyyy',
//defaultDate:minDate,
changeMonth: false,
changeYear: false,
});
$('#txtFrom').datepicker('setDate',minDate);
}
</script>
代码输出: