如何通过给出两个日期来限制 jquery datepicker 的日期范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4537900/
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 restrict date range of a jquery datepicker by giving two dates?
提问by kbvishnu
I am having two dates that is stored in db and am selecting it using $.ajax() and what i need is to show the datepicker values between the dates I selected from db.
我有两个日期存储在 db 中，我使用 $.ajax() 选择它，我需要的是显示我从 db 中选择的日期之间的日期选择器值。
Here is my code for it.But it is not working properly
这是我的代码。但它无法正常工作
function setDatePickerSettings(isFisc) {
var fSDate, fEDate;
$.ajax({
type: "POST",
url: '../Asset/Handlers/AjaxGetData.ashx?fisc=1',
success: function(data) {
alert(data);
var res = data.split("--");//data will be 4/4/2010 12:00:00--5/4/2011 12:00:00
var sDate = res[0].split(getSeparator(res[0]));
alert("Separator " + getSeparator(res[1]) + " Starts " + sDate);
var eDate = res[1].split(getSeparator(res[1]));
alert("End " + eDate);
alert("sub " + sDate[0]);
fSDate = new Date(sDate[2].substring(0, 4), sDate[0], sDate[1]);
alert("Starts " + fSDate.substring(0, 4));
fEDate = new Date(eDate[2].substring(0, 4), eDate[0], eDate[1]);
alert("eND " + fEDate.toString());
}
});
var dtSettings = {
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonImage: clientURL + 'images/calendar.png',
buttonImageOnly: true,
showStatus: true,
showOtherMonths: false,
dateFormat: 'dd/mm/yy',
minDate:fSDate, //assigning startdate
maxDate:fEDate //assigning enddate
};
return dtSettings;
}
Pls provide some solution. I need the datetime picker which requires values between that range. Thanks in advance
请提供一些解决方案。我需要日期时间选择器，它需要该范围之间的值。提前致谢
回答by The Muffin Man
Your syntax is wrong for the minDate/maxDate. You can read the documentation on the jQuery UI website where the demo is. I suggest you take a look at it to tailor it to your specific case. It looks something like this:
您的 minDate/maxDate 语法错误。您可以阅读演示所在的 jQuery UI 网站上的文档。我建议您查看它以根据您的具体情况进行定制。它看起来像这样：
$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });
or
或者
the following will make it so that you can't pick anything previous to today.
以下内容将使您无法选择今天之前的任何内容。
$( ".selector" ).datepicker({ minDate: 0 });
and this will make it so you can't pick anything before tomorrow
这将使您在明天之前无法选择任何东西
$( ".selector" ).datepicker({ maxDate: 1 });
Edit: Here is how you insert your own date, but i'm having an issue getting the dateFormat to work correctly, as you can see I have the dateFormat specified, but the format I actually put in is ignoring the dateformat.
编辑：这是您插入自己的日期的方式，但是我在使 dateFormat 正常工作时遇到了问题，正如您所看到的，我指定了 dateFormat，但我实际输入的格式忽略了 dateformat。
$("#txtDateStart").datepicker({dateFormat:'mm/dd/yy', minDate: new Date(2010,11,12) });
回答by Alexander
I know this is an ancient post but the bug that @TheMuffinManraised about not being able to get the date format working with the date restriction options is real and appears to only surface when the options are in-line as in his example.
我知道这是一篇古老的帖子，但@TheMuffinMan提出的关于无法使用日期限制选项获取日期格式的错误是真实的，并且似乎只有在选项如他的示例中那样串联时才会出现。
If you have to use this format, and if anyone is still interested, the way around it is to put the date formatting options as the last option in the set. For example the code below works flawlessly for me.
如果您必须使用这种格式，并且如果有人仍然感兴趣，则解决方法是将日期格式选项作为集合中的最后一个选项。例如，下面的代码对我来说完美无缺。
var minDate = -20;
var maxDate = "+1M +10D"
$('body').on('focus',".datepicker", function(){
$(this).datepicker({ minDate: minDate, maxDate: maxDate },{dateFormat: "dd/mm/yy"});
});
I hope it helps someone else.
我希望它可以帮助别人。
回答by Parag Tyagi -morpheus-
This worked for me.
这对我有用。
$('#date-time-picker').datepicker({
format: 'YYYY-MM-DD',
useCurrent: false,
showClose: true,
minDate: '2018-02-01',
maxDate: '2018-03-15',
})
回答by kbvishnu
I used this one and I got the output.thanks all
我用了这个，我得到了输出。谢谢大家
function setFiscDatePickerSettings() {
var fSDate, fEDate, sDate, fEDate;
var dtSettings;
sDate = document.getElementById("<%=hdfFiscStart.ClientID %>").value.split(getSeparator(document.getElementById("<%=hdfFiscStart.ClientID %>").value));
eDate = document.getElementById("<%=hdfFiscEnd.ClientID %>").value.split(getSeparator(document.getElementById("<%=hdfFiscEnd.ClientID %>").value));
fSDate = new Date(sDate[2].substring(0, 4), sDate[0] - 1, sDate[1]);
fEDate = new Date(eDate[2].substring(0, 4), eDate[0] - 1, eDate[1]);
dtSettings = {
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonImage: clientURL + 'images/calendar.png',
buttonImageOnly: true,
showStatus: true,
showOtherMonths: false,
dateFormat: 'dd/mm/yy',
minDate: fSDate, maxDate: fEDate
};
return dtSettings;
}
function bindFiscalDatePicker() {
var inputDt = $("input.datepicker_fisc");
inputDt.addClass("numbers_only");
inputDt.addClass("allow_special");
inputDt.attr("symbolcodes", "/");
inputDt.datepicker(setFiscDatePickerSettings());
}
