All geek questions in one place

JQuery UI Datepicker: don't highlight today when it's also selected

I am using jQuery datepicker to select dates. It works great, except that by default I change the behavior. When you select a day, the selected day is highlighted (which I like). The current day is also highlighted, but a different css style is used (which I also like). However, if you select the current day, the selection, because it is the current day, replaces it with the selected ... I would prefer it to be selected to replace the current highlight of the current day, which, in my opinion, it will be very clear that you chose the current day.

Now I feel that I can possibly update css to solve my problem. However, I really do not want to configure the ready-made jQuery UI css, because later I want to add skins to my application. This means that if I take a bunch of jQuery-based user interfaces ... I have to do the same setup for everyone (very undesirable).

I could probably update the actual Datepicker plugin to do this, but then I ran into the problem that if I want to update my Datepicker later ... I need to remember that I need to make this fix again.

Ideally, I could use some option built into Datepicker to achieve my goal, but so far none of the options seem correct. I would agree to some kind of hacking JavaScript, or css flopped on the page, but now I'm at a loss.

+3
source share
4 answers

Adding an extra CSS file to your page will certainly be preferred. It is easy to manage and uses CSS the way it was intended to be used!

CSS jQuery CSS CSS , . ( , .)

.

<head>
  <link href="base_jquery_css_file" rel="stylesheet"/>
  <link href="theme_jquery_css_file" rel="stylesheet"/>

  <link href="your_override_css" rel="stylesheet"/>
</head>

"your_override_css" :

.ui-state-active, .ui-widget-content .ui-state-active {
  /*any CSS styles you want overriden i.e.*/
  border: 1px solid #999999;
  background-color: #EEEEEE;
}

:

, , , , td "" ... , , , ( ), , PHPexperts.ca :

.ui-datepicker-today .ui-state-active {
  border: 1px solid #aaaaaa;
}
+7

, , "" PHPexperts.ca, , , .

, "", , , "today", a

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active

, Firefox Firebug ( , datepicker, " ".

jQuery UI "UI darkness" , css,

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:url("images/ui-bg_inset-soft_30_f58400_1x100.png") repeat-x scroll 50% 50% #F58400; border:1px solid #FFAF0F; color:#FFFFFF; }

, .

0

This is actually pretty simple, just add a border and background element !importantto the class .ui-state-active.

0
source 
.ui-state-highlight {
    border: 1px solid #d3d3d3 !important;
    background-color: #e6e6e6 !important;
}
0
source

Source: https://habr.com/ru/post/1706128/

More articles:


All Articles