向 jQuery UI 日期选择器添加功能
Adding functionality to jQuery UI Datepicker
我正在掌握出色的 jQuery UI 日期选择器。
我正在尝试显示一个日历,该日历默认为当年的一月到十二月,但允许用户在这些年中来回导航。
它还有其他复杂性——例如用户选择周而不是天;在适当的时候,我们的想法是它将提供完成每周时间表的导航,突出显示哪些时间表已 completed/submitted/approved - 但那是另一天...
现在,我可以显示一整年,并按周突出显示,但我无法合并其他要求,即:
- 在这些年中来回导航
- 将默认设置为 'Jan-to-Dec of the current year',而不是 'Jan-to-Dec of 2016'
- (不太重要)给它一个更紧凑的外观
在他人的大力帮助下,这就是我所拥有的...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
stepMonths: 12,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true,
numberOfMonths: [4, 3],
minDate: new Date(2016, 1 -1, 1),
maxDate: new Date(2016, 12 -1, 31),
showButtonPanel: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
minDate 和 maxDate 决定日历中可见的日期范围。由于您的范围涵盖全年,因此您无法移至上一年或下一年。
没有提供选项来设置默认的 1 月 - 12 月,但我们可以对代码进行一些更改以获得该视图。
但是,在 jQuery UI 版本 1.12 中导航到上一年或下一年时存在不一致。
我试过 jQuery UI 1.11.4 和 jQuery 1.12.4 并且它有效。
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
stepMonths: 12,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true,
numberOfMonths: [4, 3],
showCurrentAtPos: new Date().getMonth(), //Shows the calendar from Jan to Dec
showButtonPanel: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
},
beforeShow: function(date,inst){
// shows the calendar view from jan to dec of the selected year
if($( ".week-picker" ).datepicker( "getDate" ) != null){ // donot run on the first instance
$( ".week-picker" ).datepicker( "option", "showCurrentAtPos", inst.selectedMonth );
}
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
检查这里的输出:https://jsbin.com/zopuke
我正在掌握出色的 jQuery UI 日期选择器。
我正在尝试显示一个日历,该日历默认为当年的一月到十二月,但允许用户在这些年中来回导航。
它还有其他复杂性——例如用户选择周而不是天;在适当的时候,我们的想法是它将提供完成每周时间表的导航,突出显示哪些时间表已 completed/submitted/approved - 但那是另一天...
现在,我可以显示一整年,并按周突出显示,但我无法合并其他要求,即:
- 在这些年中来回导航
- 将默认设置为 'Jan-to-Dec of the current year',而不是 'Jan-to-Dec of 2016'
- (不太重要)给它一个更紧凑的外观
在他人的大力帮助下,这就是我所拥有的...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
stepMonths: 12,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true,
numberOfMonths: [4, 3],
minDate: new Date(2016, 1 -1, 1),
maxDate: new Date(2016, 12 -1, 31),
showButtonPanel: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
minDate 和 maxDate 决定日历中可见的日期范围。由于您的范围涵盖全年,因此您无法移至上一年或下一年。 没有提供选项来设置默认的 1 月 - 12 月,但我们可以对代码进行一些更改以获得该视图。 但是,在 jQuery UI 版本 1.12 中导航到上一年或下一年时存在不一致。 我试过 jQuery UI 1.11.4 和 jQuery 1.12.4 并且它有效。
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
stepMonths: 12,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true,
numberOfMonths: [4, 3],
showCurrentAtPos: new Date().getMonth(), //Shows the calendar from Jan to Dec
showButtonPanel: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
},
beforeShow: function(date,inst){
// shows the calendar view from jan to dec of the selected year
if($( ".week-picker" ).datepicker( "getDate" ) != null){ // donot run on the first instance
$( ".week-picker" ).datepicker( "option", "showCurrentAtPos", inst.selectedMonth );
}
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
检查这里的输出:https://jsbin.com/zopuke