Question

I’m using the default jquery’s date picker that is triggered by assigning the dp class to an input element.
It works fine if i set the class of the element in the html, but if I assign the dp class with js (document.getElementById(eleId).className = 'dp';) the date picker is not triggered when the user clicks on the input.
Any idea?

Answer 1

That’s because when you bind the datepicker event to your elements (via the selector, probably $(".dp"), it is only bound to the ones that are found at that point in time. Any time after that, like you said, elements may gain the class (or even lose it). My suggestion would be to do something like this:

<div id="container">
    <!-- Your elements that may or may not have the class "dp" -->
</div>

<script type="text/javascript">
    $("#container").on("click", "dp", function () {
        $(this).datepicker('destroy').datepicker({showOn: 'both'}).focus();
    });
</script>

Where of course you can just put the binding into document.ready, and you can change the options passed to datepicker. Instead of "#container", you could just use "body" or something if you can’t narrow it down that much. Also, you’ll need to account for onfocus too in some way.

Something I would suggest though, is to use jQuery everywhere you can, since you already include it. For example, your code: document.getElementById(eleId).className = 'dp'; is fine, but why not use the method addClass, and why not use the "#" selector? Like:

$("#" + eleId).addClass("dp");
// and alternatively
$("#" + eleId).removeClass("dp");

A problem with using className is that it isn’t as easy to manipulate the class of the element. Using .className = "whatever" overwrites any previous className value – of course, you can account for that, but it’s easier to just use jQuery for this. Also, when using removeClass, jQuery may or may not automatically remove any event bindings for the element, where className does nothing like that. If you were to do things like removing and adding classes, it could get messy.