CODEWITHSUNDEEP
javascriptjquerycssdatepicker
Angel Silvan
Angel Silvan

Reputation: 83

How to add a class in jQuery Datepicker

I have a DatePicker jQuery calendar in my Web App. The arrows which change to the previous or the next month are 'transparent' at the moment. However, I realised that it works beacause if I click on the "arrow" the month changes.

I've tried the following code on the Developper Tool and it works:

$('.ui-datepicker-next span').addClass('ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-alt-icon ui-nodisc-icon');
$('.ui-datepicker-prev span').addClass('ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-alt-icon ui-nodisc-icon');

How can I add this code sample in mi code? I've tried to include it on the "beforeShow" method but it doesn't work.

Have someone any idea to show the icons?

Thanks!!

Upvotes: 0

Views: 1518

Answers (2)

amilete
amilete

Reputation: 106

If your icons are not being displayed properly it's probably because you are missing something like the css styles.

Anyway, answering to your question, if what you want to do is add those clases after the datepicker has opened, you can add a small delay in your beforeShow method like the following:

setTimeout(function() {
  $('.ui-datepicker-next span').addClass('ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-alt-icon ui-nodisc-icon');
  $('.ui-datepicker-prev span').addClass('ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-alt-icon ui-nodisc-icon');
}, 500);

That will add the classes after 500ms which will be enough for jquery to generate the datepicker

Upvotes: 2

Niklesh Raut
Niklesh Raut

Reputation: 34914

Try to run your jquery after page load

// A $( document ).ready() block.
$( document ).ready(function() {
    $('.ui-datepicker-next span').addClass('ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-alt-icon ui-nodisc-icon');
    $('.ui-datepicker-prev span').addClass('ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-alt-icon ui-nodisc-icon');
});

Upvotes: 0

Related Questions