javascript - jQuery 日期范围选择器在 Firefox 和 Edge 中不起作用

Question

看看我的代码：

$(function() {
  $("#slider-range").slider({
    range: true,
    min: new Date('2010.01.01').getTime() / 1000,
    max: new Date('2020.03.31').getTime() / 1000,
    step: 86400,
    values: [new Date('2012.07.12').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
    slide: function(event, ui) {
      $("#amount").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
    }
  });
  $("#amount").val((new Date($("#slider-range").slider("values", 0) * 1000).toDateString()) +
    " - " + (new Date($("#slider-range").slider("values", 1) * 1000)).toDateString());
});




$(function() {
  $("#slider-range2").slider({
    range: true,
    min: new Date('2010.01.01').getTime() / 1000,
    max: new Date('2020.03.31').getTime() / 1000,
    step: 86400,
    values: [new Date('2012.07.12').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
    slide: function(event, ui) {
      $("#amount2").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
    }
  });
  $("#amount2").val((new Date($("#slider-range2").slider("values", 0) * 1000).toDateString()) +
    " - " + (new Date($("#slider-range2").slider("values", 1) * 1000)).toDateString());
});

body {
  font-family: sans-serif;
  background: #f9f9f9;
}

body *,
body *:before,
body *:after {
  box-sizing: border-box;
}

.date-range-col {
  width: 100%;
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 10px;
}

.date-range-col .date-range-item {
  margin-bottom: 25px;
}

.date-range-col .date-range-display {
  display: flex;
  font-size: 13px;
  margin-bottom: 10px;
}

.date-range-col .date-range-display label {
  font-weight: normal;
  width: 40%;
  align-items: center;
  display: flex;
}

.date-range-col .date-range-display input {
  width: auto;
  text-align: center;
  color: #000;
  border: 1px solid #eee;
  margin-left: auto;
  font-weight: normal;
  padding: 6px 3px;
  border-radius: 4px;
  font-size: 12px;
}

.date-range-col .ui-widget-content {
  background: #d6d8e7;
  border-radius: 10px;
  height: 9px;
  border: 0;
  -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.date-range-col .ui-widget-content .ui-state-default {
  background: #57669f;
  border-radius: 100%;
  border: 3px solid #d5d8e7;
  cursor: pointer;
  outline: 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
}

.date-range-col .ui-widget-content .ui-state-default:hover {
  background: #6f81c7;
}

.date-range-col .ui-slider-horizontal .ui-slider-handle {
  top: -0.36em;
}

.date-range-col .ui-slider .ui-slider-handle {
  width: 22px;
  height: 22px;
}

.date-range-col .ui-widget-header {
  background: #8b959f;
  -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="date-range-col">
  <div class="date-range-item">
    <div class="date-range-display">
      <label for="amount">Production Date:</label>
      <input type="text" id="amount" size="28" readonly/>
    </div>
    <div id="slider-range"></div>
  </div>
  <div class="date-range-item">
    <div class="date-range-display">
      <label for="amount2">Production Date:</label>
      <input type="text" id="amount2" size="28" readonly/>
    </div>
    <div id="slider-range2"></div>
  </div>
</div>

它不适用于 Mozilla Firefox。

有什么办法可以解决这个问题吗？

标签： javascriptjqueryhtmlcssfirefox

Answer 1

您指定的日期格式在 Firefox 中无效。请使用正斜杠格式的日期。喜欢：

new Date('2010/01/01')