Materialise 和 Datetime Picker 相互交互

Question

我的项目中有一个 Materialize 和日期时间选择器。问题是表示为 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 的 Materialise 库正在与日期时间选择器交互。当我打开 select 日期和时间时，允许 selecting 时间的部分丢失，但在删除 Materialise 库时出现。此外，我不知道如何在用户滚动页面时将日期时间选择器保持在原位。

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>

Answer 1

我对 Materialize 不是很熟悉，但只是查看检查器中的 css，看起来 select 元素的显示已通过某些设置设置为 none在具体化 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>

Materialise 和 Datetime Picker 相互交互

Materialize and Datetime Picker Interact with Each Other

html

css

datetimepicker

materialize