jQuery滑块月/年 [英] Jquery Slider Month/Year
问题描述
我有一些代码,并且当前正在滑块上以以下格式显示日期:2013年1月1日星期二-2014年1月1日星期三,但是,我希望它以以下格式显示(如果可能)01/2015- 01/2018我确定要进行哪些更改以实现此目标. 谢谢
I have some code and it is currently displaying the date in the following format on the slider : Tue Jan 01 2013 - Wed Jan 01 2014, However, I am wanting it to display in the following format if possible 01/2015 - 01/2018 I am insure of what to change to allow me to achieve this. Thanks
$(function() {
$( "#slider-range" ).slider({
range: true,
min: new Date('January 2012 00:0:00').getTime() / 1000,
max: new Date('January 2019 00:0:00').getTime() / 1000,
step: 86400,
values: [ new Date('January 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());
});
推荐答案
new Date()
具有无效的日期时间格式,将其更改为'yyyy-mm-ddThh:min:ss'
,然后它应该可以工作.
The new Date()
has invalid date time format, change it to 'yyyy-mm-ddThh:min:ss'
, then it should work.
检查 JavaScript日期来计算了解如何构造一个Date对象.
Check JavaScript Date to figure out how to construct one Date object.
$(function() {
$( "#slider-range" ).slider({
range: true,
min: new Date('2012-01-01T00:00:00').getTime() / 1000,
max: new Date('2019-01-01T00:00:00').getTime() / 1000,
step: 864,
values: [ new Date('2012-03-01T00:00:00').getTime() / 1000, new Date('2014-01-01T00:00: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());
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
<label for="amount">date range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;width:400px;">
</p>
<div id="slider-range"></div>
更新:以下是简单的月/年范围,主要修改是调整一些描述文字和日期格式.
Update: below is the simple month/year ranger, The primary modifications are adjust some description texts and the date format.
function formatDate(date) {
var monthNames = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
var monthIndex = date.getMonth();
var year = date.getFullYear();
return monthNames[monthIndex] + ' ' + year;
}
$(function() {
$( "#slider-range" ).slider({
range: true,
min: new Date('2012-01-01T00:00:00').getTime(),
max: new Date('2019-01-01T00:00:00').getTime(),
step: 86400000,
values: [ new Date('2012-03-01T00:00:00').getTime(), new Date('2014-01-01T00:00:00').getTime() ],
slide: function( event, ui ) {
$( "#amount" ).val( formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])) );
}
});
$( "#amount" ).val( formatDate((new Date($( "#slider-range" ).slider( "values", 0 )))) +
" - " + formatDate((new Date($( "#slider-range" ).slider( "values", 1 )))));
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
<label for="amount">month range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;width:400px;">
</p>
<div id="slider-range"></div>
这篇关于jQuery滑块月/年的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!