jQuery 如何在 bootstrap 中设置 datetimepicker 的 MinDate 和 maxDate 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25861864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to set MinDate and maxDate property of datetimepicker in bootstrap
提问by user3962745
i want to set minDate and maxDate property dynamically for datetimepicker in bootstrap,please help me out in this.
我想在 bootstrap 中为 datetimepicker 动态设置 minDate 和 maxDate 属性，请帮我解决这个问题。
in this scenario, while while selecting the date in one datetimepicker it should set that selected date as minDate for other datetimepicker.
在这种情况下，在一个 datetimepicker 中选择日期时，它应该将所选日期设置为其他 datetimepicker 的 minDate。
and after selecting the date in second datetimepicker,its selected date should become maxDate in first date time picker.
在第二个日期时间选择器中选择日期后，其选择的日期应成为第一个日期时间选择器中的 maxDate。
i tried this way:
我试过这种方式：
$(document).ready(function(){
$(".form_datepicker_startdate").datetimepicker({
isRTL: App.isRTL(),
format: "yyyy-mm-dd",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate:'<%= request.getSession().getAttribute("startdate") %>',
endDate:'<%= request.getSession().getAttribute("enddate") %>',
forceParse: 0,
pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left")
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('.form_datepicker_enddate').datepicker('setMinDate', minDate);
});
$(".form_datepicker_enddate").datetimepicker({
isRTL: App.isRTL(),
format: "yyyy-mm-dd",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate:'<%= request.getSession().getAttribute("startdate") %>',
endDate:'<%= request.getSession().getAttribute("enddate") %>',
forceParse: 0,
pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left")
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('.form_datepicker_startdate').datepicker('setMaxDate', maxDate);
});
});
回答by Ritesh
to limit Botstrap datepicker, the simplest way that I found is:
限制Botstrap datepicker，我发现的最简单的方法是：
$("#datepicker").datepicker({
maxDate : 'now'
});
This Will disable the date greater than today.
这将禁用大于今天的日期。
回答by sasidhar
I am assuming that you are using this pluginfrom the code that you have given in the code snippet. Assuming that this is the plugin that you are trying to use in you application, you are wrong methods to update the start and end dates or probably mixing up things from different libraries.
我假设您正在使用您在代码片段中提供的代码中的此插件。假设这是您尝试在应用程序中使用的插件，那么更新开始和结束日期的方法是错误的，或者可能混淆了来自不同库的内容。
In any case if I understood your problem correctly here is a jsfiddlethat does one part of your functionality.
无论如何，如果我正确理解您的问题，这里是一个jsfiddle，它完成了您的一部分功能。
When updating a new start or end date the syntax to be used is as follows (from the docs of the plugin):
更新新的开始或结束日期时，要使用的语法如下（来自插件的文档）：
$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');
and the names options for start and end dates are setStartDateand setEndDatenot minDate and MaxDate also the function that is used to update them is datetimepickernot datepicker.
并开始和结束日期的名称选项setStartDate并setEndDate没有的minDate和MAXDATE也用来更新它们的功能是datetimepicker不日期选择器。
Here is the code from JS Fiddle:
这是来自 JS Fiddle 的代码：
$(document).ready(function(){
$("#form_datepicker_startdate").datetimepicker({
format: "yyyy-mm-dd",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate : new Date('2012-08-08'),
endDate : new Date('2014-08-08'),
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#form_datepicker_enddate').datetimepicker('setStartDate', minDate);
});
$("#form_datepicker_enddate").datetimepicker();
});
Hope it helps, let me know if I am wrong in my assumptions anywhere.
希望它有所帮助，让我知道我的假设是否有误。
回答by Sapnandu
I am using this following Datetimepicker Site URLplease find the following code to stop future date selection.
我正在使用以下 Datetimepicker 站点 URL，请找到以下代码以停止未来的日期选择。
$(".datepicker").datetimepicker({
format: 'd/m/Y H:i',
formatTime: 'H:i',
formatDate: 'd/m/Y',
step: 15,
maxDate: new Date(),
onGenerate: function () {
var leftPos = $(this).offset().left + 70 + 'px';
$('.xdsoft_datetimepicker').css({ 'left': leftPos});
}
});
回答by Vinicius Bassi
These should do the trick.
这些应该可以解决问题。
$(".form_datepicker_startdate").datetimepicker().on("dp.change", function (e) {
$(".form_datepicker_enddate").data("DateTimePicker").minDate(e.date);
});
$(".form_datepicker_enddate").datetimepicker().on("dp.change", function (e) {
$(".form_datepicker_startdate").data("DateTimePicker").maxDate(formattedDate);
});
回答by Thakhani Tharage
I use Jquery UI. Its pretty easy, here is the code you can use on JQuery UI
我使用 Jquery UI。它非常简单，这是您可以在 JQuery UI 上使用的代码
$("#datepicker").datepicker({
minDate : +30,
maxDate : +90,
dateFormat : "yy-mm-dd",
});
