jQuery Year, Half Year and Quarter year picker
I'm looking for a jquery Plugin to pick
- Year (no Months and dates) [I can pretty much use a regular drop down for this]
- Half a Year - 1st Half and 2nd half (Half yearly) Eg. Jan -Jun, 2010; Jul to Dec, 2010
- Quarter a Year - 1st Quarter, 2nd Quarter, 3rd Quarter, 4th Quarter Eg. Jan-Mar, 2010; Apr-Jun, 2010 etc.
Is there any suc开发者_JS百科h plugin or how do I edit the regular jQuery date-picker to achieve this?
Yeah, using select boxes is a good choice, I think, just because I like simple solutions.
Then you can have a html file looking like this:
index.html:
<!doctype html>
<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<script src="picker.js"></script>
<script>
$(function()
{
$('#year').yearpicker();
$('#halfyear').halfyearpicker();
$('#quarteryear').quarteryearpicker();
});
</script>
</head>
<body>
<p>
year:<br>
<select id="year"></select>
</p>
<p>
halfyear:<br>
<select id="halfyear"></select>
</p>
<p>
quarteryear:<br>
<select id="quarteryear"></select>
</p>
</body>
</html>
picker.js:
$.fn.extend(
{
yearpicker: function()
{
var select = $(this);
var year = new Date().getFullYear();
for (var i = -10; i < 11; i++)
{
var option = $('<option/>');
var year_to_add = year + i;
option.val(year_to_add).text(year_to_add);
if (year == year_to_add)
{
option
.css('font-weight', 'bold')
.attr('selected', 'selected');
}
select.append(option);
}
},
halfyearpicker: function()
{
var select = $(this);
var date = new Date();
var year = date.getFullYear();
var half = Math.floor(date.getMonth() / 6);
for (var i = -10; i < 11; i++)
{
var year_to_add = year + i;
for (var j = 0; j < 2; j++)
{
var option = $('<option/>');
var half_text = j == 0 ? 'Jan-Jun' : 'Jul-Dec';
var value = year_to_add + '-' + (j + 1);
var text = year_to_add + ' ' + half_text;
option.val(value).text(text);
if (year_to_add == year && half == j)
{
option
.css('font-weight', 'bold')
.attr('selected', 'selected');
}
select.append(option);
}
}
},
quarteryearpicker: function()
{
var select = $(this);
var date = new Date();
var year = date.getFullYear();
var quarter = Math.floor(date.getMonth() / 3);
for (var i = -10; i < 11; i++)
{
var year_to_add = year + i;
for (var j = 0; j < 4; j++)
{
var option = $('<option/>');
var quarter_text = get_quarter_text(j);
var value = year_to_add + '-' + (j + 1);
var text = year_to_add + ' ' + quarter_text;
option.val(value).text(text);
if (year_to_add == year && quarter == j)
{
option
.css('font-weight', 'bold')
.attr('selected', 'selected');
}
select.append(option);
}
}
function get_quarter_text(num)
{
switch(num)
{
case 0:
return 'Jan-Mar';
case 1:
return 'Apr-Jun';
case 2:
return 'Jul-Sep';
case 3:
return 'Oct-Dec';
}
}
}
});
加载中,请稍侯......
精彩评论