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

Question

Have a look at my code:

 $(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>

It is not working in Mozilla Firefox.

Is there any solution to solve this problem?

Answer 1

The date format you specified is invalidated in firefox. Please use forward slash format for the date. like:

new Date('2010/01/01')