如何将自定义类添加到我的 JQuery UI Datepicker [英] How to add a custom class to my JQuery UI Datepicker
问题描述
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屋!