Combine tinywatermark and jquery ui datepicker plugins

Question

I have the following fiddle that have on the same input field tinywatermark and jquery ui datepicker plugins.

But they are not working together. the datepicker doesn't open.

How can I do to make them work together?

I think that the problem is because the clone function in the tinywatermark plugin. This is the tinywatermark plugin

Thanks

Answer 1

Tinywatermark is cloning the original input and replacing it with that clone. Thats why dateinput isn't working there any more. You can try to use something like this:

$('input')
    .datepicker()
    .on('blur', function() {
        if ($(this).val() == '') {
            $(this).val('choose date');
        }
    })
    .on('focus', function() {
        if ($(this).val() == 'choose date') {
            $(this).val('');
        }
    })
    .trigger('blur');

Answer 2

If you do not require the 'watermark' to be visible in obsolete browsers, you can use the html tag 'placeholder' in your input and remove the watermark-plugin:

<input type='text' id='test' value='' placeholder='choose date' />

You could also use a jQuery plugin that does not make a clone, but does polyfill the placeholder behaviour, this one for example: https://github.com/mathiasbynens/jquery-placeholder