Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: [duplicate]

You could try

$(document.getElementById('j_idt8:beginDateTxt')).mobiscroll().date({theme: 'android-ics light', mode:'scroller', display: 'bottom'});

In general jQuery uses something like CSS selectors in its $() function. In a CSS selector the : denotes a pseudo-class. However, in your case the : is just a part of the id.

If you use the generic getElementById(), the argument is not decomposed, but seen as an ID altogether. So by using getElementById() and wrapping the result with $() you can circumvent this "misunderstanding".

In general, however, I think it would be better to change the namespacing scheme in your JSF.

EDIT

The jQuery documentation on selectors states that you should escape special characters by the use of \\:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

This will lead to the answer already given by Daniel, which in my opinion is superior to the answer given above. The explanation, however, remains valid.

$("#j_idt8\\:beginDateTxt").mobiscroll().date({theme: 'android-ics light', mode:'scroller', display: 'bottom'});

If you want to use jQuery id selector you need to escape the : with \ and then to escape the \ (double escape)

Here:

$(function() {    $("#j_idt8\\:beginDateTxt").mobiscroll().date({        theme: 'android-ics light',        mode:'scroller', display: 'bottom'    });});