结合 tinywatermark 和 jquery ui datepicker 插件

Question

我有以下 fiddle 在相同的输入字段 tinywatermark 和 jquery ui datepicker 插件。

但他们没有一起工作。日期选择器没有打开。

我怎样才能让它们一起工作？

我认为问题在于 tinywatermark 插件中的 clone 函数。 这是tinywatermark plugin

谢谢

Answer 1

如果您不要求“水印”在过时的浏览器中可见，您可以在输入中使用 html 标签“占位符”并删除水印插件：

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

您也可以使用不进行克隆但会填充占位符行为的 jQuery 插件，例如：https://github.com/mathiasbynens/jquery-placeholder

Answer 2

Tinywatermark 正在克隆原始输入并将其替换为该克隆。这就是为什么 dateinput 不再在那里工作的原因。你可以尝试使用这样的东西：

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