Как сделать range между датами?

Question

Меня интересует как сделать такой range между датами? Может есть подходящий плагин?

Answer 1

Если используете React, то на ум сразу приходит react-datepicker. Если же jQuery – то jquery-datetime-picker. Всё зависит от стека технологий, который вы используете у себя в проекте.

Если не требуется какой-то сложный функционал, можно вообще сделать без JavaScript:

.container {
  padding-top: 30px;
}
.ppDate {
  height: 38px;
  font-size: 12px;
  padding-left: 6px;
}
.ppDate::-webkit-inner-spin-button,
.ppDate::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
.ppDate:focus::-webkit-calendar-picker-indicator, .ppDate:hover::-webkit-calendar-picker-indicator {
  display: block;
  -webkit-appearance: menulist;
}
.ppDate::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
.constrained {
  max-width: 160px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <form>
    <div class="row justify-content-md-center">
      <div class="col">
        <div class="form-group">
            <label for="pure-date">Before</label>
            <div class="input-group mb-4">
            <div class="input-group-prepend">
              <span class="input-group-text">@</span>
            </div>
            <input type="date" class="form-control" id="pure-date" aria-describedby="date-design-prepend">
            </div>
          </div>
      </div>
      <div class="col">
          <div class="form-group">
            <label for="from-date">After</label>
            <div class="input-group mb-4 constrained">
            <div class="input-group-prepend">
              <span class="input-group-text">@</span>
            </div>
            <input type="date" class="form-control ppDate" id="from-date" aria-describedby="date-design-prepend">
            </div>
          </div>
      </div>
  </form>
</div>

БЛОГ НА HUSL

Как сделать range между датами?

Ответы (1 шт):