Javascript 如何在时刻js日历中禁用选定日期和上一个日期。。？

我正在使用MomentJS将calender集成到一个项目中

我想禁用上一个日期和某些其他选定日期

我试过了，但日期没有被禁用

这是我的javascript代码， !作用{ var今天=时刻； 函数日历选择器，事件{ this.el=document.queryselectors选择器； 这个事件=事件； this.current=moment.date1； 这是我的画； var current=document.querySelector'.today'； ifcurrent{ var self=这个； window.setTimeoutfunction{ 自激电流； }, 500; } } Calendar.prototype.draw=函数{ //创建标题 这是我的头； //取款月份 这个月； 这是一个传奇； } Calendar.prototype.drawHeader=函数{ var self=这个； 如果！这个头{ //创建标题元素 this.header=createElement'div'，'header'； this.header.className='header'； this.title=createElement'h1'； var right=createElement'div'，'right'； right.addEventListener'click'，函数{self.nextMonth；}； var left=createElement'div'，'left'； addEventListener'click'，函数{self.prevMonth；}； //附加元素 this.header.appendChildthis.title； this.header.appendChildright； this.header.appendChildleft； this.el.appendChildthis.header； } this.title.innerHTML=this.current.format'MMMM-YYYY'； } Calendar.prototype.drawMonth=函数{ var self=这个； this.events.forEachfunctionev{ ev.date=self.current.clone.dateMath.random*29-1+1； }; 这个月{ this.oldMonth=this.month； this.oldMonth.className='month out'+self.next？'next'：'prev'； this.oldMonth.addEventListener'webkitAnimationEnd'，函数{ self.oldMonth.parentNode.removeChildself.oldMonth； self.month=createElement'div'，'month'； 自回填； self.currentmount； 自填； self.el.childself.month； window.setTimeoutfunction{ self.month.className='month in'+self.next？'next'：'prev'； }, 16; }; }否则{ this.month=createElement'div'，'month'； 这个月，这个月； 这是回填； 本月； 这是福沃德填充； this.month.className='month new'； } } Calendar.prototype.backFill=函数{ var clone=this.current.clone； var dayOfWeek=clone.day； if！dayOfWeek{return；} 克隆。减去“天”，星期天+1； forvar i=星期几；i>0；i-{ this.drawDayclone.add'days'，1； } } Calendar.prototype.fowardFill=函数{ var clone=this.current.clone.add'months'，1.减去'days'，1； var dayOfWeek=clone.day； ifdayOfWeek==6{return；} forvar i=星期几；i<6；i++{ this.drawDayclone.add'days'，1； } } Calendar.prototype.currentMonth=函数{ var clone=this.current.clone； whileclone.month==此.current.month{ 这个.drawDayclone； 克隆。添加“天”，1； } } Calendar.prototype.getWeek=functionday{ 如果！this.week | day.day==0{ this.week=createElement'div'，'week'； 本月本周； } } Calendar.prototype.drawDay=functionday{ var self=这个； 这是一个工作日； //外天 var outer=createElement'div'，this.getDayClassday； 外部.addEventListener“单击”函数{ self.openDaythis； }; //日名 var name=createElement'div'，day name'，day.format'ddd'； //日数 var number=createElement'div'，day number'，day.format'DD'； //事件 var events=createElement'div'，'day events'； 本日活动； outer.appendChildname； 外码；外码； 外部事件； 本周，本周； } Calendar.prototype.drawEvents=功能日，元素{ ifday.month==this.current.month{ var todaysEvents=this.events.reducefunctionmemo，ev{ 如果ev.date.isSameday，“day”{ memo.pushev； } 返回备忘录； }, []; 今天是星期五{ var evSpan=createElement'span'，ev.color； 元素.appendChildevSpan； }; } } Calendar.prototype.getDayClass=functionday{ 班级=['天']； ifday.month！==this.current.month{ 类。推送“其他”； }否则，如果今天是星期天，则为“天”{ 上课。推“今天”； } 返回类。加入“”； } Calendar.prototype.openDay=functionel{ 变量详细信息，箭头； var dayNumber=+el.querySelectorAll'.dayNumber'[0]。innerText | |+el.querySelectorAll'.dayNumber'[0]。textContent； var day=this.current.clone.datedayNumber； var currentOpened=document.querySelector'.details'； //检查是否有打开的详细信息框 在当前行上 ifcurrentOpened&¤tOpened.parentNode==el.parentNode{ 详细信息=当前已打开； arrow=document.querySelector'.arrow'； }否则{ //关闭不同周行的开放事件 //currentOpened&¤tOpened.parentNode.removeChildcurrentOpened； 如果当前打开{ currentOpened.addEventListener'webkitAnimationEnd'，函数{ currentOpened.parentNode.removeChildcurrentOpened； }; currentOpened.addEventListener'oanimationend'，函数{ currentOpened.parentNode.removeChildcurrentOpened； }; currentOpened.addEventListener'msAnimationEnd'，函数{ currentOpened.parentNode.removeChildcurrentOpened； }; CurrentOpen.addEventListener'animationend'函数{ currentOpened.parentNode.removeChildcurrentOpened； }; currentOpened.className=“详细信息输出”； } //创建详细信息容器 details=createElement'div'，'details in'； //创建箭头 var arrow=createElement'div'，'arrow'； //创建事件包装器 详细信息。如箭头所示； el.parentNode.appendChilddetails； } var todaysEvents=this.events.reducefunctionmemo，ev{ 如果ev.date.isSameday，“day”{ memo.pushev； } 返回备忘录； }, []; 本文件提供了最新版本、详细信息； arrow.style.left=el.offsetLeft-el.parentNode.offsetLeft+27+'px'； } Calendar.prototype.renderEvents=函数事件，元素{ //删除当前详细信息元素中的所有事件 var currentWrapper=ele.querySelector'.events'； var wrapper=createElement'div'，'currentWrapper'new'中的事件：； events.foreachev{ var div=createElement'div'，'event'； var square=createElement'div'，事件类别'+ev.color； var span=createElement'span'，ev.eventName； 广场分区； 第二节； wrapper.appendChilddiv； }; if！events.length{ var div=createElement'div'，'event empty'； var span=createElement'span'，'No Events'； 第二节； wrapper.appendChilddiv； } ifcurrentWrapper{ currentWrapper.className='events out'； currentWrapper.addEventListener'webkitAnimationEnd'，函数{ currentWrapper.parentNode.removeChildcurrentWrapper； 电子封装； }; currentWrapper.addEventListener'oanimationend'，函数{ currentWrapper.parentNode.removeChildcurrentWrapper； 电子封装； }; currentWrapper.addEventListener'msAnimationEnd'，函数{ currentWrapper.parentNode.removeChildcurrentWrapper； 电子封装； }; currentWrapper.addEventListener'animationend'，函数{ currentWrapper.parentNode.removeChildcurrentWrapper； 电子封装； }; }否则{ 电子封装； } } Calendar.prototype.drawLegend=函数{ var legend=createElement'div'，'legend'； var calendars=this.events.mapfunctione{ 返回e.calendar+“|”+e.color； }.简化功能备忘录，e{ ifmemo.indexOfe===-1{ memo.push； } 返回备忘录； }，[]foreache函数{ var parts=e.split'|'； var entry=createElement'span'，entry'+部分[1]，部分[0]； legend.appendChildentry； }; 这是我的传奇； } Calendar.prototype.nextMonth=函数{ 此。当前。添加“月”，1； this.next=true； 这是我的画； } Calendar.prototype.prevMonth=函数{ 这个。当前。减去“月”，1； this.next=false； 这是我的画； } window.Calendar=日历； 函数createElementtagName，类名，innerText{ var ele=document.createElementtagName； ifclassName{ ele.className=className； } ifinnerText{ ele.innderText=ele.textContent=innerText； } 返回ele； } }; !作用{ 风险值数据=[ {eventName:'带标记的午餐会议'，日历：'工作'，颜色：'橙色'}， {eventName:'Interview-Jr.webdeveloper'，日历：'Work'，颜色：'orange'}， {eventName:'向董事会演示新应用程序'，日历：'工作'，颜色：'橙色'}， {eventName:'带营销的晚餐'，日历：'工作'，颜色：'橙色'}， {eventName:'Game vs Portalnd'，日历：'Sports'，颜色：'blue'}， {eventName:'Game vs Houston'，日历：'Sports'，颜色：'blue'}， {eventName:'Game vs Denver'，日历：'Sports'，颜色：'blue'}， {eventName:'Game vs San Degio'，日历：'Sports'，颜色：'blue'}， {事件名称：'学校游戏'，日历：'孩子'，颜色：'黄色'}， {eventName:'家长/教师会议'，日历：'孩子'，颜色：'黄色'}， {eventName:'从足球训练中拾取'，日历：'儿童'，颜色：'黄色'}， {eventName:'冰淇淋之夜'，日历：'儿童'，颜色：'黄色'}， { eventName:'免费塔玛尔之夜'，日历：'其他'，颜色：'绿色'}， {eventName:'保龄球队'，日历：'其他'，颜色：'绿色'}， {eventName:'教孩子编码'，日历：'其他'，颜色：'绿色'}， {eventName:'Startup Weekend'，日历：'Other'，颜色：'green'} ]; 函数addDateev{ } var日历=新日历“日历”，数据； }; *，*：之前，*：之后{ -moz框大小：边框框；-webkit框大小：边框框；框大小：边框框； } 身体{ 溢出：隐藏； 字体系列：“HelveticaNeue UltraLight”，“Helvetica Neue UltraLight”，“Helvetica Neue”，Arial，Helvetica，无衬线； 字号：100； 颜色：rgba255、255、255、1； 保证金：0； 填充：0； 背景：4A4A4A； -webkit触摸标注：无； -webkit用户选择：无； -khtml用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； } 历法{ -webkit转换：translate3d0,0,0； -moz变换：translate3d0,0,0； 变换：translate3d0，0，0； 宽度：420px； 保证金：0自动； 高度：570px； 溢出：隐藏； } .标题{ 高度：50px； 宽度：420px； 背景：rgba66,66,66,1； 文本对齐：居中； 位置：相对位置； z指数：100； } .标题h1{ 保证金：0； 填充：0； 字体大小：20px； 线高：50px； 字号：100； 字母间距：1px； } .左，.右{ 位置：绝对位置； 宽度：0px； 高度：0px； 边框样式：实心； 最高：50%； 最高保证金：-7.5px； 光标：指针； } .左{ 边框宽度：7.5px10px 7.5px 0； 边框颜色：透明rgba160、159、160、1透明； 左：20px； } .对{ 边框宽度：7.5px 0 7.5px 10px； 边框颜色：透明rgba160、159、160、1； 右：20px； } .月{ /*溢出：隐藏*/ 不透明度：0； } .month.new{ -webkit动画：fadeIn 1s放松； 不透明度：1； } .下个月{ -webkit动画：从TopFadeMonth.4s开始播放； -moz动画：moveFromTopFadeMonth.4s放松； 动画：从顶部移动FadeMonth.4s放松； 不透明度：1； } .下个月{ -webkit动画：moveToTopFadeMonth.4s轻松进入； -moz动画：moveToTopFadeMonth.4s轻松进入； 动画：moveToTopFadeMonth.4s轻松进入； 不透明度：1； } 上个月{ -webkit动画：从底部移动FadeMonth.4s放松； -moz动画：moveFromBottomFadeMonth.4s放松； 动画：moveFromBottomFadeMonth.4s放松； 不透明度：1； } .month.out.prev{ -webkit动画：moveToBottomFadeMonth.4s易用； -moz动画：moveToBottomFadeMonth.4s轻松进入； 动画：moveToBottomFadeMonth.4s轻松进入； 不透明度：1； } .星期{ 背景：4A4A4A； } .天{ 显示：内联块； 宽度：60px； 填充：10px； 文本对齐：居中； 垂直对齐：顶部； 光标：指针； 背景：4A4A4A； 位置：相对位置； z指数：100； } .日.其他{ 颜色：rgba255、255、255、.3； } .今天{ 颜色：rgba156、202、235、1； } .日名{ 字体大小：9px； 文本转换：大写； 边缘底部：5px； 颜色：rgba255、255、255、.5； 字母间距：.7px； } .日数{ 字体大小：24px； 字母间距：1.5px； } .一天一天的活动{ 列表样式：无； 利润上限：3倍； 文本对齐：居中； 高度：12px； 线高：6px； 溢出：隐藏； } .日.日活动跨度{ 垂直对齐：顶部； 显示：内联块； 填充：0； 保证金：0； 宽度：5px； 高度：5px； 线高：5px； 利润率：0.1px； } .blue{背景：rgba156、202、235、1；} .orange{背景：rgba247167,0,1；} .green{背景：rgba153198109,1；} .yellow{背景：rgba249233,0,1；} .详情{ 位置：相对位置； 宽度：420px； 高度：75px； 背景：RGBA1641641641； 边缘顶部：5px； 边界半径：4px； } .详情{ -webkit动画：从上到下移动淡入淡出。两种动画都轻松5秒； -moz动画：moveFromTopFade.5s轻松播放； 动画：从上到下淡入淡出。两种动画都轻松5秒； } .详情{ -webkit动画：moveToTopFade.5s轻松播放； -moz动画：moveToTopFade.5s轻松播放； 动画：moveToTopFade.5s轻松播放； } .阿罗{ 位置：绝对位置； 顶部：-5px； 左：50%； 左边距：-2px； 宽度：0px； 高度：0px； 边框样式：实心； 边框宽度：0 5px 5px 5px； 边框颜色：透明RGBA1641641641透明； 过渡：所有0.7秒缓解； } .事件{ 高度：75px； 填充：7px0； 溢出y：自动； 溢出x：隐藏； } .events.in{ -webkit动画：fadeIn.3s使两者都轻松； -moz动画：fadeIn.3s使两者都轻松； 动画：fadeIn.3s使两者都轻松； } .events.in{ -webkit动画延迟：.3s； -moz动画延迟：.3s； 动画延迟：.3s； } .details.out.events{ -webkit动画：淡出收缩。4s轻松两者； -moz动画：淡出思考。4s轻松两者； 动画：淡出思考。4s轻松两者； } .events.out{ -webkit动画：淡出。3s使两者都轻松； -moz动画：淡出。3s使两者都轻松； 动画：淡出。3秒缓解两者； } .事件{ 字号：1 6px； 线高：22px； 字母间距：.5px； 填充：2x16px； 垂直对齐：顶部； } .event.empty{ 颜色：eee； } .活动类别{ 高度：10px； 宽度：10px； 显示：内联块； 边际：6px0； 垂直对齐：顶部； } .事件跨度{ 显示：内联块； 填充：0 7px； } .传奇{ 位置：绝对位置； 底部：0； 宽度：100%； 高度：30px； 背景：rgba60,60,60,1； 线高：30px； } .进入{ 位置：相对位置； 填充：0 25px； 字体大小：13px； 显示：内联块； 线高：30px； 背景：透明； } .条目：之后{ 位置：绝对位置； 内容：； 高度：5px； 宽度：5px； 顶部：12px； 左：14px； } 蓝色：在{背景：rgba156202235,1；}之后 橙色：在{背景：rgba247167,0,1；}之后 绿色：在{背景：rgba153198109,1；}之后 黄色：在{背景：rgba249233,0,1；}之后 /*动画很酷*/ @-webkit关键帧从顶部移动淡入淡出{ 来自{opacity:.3；高度：0px；边距顶部：0px；-webkit transform:translateY-100%；} } @-moz关键帧从顶部淡入淡出{ from{height:0px；margin top:0px；-moz-transform:translateY-100%；} } @关键帧从上到下移动淡入淡出{ from{height:0px；边距top:0px；transform:translateY-100%；} } @-webkit关键帧moveToTopFade{ 到{不透明度：.3；高度：0px；边距顶部：0px；不透明度：0.3；-webkit变换：translateY-100%；} } @-moz关键帧moveToTopFade{ 到{height:0px；-moz-transform:translateY-100%；} } @关键帧moveToTopFade{ 到{height:0px；transform:translateY-100%；} } @-webkit关键帧moveToTopFadeMonth{ 到{opacity:0；-webkit transform:translateY-30%scale.95；} } @-moz关键帧moveToTopFadeMonth{ 到{opacity:0；-moz-transform:translateY-30%；} } @关键帧moveToTopFadeMonth{ 到{opacity:0；-moz-transform:translateY-30%；} } @-webkit关键帧从TopFadeMonth移动{ 来自{opacity:0；-webkit transform:translateY30%scale.95；} } @-moz关键帧从TopFadeMonth移动{ 来自{opacity:0；-moz transform:translateY30%；} } @关键帧从TopFadeMonth移动{ 来自{opacity:0；-moz transform:translateY30%；} } @-webkit关键帧移动到BottomFadeMonth{ 到{opacity:0；-webkit transform:translateY30%scale.95；} } @-moz关键帧移动到BottomFadeMonth{ 到{opacity:0；-webkit transform:translateY30%；} } @关键帧移动到BottomFadeMonth{ 到{opacity:0；-webkit transform:translateY30%；} } @-webkit关键帧从底部移动FadeMonth{ 来自{opacity:0；-webkit transform:translateY-30%scale.95；} } @-moz关键帧从底部移动FadeMonth{ 来自{opacity:0；-webkit transform:translateY-30%；} } @关键帧从BottomFadeMonth移动{ 来自{opacity:0；-webkit transform:translateY-30%；} } @-webkit关键帧fadeIn{ 从{opacity:0；} } @-moz关键帧fadeIn{ 从{opacity:0；} } @关键帧淡入淡出{ 从{opacity:0；} } @-webkit关键帧淡出{ 到{不透明度：0；} } @-moz关键帧淡出{ 到{不透明度：0；} } @关键帧淡出{ 到{不透明度：0；} } @-webkit关键帧淡出shink{ 到{不透明度：0；填充：0px；高度：0px；} } @-moz关键帧淡出shink{ 到{不透明度：0；填充：0px；高度：0px；} } @关键帧淡出思考{ 到{不透明度：0；填充：0px；高度：0px；} } 安装程序 在这个答案中，我将使用几个演示来区分您的多个场景。每一个都有一个共同的事实，那就是他们在某些日子里添加了一个残疾人类。我不会在每个演示中重复这一点，因此，这里是一次：

在Calendar.prototype.drawDay内

在CSS的末尾

禁用以前的日期 您可以使用MomentJS的方法来确定哪些天已经过去，哪些天应该被禁用，并禁用对它们的单击

/* ... */

Calendar.prototype.getDayClass = function(day) {
  classes = ['day'];
  if(day.month() !== this.current.month()) {
    classes.push('other');
  } else if (today.isSame(day, 'day')) {
    classes.push('today');
  }
  // Here, add a class to disable past dates
  if (day.isBefore(moment(), 'day')) {
    classes.push('disabled');
  }
  return classes.join(' ');
}

/* ... */

我不得不从太多的角色中删除它

禁用所有日期，数组中定义的日期除外 在这里，我们将定义一个包含日期的数组，并使用该数组决定是否禁用日期。数组中的日期可以是任何格式，但在该数组中查找日期时需要匹配该格式

在我的示例中，我使用YYYY-MM-DD格式，您可以找到其他格式

---

它可以工作，但是，如果我只想禁用某些月份的特定日期，那么我应该怎么做？@K-Series您想只禁用一次月份/日期，还是每年禁用一次？e、 g.每年的12月？@K-Series我更新了答案，只启用了一些日期，这些日期取自一个数组，我不知道你的JSON是什么样子，所以你可能需要做一些修改adjustments@K-我不确定我是否理解你的要求。也许你应该创建另一个问题，提供更多细节，我将尝试与其他人一起回答：@K-Series我现在要去上班了，但如果其他人在这期间没有回答，我回来后会看一看

.day.disabled {
  color: #888;
  cursor: default;
}

/* ... */

Calendar.prototype.getDayClass = function(day) {
  classes = ['day'];
  if(day.month() !== this.current.month()) {
    classes.push('other');
  } else if (today.isSame(day, 'day')) {
    classes.push('today');
  }
  // Here, add a class to disable past dates
  if (day.isBefore(moment(), 'day')) {
    classes.push('disabled');
  }
  return classes.join(' ');
}

/* ... */

/* Have this, somewhere in your code */

var allowedDates = [
  '2018-04-14',
  '2018-05-01',
  '2018-05-02'
  /* ... */
];

/* ... */

Calendar.prototype.getDayClass = function(day) {
  classes = ['day'];
  if(day.month() !== this.current.month()) {
    classes.push('other');
  } else if (today.isSame(day, 'day')) {
    classes.push('today');
  }
  // Here, add a class to disable disallowed dates
  if (allowedDates.indexOf(day.format('YYYY-MM-DD')) < 0) {
    classes.push('disabled');
  }
  return classes.join(' ');
}

/* ... */