jquery 如何在Datepicker中更改默认突出显示的“今天”日期

ssgvzors  于 2023-08-04  发布在  jQuery
关注(0)|答案(6)|浏览(124)

我使用日期选择器在两个日期字段中选择日期(从日期和到日期)。
在这些中,默认突出显示的日期是今天的日期。我需要在第二个日期选择器中将默认突出显示的日期更改为其他日期。(以今天+8天为例)。
我如何正确地做到这一点?
以下是我的约会对象

$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd"); // ISO 8601
$( "#datepicker2" ).datepicker();
$( "#datepicker2" ).datepicker("option", "dateFormat", "yy-mm-dd");
});

字符串

  • 谢谢-谢谢

根据迈克尔的屏幕截图
x1c 0d1x的数据
我写了以下内容,

$( "#datepicker2" ).datepicker("option", "defaultDate", +2);


你仍然可以看到21天(今天)是突出显示的,23天是用黑线包围的。我想看看23号在灯光下看起来像21号。21、不需要强调

vltsax25

vltsax251#

$( "#datepicker" ).datepicker("option", "defaultDate", +8);

字符串
来源:http://api.jqueryui.com/datepicker/#option-defaultDate
编辑:当前日期将始终作为日期选择器的一部分突出显示。没有关闭此功能的选项。它是为了向用户明确“今天”是什么。但是,您可以使用一些CSS覆盖此图形外观:

.ui-datepicker-today a.ui-state-highlight {
        border-color: #d3d3d3;
        background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
        color: #555555;    
    }
   .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
        border-color: #aaaaaa;
        background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
        color: #212121;
    }


工作jsfiddle:http://jsfiddle.net/EpWud/
这假设你使用的是默认主题-但是你可以对任何主题做同样的练习。只需像上面的代码一样覆盖样式。但是,这个CSS是不完整的。您需要对其他情况进行覆盖,例如:hover状态。

oiopk7p5

oiopk7p52#

jQuery UI DatePicker change highlighted "today" date中所选答案的一个小调整

// Get users 'today' date
var localToday = new Date();
localToday.setDate(tomorrow.getDate()+1); // tomorrow

// Pass the today date to datepicker
$( "#datepicker" ).datepicker({
    showButtonPanel: true,
    localToday: localToday    // This option determines the highlighted today date
});

字符串
我已经覆盖了2个日期选择器方法,有条件地使用新的“今天”日期设置,而不是new Date()。新设置称为localToday
像这样覆盖$.datepicker._gotoToday$.datepicker._generateHTML

$.datepicker._gotoToday = function(id) {
    /* ... */
    var date = inst.settings.localToday || new Date()
    /* ... */
}

$.datepicker._generateHTML = function(inst) {
    /* ... */
    tempDate = inst.settings.localToday || new Date()
    /* ... */
}


下面是一个demo,它显示了完整的代码和用法:http://jsfiddle.net/NAzz7/5/

jvlzgdj9

jvlzgdj93#

我对UI核心显示defaultDate的方式不太满意,它的边框很脆弱。经过多次尝试和错误,我向第二个datepicker添加了一个焦点方法,并使用了setDate方法。

$('#datepicker2').datepicker().focus(function(){
   $(this).datepicker('setDate',+2);
});

字符串
这将给予你一个基于主题的背景颜色的选定日期,今天也将保留它的背景时,日期选择器打开。这里唯一的缺点是,如果你没有从日期选择器中选择日期,你必须返回并清除输入字段。
看起来有点乱,因为我通常不喜欢使用焦点方法,但我坚持使用它。

wa7juj8i

wa7juj8i4#

这可以通过更改jquery-ui.js中_generateHTML下的变量来实现

today = this._daylightSavingAdjust(
                new Date("Your Date Here") ), // clear time

字符串

hc8w905p

hc8w905p5#

使用onSelect选项。它应该看起来像这样:

$('#datepickerID').datepicker({
                    onSelect: function(dateText, inst) {
                        $('#ui-datepicker-div').addClass("calendar-piced");
                    },
                    showButtonPanel: true,
                    gotoCurrent: true
                });

个字符

mftmpeh8

mftmpeh86#

突出显示defaultDate的另一种解决方案是覆盖与所选defaultDate对应的CSS类:

.ui-datepicker td.ui-datepicker-days-cell-over a {
    background: #7ca600;
}

字符串
演示jsfiddle:http://jsfiddle.net/0vjadze4/(突出显示todaydefaultDate
当然,您可以将其与the answer provided by Mickael结合使用,以仅突出显示defaultDate:`

.ui-datepicker td.ui-datepicker-days-cell-over a {
    background: #7ca600;
}
.ui-datepicker-today a.ui-state-highlight {
    border-color: #d3d3d3;
    background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
    color: #555555;    
}
.ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
    border-color: #aaaaaa;
    background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
    color: #212121;
}


演示jsfiddle:http://jsfiddle.net/43svpe80/1/(仅突出显示defaultDate

相关问题