在dijit的图标按钮的点击加载的dijit日历的具体日期禁用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在dijit的图标按钮的点击加载的dijit日历的具体日期禁用相关的知识，希望对你有一定的参考价值。
我想说明具体日期禁用加载在dijit的图标点击按钮dijit的日历，
为了这个，我尝试了两种方式
第一招：在js函数加载日历
得到错误的尝试注册"id==mycal"但ID已被注册。”
<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);
},
方法二：加载日历与var calendar = registry.byId("mycal"); js函数的postcreate，如果我有以下html和传球isdisableDate arguemnts在postcreate功能加载，禁用日期不应用在启动时，但他们只适用一些日期的选择后，我需要这是应用日历启动
<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() ;
}
},
我怎样才能用的方法，其中任何一个日历启动禁用日期。
答案
错误是因为要创建一个窗口小部件（新）与已实例ID MYCAL（在道场注册表中定义），
所有你需要的就是把实例中postCreate和按钮只是用"dojo/dom-style"类切换显示：
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");
},
那么你的按钮将只能显示或隐藏日历，
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隐藏在启动日历
#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日历的具体日期禁用的主要内容，如果未能解决你的问题，请参考以下文章