JQuery UI Datepicker: не выделять сегодня, когда он также выбран - PullRequest
4 голосов
/ 08 апреля 2009

Я использую jQuery datepicker , чтобы выбрать даты. Он работает нормально, за исключением 1 поведения по умолчанию, которое я хотел бы изменить. Когда вы выбираете день, выбранный день выделяется (что мне нравится). Текущий день также выделен, но с использованием другого стиля CSS (который мне также нравится). Однако, если вы выбираете текущий день, выделение, потому что это текущий день, заменяет его выбор ... Я бы предпочел, чтобы этот выбор был заменен выделением текущего дня, что, как мне кажется, очень бы ясно указало, что вы выбрали текущий день.

Теперь я чувствую, что могу обновить css, чтобы решить мою проблему. Тем не менее, я действительно не хочу настраивать готовый пользовательский интерфейс jQuery css, потому что хочу позже добавить скины в свое приложение. Это означает, что если я возьму кучу тем JQuery UI ... тогда мне придется сделать одну и ту же настройку на все из них (очень нежелательно).

Я мог бы, вероятно, обновить сам плагин Datepicker, чтобы сделать это, но затем я столкнулся с проблемой, что если я хочу обновить свой Datepicker позже ... Мне нужно помнить, чтобы исправить это снова.

В идеале, я мог бы использовать какую-то опцию, встроенную в Datepicker, для достижения своей цели, но на данный момент ни одна из опций не кажется верной. Я бы согласился на какой-то взлом JavaScript или css, но сейчас я в недоумении от идей.

Ответы [ 4 ]

7 голосов
/ 08 апреля 2009

Добавление дополнительного CSS-файла на вашу страницу определенно будет предпочтительным методом. Он легко управляется и использует CSS так, как это было задумано!

Вам потребуется поместить переопределенный CSS в тег head после любого ранее загруженного базового 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;
}

Примечание от Майка:

В итоге я обнаружил, что вокруг якорей, которые представляют дни, есть тд, и у тд также есть информация «сегодня» ... так что, несмотря на отсутствие кросс-браузерного способа выбора элемента, который имеет несколько классов (которые я нашел), в этом случае будет работать следующее, в новом файле, как описывает PHPexperts.ca:

.ui-datepicker-today .ui-state-active {
  border: 1px solid #aaaaaa;
}
0 голосов
/ 19 сентября 2017
.ui-state-highlight {
    border: 1px solid #d3d3d3 !important;
    background-color: #e6e6e6 !important;
}
0 голосов
/ 19 декабря 2011

На самом деле, это довольно просто, просто добавьте !important к классу .ui-state-active для фона и элемента border.

0 голосов
/ 18 августа 2010

Поскольку мне потребовалось некоторое время, чтобы выяснить, как точно воспроизвести «выбранный» стиль поверх стиля сегодня, даже с ответом из PHPexperts.ca, вот немного больше информации, которая может сделать его более простым, если у вас проблемы.

Если вы выбираете день, отличный от «сегодня», стиль, который вы должны скопировать для идентичного вида при выборе «сегодня», находится в теге a и в селекторе

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

Это легко найти, если у вас установлен Firefox с установленным Firebug (выберите дату, снова откройте указатель даты, щелкните правой кнопкой мыши и выберите «проверить элемент».

Для темы пользовательского интерфейса jQuery «Темнота пользовательского интерфейса» стиль, который необходимо скопировать в переопределенную 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; }

Если вы смените тему, похоже, что все эти три стиля изменятся.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...