周/年选择器jQuery插件
Week / Year picker jQuery plugin
是否有任何jQuery插件可用于选择周/年,例如1 / 2012
或53 / 2010
,就像日期选择器一样?
我跌跌撞撞地找不到匹配的插件。我正在考虑简单的选择框,但似乎picker会提供良好的用户体验。
我已经为我的一个项目重新设计了jquery UI日期选择器。此外,从日期中获取周数并不像看上去那么简单: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; };
如果你有任何问题,请告诉我,这是否适合你。
看看这里,在这个选择器中,您可以独立选择月份/年份。你可能也可以修改它来设置/获取周末号码。
相关文章:
- 如何在Angular2中使用jQuery插件
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- TableExport jquery插件:文件名和扩展名问题
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- jQuery插件-从插件中调用公共方法
- 扩展jQuery插件以更改配置
- "工具提示"jQuery插件坏了
- 不能在图像中的地图标记中使用花式框jquery插件的区域标记
- 使用Booklet Jquery插件,我如何验证最后一页是否显示
- 合并TinyMCE(jQuery插件)文件
- 带有jquery插件的backbone.js视图
- 自制jQuery插件已触发,但无法工作
- 我如何才能找到哪些网站使用我的jQuery插件
- jquery插件或javascript方法自动调整文本输入(而非文本区域)(固定宽度)可变高度的大小
- 在多个元素上使用jquery插件,只需稍作修改
- HtmlBox(jquery插件)在ajax调用中不起作用
- 构造jQuery插件
- 使用filedownload jquery插件处理FilePathResult返回值