Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
883 views
in Technique[技术] by (71.8m points)

jquery - How to change default highlighted "today" date in datepicker

I'm using datepicker for selecting dates in two date fields (from date and to date).

In those, the default highlighted date is today date. I need to change the default highlighted date to some other day in the second datepicker. (as a example today + 8 days).

How can I do this correctly ?

following are my datepickers,

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

Thanks.

---------------------------------- Update -----------------------------------------------

Following the screen shot for Michael,

Calender for two days after (today+2 days)

I put the following,

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

You can see still the 21 day (today) is Highlighting and 23 is bordered with black line. I need see 23 looks like 21 with hi lighting. No need to highlight 21.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
    $( "#datepicker" ).datepicker("option", "defaultDate", +8);

Source: http://api.jqueryui.com/datepicker/#option-defaultDate

EDIT: The current date will always be highlighted as part of the datepicker. There is no option to turn off this feature. It is to make clear to the user what "today" is. You can however override the graphical appearance of this w/ some 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;
    }

Working jsfiddle: http://jsfiddle.net/EpWud/

This assumes you're using the default theme - but you can do this same practice for any theme. Just override the styles like the code above. This CSS is incomplete, however. You'll need to make overrides for other cases, like the :hover state.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...