如何使日期选择器在刷新时突出显示 [英] How to get datepicker to be highlighted upon refresh
问题描述
我有一个日期选择器,突出显示了选定的一周.它正在使用ajax请求.这是我遇到的问题.当我选择一周(即2011年11月29日)并且页面刷新时,突出显示的星期不再突出显示.
I have a datepicker that highlights a selected week. It is using an ajax request. Which is where I am having a problem. When I select a week i.e. 29/08/11 and the page refreshes the highlighted week is no longer highlighted.
Datepicker.js
$(function()
{
var startDate;
var endDate;
var selectCurrentWeek = function()
{
window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1000);
}
function check(d) {
if(d.length() == 2) {
dd = d;
return dd;
} else {
dd = "0" + myDateParts[0];
return dd;
}
}
var selectedWeek;//remember which week the user selected here
$('.week-picker').datepicker( {
beforeShowDay: $.datepicker.noWeekends,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = 'yy-mm-dd'
var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
var oldDate = document.getElementById('startDate');
var date_textnode = oldDate.firstChild;
var date_text = date_textnode.data;
myDateParts = date_text.split("-");
var dd = myDateParts[2];
var mm = myDateParts[1];
var yy = myDateParts[0];
selectCurrentWeek();
window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd; <<
在这一点上,这是刷新窗口并获取URL的地方.因此,当我选择一个日期时,它的输出类似于以下 http://0.0. 0.0:3000/timesheet?week_commencing = 2011-09-05
At this point above this is where the window is refreshed and it GETs the URL. So that when I select a date it outputs like the following http://0.0.0.0:3000/timesheet?week_commencing=2011-09-05
},
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'); });
});
index.html.erb
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}
注意
window.onload
URL函数从URL开始
Note
The window.onload
URL function gets the week commencing from the url
Jsfiddle-包括日期选择器
Jsfiddle - Including datepicker
更新
推荐答案
您可以使用defaultDate
设置在日期选择器上选择的初始日期,并在日历上模拟click
事件以突出显示星期:
You can use the defaultDate
to set the initial date selected on the datepicker, and simulate a click
event on the calendar to highlight the week:
var selectDate = '09/29/2011';
$('.week-picker').datepicker({
defaultDate: selectDate
}).click(function(event) {
// highlight the TR
$(".ui-datepicker-current-day").parent().addClass('highlight');
// highlight the TD > A
$(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');
}).click();
示例: http://jsfiddle.net/william/YQ2Zw/15/
更新
假设Datepicker.js已加载到timesheet
中,您应该能够再执行另外两行:
Assuming Datepicker.js is loaded in timesheet
, you should be able to do that with two more lines:
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
$('.week-picker').datepicker({
defaultDate: mm + '/' + dd + '/' + yy
}).click();
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}
这篇关于如何使日期选择器在刷新时突出显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!