[英]Price range slider not working in mozzila browser but working in chrome & opera browser
[英]Javascript date range slider is working in chrome but not in other browser?
我有一個javascript日期范圍滑塊代碼,該代碼在Chrome瀏覽器中可以正常工作,但在其他瀏覽器中不能工作。
這是代碼:
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: new Date('2012.01.01').getTime() / 1000,
max: new Date('2019.01.01').getTime() / 1000,
step: 86400,
values: [ new Date('2013.01.01').getTime() / 1000, new Date('2014.01.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());
});
</script>
<p>
<label for="amount">Date range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/>
</p>
<div id="slider-range"></div>
注意:我認為,日期功能不支持其他瀏覽器,如Firefox,IE8 +,Safari
您的代碼使用datestring構造函數,這在瀏覽器之間是不一致的。 您應檢查日期規范以使用標准格式,例如:
new Date('December 17, 1995 03:24:00');
要么
new Date(1995, 11, 17, 03, 24, 0, 0); // Beware of the month param starting at 0 !
檢查下面的代碼片段是否已相應更新(已通過Firefox和chrome測試):
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $( "#slider-range" ).slider({ range: true, min: new Date('January 01, 2012 00:0:00').getTime() / 1000, max: new Date('January 01, 2019 00:0:00').getTime() / 1000, step: 86400, values: [ new Date('January 01, 2013 00:0:00').getTime() / 1000, new Date('January 01, 2014 00:0:00').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()); }); </script> <p> <label for="amount">Date range:</label> <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/> </p> <div id="slider-range"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.