jQuery 如何在fullcalendar中使过去的日期不可选择？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14978629/
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 make past date unselectable in fullcalendar?
提问by Frank
Problem is, how to disable selectable on PAST DATES in fullcalendar's month/week view.
问题是，如何在 fullcalendar 的月/周视图中禁用 PAST DATES 可选。
I want to user not allowed to click/select the on past dates.
我希望用户不允许点击/选择过去的日期。
Here is some googled code snippet I am trying to implement on event rendering:
这是我尝试在事件渲染上实现的一些 googled 代码片段：
selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
var appdate = jQuery.datepicker.formatDate('<?php echo $DPFormat; ?>', new Date(start));
jQuery('#appdate').val(appdate);
jQuery('#AppFirstModal').show();
},
eventRender: function(event, element, view)
{
var view = 'month' ;
if(event.start.getMonth() !== view.start.getMonth()) { return false; }
},
But its not working though.
但它不工作虽然。
I tried bellow CSS too and this help me to hide past date text only, but selectable is still working on pastdate box.
我也尝试了 bellow CSS，这有助于我仅隐藏过去的日期文本，但 selectable 仍在过去日期框上工作。
.fc-other-month .fc-day-number {
display:none;
}
I am really stuck with this problem. Please someone help me out. Thanks...
我真的被这个问题困住了。请有人帮助我。谢谢...
回答by Mausami
I have done this in my fullcalendar and it's working perfectly.
我已经在我的全日历中完成了这项工作，并且运行良好。
you can add this code in your select function.
您可以在选择函数中添加此代码。
select: function(start, end, allDay) {
var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd');
var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
if(check < today)
{
// Previous Day. show message if you want otherwise do nothing.
// So it will be unselectable
}
else
{
// Its a right date
// Do something
}
},
I hope it will help you.
我希望它会帮助你。
回答by Michal Gallovic
I like this approach:
我喜欢这种方法：
select: function(start, end) {
if(start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
}
It will essentially disable selection on times before "now".
它基本上会在“现在”之前的时间禁用选择。
回答by dap.tci
Thanks to this answer, I've found the solution below:
多亏了这个答案，我找到了以下解决方案：
$('#full-calendar').fullCalendar({
selectable: true,
selectConstraint: {
start: $.fullCalendar.moment().subtract(1, 'days'),
end: $.fullCalendar.moment().startOf('month').add(1, 'month')
}
});
回答by Novasol
I have tried this approach, works well.
我试过这种方法，效果很好。
$('#calendar').fullCalendar({
defaultView: 'month',
selectable: true,
selectAllow: function(select) {
return moment().diff(select.start) <= 0
}
})
Enjoy!
享受！
回答by Dave Chen
In FullCalendar v3.0, there is the property selectAllow:
在 FullCalendar v3.0 中，有属性selectAllow：
selectAllow: function(info) {
if (info.start.isBefore(moment()))
return false;
return true;
}
回答by Lukasz Koziara
You can combine:
您可以组合：
-hide text by CSS as mentioned in question
-hide text by CSS 正如所提到的那样
-disable PREV button on current month
-check date on dayClick/eventDrop etc:
- 检查 dayClick/eventDrop 上的日期等：
dayClick: function(date, allDay, jsEvent, view) {
var now = new Date();
if (date.setHours(0,0,0,0) < now.setHours(0,0,0,0)){
alert('test');
}
else{
//do something
}
}
回答by nicolallias
In fullcalendar 3.9, you might prefer the validRange function parameter:
在 fullcalendar 3.9 中，您可能更喜欢validRange function parameter：
validRange: function(nowDate){
return {start: nowDate} //to prevent anterior dates
},
Drawback: this also hides events before that datetime
缺点：这也会隐藏该日期时间之前的事件
回答by Oscar Chambers
The old answers to this question are ok...
这个问题的旧答案是好的......
However, the official documentation suggests a new, more concise solution:
但是，官方文档提出了一个新的、更简洁的解决方案：
First set the day you want to be the lower bound
先设置你想成为下界的那一天
var today = new Date().toISOString().slice(0,10);
Then include the range using validRange. Simply omit the enddate.
然后使用validRange. 只需省略end日期。
validRange: {
start: today
}
回答by Akila Jayasinghe
No need for a long program, just try this.
不需要很长的程序，试试这个。
checkout.setMinSelectableDate(Calendar.getInstance().getTime());
Calendar.getInstance().getTime()
Gives us the current date.
给我们当前日期。
回答by André Fernandes
This is what I am currently using
这是我目前正在使用的
Also added the .add() function so the user cannot add an event at the same hour
还添加了 .add() 函数，因此用户无法在同一时间添加事件
select: function(start, end, jsEvent, view) {
if(end.isBefore(moment().add(1,'hour').format())) {
$('#calendar').fullCalendar('unselect');
return false;
}
