Home / Questions / 229840
Accepted
Juan
Asked: 2020-01-16 08:19:19 +0800 CST 2020-01-16 08:19:19 +0800 CST

Стиль выбора даты при вводе типа даты (дата)

  • 772

Можно ли добавить очень выделенный класс CSS, такой как черный фон, к дням, которые нельзя выбрать в календаре (min="текущий день")? Как вы можете видеть на изображении, дни, которые нельзя выбрать, имеют очень серый цвет, очевидно, что пользователи с нарушениями зрения имеют доступ к этой странице.

<input type="date" name="fechaInicio" id="fechaInicio" 
min="2019-01-15" max="2020-01-01" class="readonly">

<script>
 $(".readonly").keydown(function(e){
    e.preventDefault();
});
</script>

введите описание изображения здесь

html

3 Answers

  1. Насколько я знаю, вы не можете изменить стиль календаря ( ссылка ):

    Как изменить внешний вид средства выбора даты?

    В настоящее время вы не можете изменить внешний вид средства выбора даты. В WebKit мы ранее предоставили способы стилизации элементов управления формы с помощью CSS-свойства -webkit-appearance или селектора псевдокласса ::-webkit-foo. Однако всплывающее окно календаря не предоставляет таких способов в WebKit, потому что оно отделено от документа, как всплывающее меню для , и в настоящее время не существует стандарта для управления стилем его подэлементов.

    Что можно изменить, так это внешний вид ввода с псевдоклассами, webkitно я думаю, что вам это не интересно. Вот пример, полученный из этого codepen :

    $(document).ready(function () {
    $('input[type="date"]').click();

});

function closeDate(dateInput) {
    $(dateInput).attr('type', 'text');
    $(dateInput).attr('type', 'date');
}
    input[type=date] {
  height: 35px;
  margin: 0 auto;
  width: 100%;
  font-family: arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #959595;
  outline: none;
  border: 0;
  border-radius: 3px;
  padding: 0 3px;
  color: #fff;
}
input[type=date]::-webkit-datetime-edit-month-field {
  color: red;
}
input[type=date]::-webkit-datetime-edit-day-field {
  color: white;
}
input[type=date]::-webkit-datetime-edit-year-field {
  color: blue;
}
input[type=date]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
  right: 5px;
  margin-right: 4px;
}
input[type=date]::-webkit-inner-spin-button {
  height: 30px;
}
input[type=date]::-webkit-calendar-picker-indicator {
  font-size: 18px;
}
input[type=date]::-webkit-calendar-picker-indicator:hover {
  background-color: #959595;
  color: #e6e6e6;
  cursor: pointer;
}
input[type=date]::-webkit-calendar-picker-indicator:active {
  color: blue;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="fechaInicio" id="fechaInicio" 
min="2019-01-15" max="2020-01-01" class="readonly">

<script>
 $(".readonly").keydown(function(e){
    e.preventDefault();
});
</script>

    • 1
  2. Best Answer

    По сути , в данный момент НЕВОЗМОЖНО изменить стили средства выбора даты, поскольку реализация зависит от технологии каждого браузера, каждому из них потребуется свой собственный стиль (есть что-то для Chrome, Vivaldi и Opera, но это только влияет на поле, а не на средство выбора даты).

    Больше информации об этом есть на MDN: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input/date .

    Что касается Chrome, в блоге разработчиков объясняется, что (на данный момент) нет возможности изменить стиль средства выбора даты:

    Как изменить внешний вид средства выбора даты?

    В настоящее время вы не можете изменить внешний вид средства выбора даты . В WebKit мы ранее предоставили способы стилизации элементов управления формы с помощью CSS-свойства -webkit-appearance или селектора псевдокласса ::-webkit-foo. Однако всплывающее окно календаря не предоставляет таких способов в WebKit, потому что оно отделено от документа, как всплывающее меню для , и в настоящее время не существует стандарта для управления стилем его подэлементов.

    Нас интересует та часть, которая выделена жирным шрифтом в абзаце (примерный перевод):

    В настоящее время вы не можете изменить стиль/внешний вид средства выбора даты.

    Указанная информация актуальна до 14 января 2019 года.

    Дополнительная информация (на английском языке) по следующей ссылке: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome .

    • 1

  3. Я смог изменить цвет значка, который входит в дату типа ввода; в моем случае я просто хотел изменить его на белый цвет, потому что фон был темным.

    input[type="date"]::-webkit-inner-spin-button,::-webkit-calendar-picker-indicator{
    filter: drop-shadow(16px 16px 20px rgb(255, 255, 255)) invert(100%);
}
input[type="date"]{
    background-color:pink;
}
    <input type="date" />

    input[type=date]::-webkit-inner-spin-button,::-webkit-calendar-picker-indicator{
filter: drop-shadow(16px 16px 20px rgb(255, 255, 255)) invert(100%);

    }

    • 0