如何添加自定义类到我的JQuery UI Datepicker [英] How to add a custom class to my JQuery UI Datepicker
问题描述
我有几个输入可以触发JQuery UI datepickers,例如
< input id =onetype =text />
< input id =twotype =text/>
< input id =threetype =text/>
< input id =fourtype =text/>
对于每个创建的jQuery UI日期选择器,我想根据输入的ID分配一个自定义类触发它,即 .one
, .two
, .three
因此,如果datepicker由第一个输入触发,则生成的HTML将如下所示:
< div class =one ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-allid =ui-datepicker-div>
注意第一个类 one
这可能吗?
beforeShow
可以用来操作类
,然后再显示 datepicker 。
$('input')。datepicker({
beforeShow:function(input,inst){
$('#ui-datepicker-div')。removeClass(function(){
return $('input')。get(0).id;
});
$('#ui-datepicker-div')。addClass(this.id);
}
});
演示 (使用jQuery 1.6.2,但需要jQuery> v1.4作为 .removeClass ()
,它接受一个函数)
注意 < input>
id
s)with a general $('input')
选择器,您可能想限制只是选择已修改为日期选择器的< input>
元素。
编辑只是有一个upvote这个和看代码,它似乎没有做我应该解释的(也许我误解了这个问题!所以,这里有一个版本,它添加了一个等于< input>
点击的 id
日期戳。还使用原始的 .removeClass()
,因此这将与jQuery> v1.2一起使用。
var inputIds = $('input')。map(function(){
return this.id;
})get()。 //空格分隔准备好removeClass
$('input')。datepicker({
beforeShow:function(input,inst){
$('#ui-datepicker- div')。removeClass(inputIds);
$('#ui-datepicker-div')。addClass(this.id);
}
});
I have several inputs which trigger JQuery UI datepickers e.g.
<input id="one" type="text"/>
<input id="two" type="text"/>
<input id="three" type="text"/>
<input id="four" type="text"/>
For each jquery UI datepicker created, I want to assign a custom class based on the ID of the input which triggered it i.e. .one
, .two
, .three
So if the datepicker is triggered by the first input the resulting HTML will look like:
<div class="one ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div">
Note the first class one
Is this possible? The 'create
' method of the datepicker does not seem to work for me...
beforeShow
can be used to manipulate the class
before showing the datepicker.
$('input').datepicker({
beforeShow: function(input, inst) {
$('#ui-datepicker-div').removeClass(function() {
return $('input').get(0).id;
});
$('#ui-datepicker-div').addClass(this.id);
}
});
Demo (using jQuery 1.6.2 but needs jQuery > v1.4 for the .removeClass()
which takes a function)
Note This works by removing all the classes (i.e. <input>
id
s) with a **general $('input')
selector which you might want to limit to just pick up the <input>
elements that have been modified into date pickers.
Edit Just had an upvote for this and looking at the code, it did not seem to do what I explained it should (maybe I misunderstood the question!). So, here is a version which adds a class equal to the id
of the <input>
clicked on to the datepicker. Also uses the original .removeClass()
so this will work with jQuery > v1.2.
var inputIds = $('input').map(function() {
return this.id;
}).get().join(' '); // space separated ready for removeClass
$('input').datepicker({
beforeShow: function(input, inst) {
$('#ui-datepicker-div').removeClass(inputIds);
$('#ui-datepicker-div').addClass(this.id);
}
});
这篇关于如何添加自定义类到我的JQuery UI Datepicker的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!