jQuery UI 日期选择器今日链接

Posted 2023-05-07

【中文标题】jQuery UI 日期选择器今日链接

【英文标题】：jQuery UI Datepicker Today Link

【发布时间】：2011-03-09 12:41:57

【问题描述】：

我正在为一个项目使用 jQuery UI Datepicker，但是当用户单击它时，我需要使用今天按钮将日期输入到文本字段中。默认情况下，它只选择日期，但不将其输入到字段中。我猜这只需要对我的 jQuery UI 文件进行快速修改，但我要改变什么？谢谢。

编辑：我试过这个：http://dev.jqueryui.com/ticket/4045 但它不起作用！

【问题讨论】：

有什么更新吗？尽快为项目需要此功能。谢谢。

【参考方案1】：

我在这里找到了一个可行的解决方案：http://forum.jquery.com/topic/jquery-ui-datepicker-today-button。只需使用这个 jQuery 的 sn-p（我只是将它与我​​的 datepicker 初始化代码一起放入）：

$('button.ui-datepicker-current').live('click', function() 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
);

我遇到的唯一问题是单击“今天”按钮后焦点仍保留在输入框中，这意味着您无法再次单击它来选择其他日期。这可以通过添加 blur() 后缀来解决：

$('button.ui-datepicker-current').live('click', function() 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
);

我也不喜欢“今天”按钮的样式 - 也许这只是我的主题或其他东西，但与“完成”按钮相比，今天按钮有点灰显。这可以通过以下 CSS 修复（可能因不同主题而异，我不确定）：

/* This edit gives five levels of specificity, thus making it override other styles */
.ui-datepicker div.ui-datepicker-buttonpane button.ui-datepicker-current 
    font-weight: bold;
    opacity: 1;
    filter:Alpha(Opacity=100);

【讨论】：

你提供的 CSS，只有在我添加 .ui-datepicker 时才对我有用（.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current）

@Niels 这是因为特殊性规则。我将编辑 A 以反映适当的特异性。

适用于最新版本 1.8.16 Jquery。许多其他 hacks/overrides 已经过时并且不起作用。

【参考方案2】：

我意识到这有点晚了，但我刚刚遇到了这个问题，并且证明该解决方案很有效。

但是，按钮样式问题是由 jQuery ui 类引起的。 我在日期文本输入的点击动作中添加了以下代码：

$('.date').click(function() 
    $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary');
);

这会删除错误的类，并将正确的类添加到按钮，使其与“完成”按钮相同。 您使用什么主题并不重要。 为了完整起见，这是我的完整代码：

$('.date').datepicker(
    dateFormat: 'yy-mm-dd',
    showButtonPanel: true
).click(function() 
    $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary');
);
$('button.ui-datepicker-current').live('click', function() 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
);

只需添加<input type="text" class="date" value="" />，您就可以开始了。

【讨论】：

感谢您提供此信息 - 它很有帮助。不过，我注意到在单击“今天”按钮后，它又变灰了。关于如何防止这种情况的任何想法？

单击下一个/上一个月份会使“今天”按钮恢复为旧样式。我最终使用了 CSS 覆盖。这种用ui-priority-secondary 替换ui-priority-primary 的想法似乎是合乎逻辑的方法，但由于JQuery datepicker 重新创建了按钮，因此失败了。