Question

我的项目中有一个Materialize和Datetime选择器。问题在于，标为<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">的Materialize库正在与Datetime选择器交互。当我打开选择日期和时间时，缺少用于选择时间的部分，但是在删除Materialize库时出现。另外，当用户滚动页面时，我无法弄清楚如何将Datetime选择器保持在原处。

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元素的显示通过物化css中的某些设置被设置为none。如果您添加类似

.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>

物化和日期时间选择器相互交互

1 个答案: