在引导程序日期选择器中设置思维导图
Posted
技术标签:
【中文标题】在引导程序日期选择器中设置思维导图【英文标题】：Set mindate in bootstrap datepicker 【发布时间】：2016-12-02 14:04:25 【问题描述】：在更改第一个日期选择器时我有 2 个日期选择器，我需要将所选日期设置为第二个日期选择器的值。这是我的 coe
<input type="text" size="30" class="date_picker_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_to form-control valid" id="end" value="" name="end" aria-invalid="false">
$('.date_picker_from').datepicker(
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '-0m',
minDate:0,
);
$('.date_picker_to').datepicker(
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '+1d',
minDate:0,
);
$("#start").change( function()
var secondDate = new Date($("#start").datepicker( "getDate" ));
var date2 = new Date(secondDate.getTime());
date2.setDate(date2.getDate() + 1);
$("#end").datepicker("setDate", date2);
$("#end").datepicker("minDate", date2);
$('#end').datepicker( "option", "minDate", date2 );
);
这是jsfiddle链接
【问题讨论】：
【参考方案1】：这只是你需要为 set mindate 做的事情。这是使用 datepicker 设置 mindate 的方法。
$("#start").change( function()
$( ".date_picker_hotel_to" ).datepicker("option", "minDate", $("#start").val());
);
【讨论】：
【参考方案2】：使用onSelect 回调选项
$('.date_picker_hotel_from').datepicker(
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '-0m',
minDate: 0,
onSelect: function(text, dt)
$('#end').datepicker('option', 'minDate', text);
);
$('.date_picker_hotel_to').datepicker(
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '+1d',
minDate: 0,
);<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<input type="text" size="30" class="date_picker_hotel_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_hotel_to form-control valid" id="end" value="" name="end" aria-invalid="false">【讨论】：
【参考方案3】： $(function ()
$("#start").change(() =>
let secondDate = $("#start").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#end").datepicker("setStartDate", secondDate);
$("#end").datepicker('setDate', fromDate);
);
);
【讨论】：
【参考方案4】：<html>
<input asp-for="StartDate" class="form-control datepicker" type="text" autocomplete="off" />
<input asp-for="EndDate" class="form-control datepicker" asp-format="0:dd.MM.yyyy" type="text" autocomplete="off" />
<script>
$('#StartDate').datepicker(
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
startDate: new Date('2021,1,1'),
);
$('#EndDate').datepicker(
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
);
$("#StartDate").on("change", function (e)
var secondDate = $("#StartDate").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#EndDate").datepicker("setStartDate", secondDate);
);
</script>
</html>
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于在引导程序日期选择器中设置思维导图的主要内容，如果未能解决你的问题，请参考以下文章