1

我的项目中有一个 Materialize 和 Datetime 选择器。问题在于表示为的 Materialize 库 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">正在与日期时间选择器进行交互。当我打开以选择日期和时间时，允许选择时间的部分丢失，但在删除 Materialize 库时出现。此外，当用户滚动页面时，我无法弄清楚如何将日期时间选择器保持在其位置。

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

$(function() {
  $('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
});
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0px;
  top: 0px;
  width: 100%;
  max-height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 500px;
  height: 500px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>SB Admin 2 - Tables</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <link href="css/sb-admin-2.min.css" rel="stylesheet">

  <link href="css/couponsexample.css" rel="stylesheet">
</head>

<body>
  <button class="buttonTest" id="myBtn">New Discount</button>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <form id="msform">
        <span class="close">&times;</span>
        <fieldset>
          <input type="text" name="datetimes" />
        </fieldset>
      </form>
    </div>
  </div>
  </div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <script src="couponsjs.js"></script>
</body>

</html>

4

1 回答 1

1

我对Materialize并不熟悉，但只是在检查器中查看css，看起来select元素的显示设置为none，通过materialize css中的某些设置。如果你添加类似的东西

.daterangepicker select {

  display:inline-block;
}

到你的CSS，这可能会解决这个问题。我编辑了代码段，看看它是否真的适用于您的示例。我还不太清楚另一个问题是什么，但我确信它可能与 CSS 有关，您可以根据您想要它做什么来覆盖它。

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

$(function() {
  $('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
});
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0px;
  top: 0px;
  width: 100%;
  max-height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 500px;
  height: 500px;
}
.daterangepicker select {
  display: inline-block;
} 
<!DOCTYPE html>
<html lang="en">

<head>
  <title>SB Admin 2 - Tables</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <link href="css/sb-admin-2.min.css" rel="stylesheet">

  <link href="css/couponsexample.css" rel="stylesheet">
</head>

<body>
  <button class="buttonTest" id="myBtn">New Discount</button>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <form id="msform">
        <span class="close">&times;</span>
        <fieldset>
          <input type="text" name="datetimes" />
        </fieldset>
      </form>
    </div>
  </div>
  </div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <script src="couponsjs.js"></script>
</body>

</html>

于 2019-07-06T02:45:37.573 回答