单击禁用特定日期的dijit图标按钮时，加载dijit日历 [英] loading dijit calendar on click of dijit icon button with specific dates disabled

问题描述

我试图在禁用特定日期的情况下单击dijit图标按钮来加载dijit日历，

I'm trying to load a dijit calendar on click of dijit icon button with specific dates disabled,

为此，我尝试了两种方法

for this I tried two ways

第一个: 在js函数中加载日历
尝试注册"id==mycal"时出错，但该ID已被注册."

first one: loading calendar in js function
getting error as trying to register "id==mycal" but that id is already registered ."

    <button  data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:oncldriconclick" data-dojo-props="iconClass:' dijitIconTable', showLabel: false" type="button"></button>
<div id="mycal"   data-dojo-attach-event="onclick: _onDayClick"  ></div>

oncldriconclick : function() {


            disable_before_days = 2;
            var calendar = new Calendar({
                value: new Date(),
                isDisabledDate:function(date, localString){
                  return dojoDate.difference(date, new Date(), "day") > disable_before_days 
                      || locale.isWeekend(date) 
                      || date > new Date() ;
                }
               }, "mycal");
            },

            onDayClick:function(evt){

            alert(evt);

        },

第二种方法:如果我在html以下加载并在postcreate函数中传递isdisableDate辩论，则在var calendar = registry.byId("mycal");的js函数的postcreate中加载日历，禁用日期不适用于启动，但仅在启动后才适用选择某些日期，我需要在日历启动时应用

Second method: loading calendar in postcreate of js function with var calendar = registry.byId("mycal"); if I load with below html and passing isdisableDate arguemnts in postcreate function , the disable dates are not applying on startup but they are applying only after the selection of some date I need this to be applied on startup of calendar

<button  data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:oncldriconclick" data-dojo-props="iconClass:' dijitIconTable', showLabel: false" type="button"></button>
<div id="mycal" class="mycal" data-dojo-attach-point="mycal"  data-dojo-type="dijit.Calendar"   data-dojo-attach-event="onChange: _onDayClick"  ></div>



postCreate: function(){

disable_before_days = 2;
        var calendar = registry.byId("mycal");
          console.log(locale );
          calendar.isDisabledDate = function(date, localString){
              return dojoDate.difference(date, new Date(), "day") > disable_before_days || locale.isWeekend(date) || date > new Date() ;
          }
          },

如何使用上述任何一种方法在日历启动时获取禁用日期.

how can I get disabled dates on calendar startup with these any one of the methods.

推荐答案

该错误是因为您正在创建一个ID为mycal的小部件(新)，该小部件已实例化(在dojo注册表中定义)，

the error is because you are creating a widget ( new ) with id mycal that was already instantiated ( defined in dojo registry ) ,

所有您需要的是将实例化放置在postCreate中，并在按钮中使用"dojo/dom-style"类切换显示:

all you need is put the instantiation in postCreate and in the button just toggle display using the "dojo/dom-style" class :

calendar:null,
postCreate: function(){
   calendar = new Calendar({
                value: new Date(),
                isDisabledDate:function(date, localString){
                  return dojoDate.difference(date, new Date(), "day") > disable_before_days 
                      || locale.isWeekend(date) 
                      || date > new Date() ;
                }
    }, "mycal");
},

然后您的按钮将仅显示或隐藏日历，

then your button will have only show or hide calendar ,

oncldriconclick : function() {
   if(domStyle.get(this.calendar.domNode,"display") === "none")
       domStyle.set(this.calendar.domNode,"display","table");
    else 
       domStyle.set(this.calendar.domNode,"display","none");

}

还添加css以在启动时隐藏日历

add also css to hide calendar on startup

#mycal {
  display:none;
}

require(["dojo/parser",
    "dijit/form/Button",
    "dijit/Calendar",
    "dojo/dom-style",
    "dijit/registry",
    "dojo/date",
    "dojo/date/locale",
    "dojo/ready",
    "dojo/domReady!"
], function(parser, Button, Calendar,domStyle, registry, dojoDate, locale, ready){

    disable_before_days = 52;

    ready(function(){
    
      var button = registry.byId("btn");
      
      button.on("click",function(e){
        if(domStyle.get(calendar.domNode,"display") === "none")
          domStyle.set(calendar.domNode,"display","table");
        else 
          domStyle.set(calendar.domNode,"display","none");
      });
      
      var calendar = new Calendar({
        value: new Date(),
        isDisabledDate:function(date, localString){
          return dojoDate.difference(date, new Date(), "day") > disable_before_days 
              || locale.isWeekend(date) 
              || date > new Date() ;
        }
       }, "mycal");
    });
    
});

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: Lucida Sans, Lucida Grande, Arial !important;
  font-size: 13px !important;
  background: white;
  color: #333;
}

#mycal .dijitCalendarDisabledDate {
  background-color: #333;
  text-decoration: none;
}

#mycal .dijitCalendarContainer {
  margin: 25px auto;
}

#mycal {
  display:none;
}

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/calendar/themes/claro/Calendar.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<body class="claro">
  <div id="btn" data-dojo-type="dijit/form/Button">Show / Hide</div><br />
  <div id="mycal" style="display:none"></div>

</body>

这篇关于单击禁用特定日期的dijit图标按钮时，加载dijit日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！