主页 / 问题 / 1127807
Accepted
ref21
Asked:2020-05-19 06:27:39 +0000 UTC2020-05-19 06:27:39 +0000 UTC

如何在日期之间设置范围？

  • 772

我感兴趣如何在日期之间做出这样的范围？有合适的插件吗？

在此处输入图像描述

css

1 个回答

  1. Best Answer

    如果您正在使用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>

    • 1

相关问题