2012-08-30 111 views
1

是否有任何jQuery插件可用于选择周/年,例如1/201253/2010就像Date Picker?周/年选择器jQuery插件

我偶然发现,但找不到匹配的插件。我正在考虑简单的选择框,但似乎选择器会提供良好的用户体验。

回答

3

我已经为我的项目之一restyling jquery UI datepicker做了。从日期也越来越周数不是那么简单,因为它似乎:http://brainhog.blogspot.ie/2011/07/get-me-week.html

不管怎么说,这里的完整的解决方案:

CSS:

.ui-datepicker .ui-datepicker-calendar { border-collapse: separate; border-spacing: 0 2px; } 
.ui-datepicker .ui-datepicker-calendar td { padding: 0; border: 1px solid #D3D3D3; border-width: 1px 0; } 
.ui-datepicker .ui-datepicker-calendar td:last-child { border-right-width: 1px; } 
.ui-datepicker .ui-datepicker-calendar td a { border: none; } 
.ui-datepicker .ui-datepicker-calendar tbody tr:hover td { border-color: #FCEFA1; } 
.ui-datepicker-calendar tbody tr:hover td a { background: #FCFAF1; } 
.ui-datepicker-calendar tbody tr:hover .ui-datepicker-week-col, 
.ui-datepicker-calendar tbody tr .ui-datepicker-week-col { background: #757575; padding: 0.2em; color: #fff; text-align: right; border: 1px solid #3F3F3F; } 
#weekPicker { font-size: .7em; } 

JS:

$('#weekPicker').datepicker({ 
    firstDay: 1, 
    showWeek: true, 
    weekHeader: '', 
    dateFormat: 'yy-mm-dd', 
    beforeShow: function(input, inst){ 
     var yw = input.value.split('-'), dat = getDateFromWeek(yw[0], yw[1]); 
     $('#weekPicker').datepicker("setDate", dat); 
    }, 
    onClose: function(input, inst){ 
     var yw = new Date(input).getFullWeek(); 
     inst.input.val(yw.y+'-'+yw.w); 
     $('#weekPicker2').html('<b>Week ' + yw.w+'</b>: '+input); 
    } 
}); 

和你还需要这些功能:

//Returns ISO 8601 week number and year 
Date.prototype.getFullWeek = function(){ 
    var jan1, w, d = new Date(this); 
    d.setDate(d.getDate()+4-(d.getDay()||7)); // Set to nearest Thursday: current date + 4 - current day number, make Sunday's day number 7 
    jan1 = new Date(d.getFullYear(),0,1);  // Get first day of year 
    w = Math.ceil((((d-jan1)/86400000)+1)/7); // Calculate full weeks to nearest Thursday 
    return {y: d.getFullYear(), w: w }; 
}; 
//Returns ISO 8601 week number 
Date.prototype.getWeek = function(){ return this.getFullWeek().w; }; 
var getWeeksInYear = function(y){ return new Date(y,11,28).getFullWeek().w; }; 

让我知道你是否有任何问题和问题,以及这是否适合你。

+0

谢谢。有用。 –

0

看看here,在这个选择器中,您可以独立选择月份/年份。您可以修改它以设置/获取周末号码。