Select Week

[GoogleCodeExporter]

I'd like to request the ability to select a calendar week (Sun-Sat). Right
now, I can select a date and calculate the week of the year, but I'd like
for the calendar to show my visitor that he/she is selecting an entire week
instead of a single date.

If you know of any other method to achieve this, I'd love to hear it.

Original issue reported on code.google.com by james.st...@gmail.com on 19 Dec 2008 at 9:00

[GoogleCodeExporter]

You should be able to add this functionality fairly easily using the hooks that 
the
datePicker gives you. For example - if you want to make it so that the user can 
only
select Sundays then you can use a renderCallback like in this example:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellR
ender.html

To highlight the entire week when a date is selected you would listen for the
dateSeleced event like in this example:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerListen.html

You would have to use the selectedDate and then loop over the loop over the 
table
adding a custom class to the dates within a week. You would also need to do 
this on
dpMonthChanged and/ or dpDisplayed so that the custom class was visible as the 
user
changed months.

Hope that helps, ask if you have any further questions :)

Original comment by kelvin.l...@gmail.com on 20 Dec 2008 at 3:08

[GoogleCodeExporter]

That gets me a really good start, I think. Thanks for the response. I'll let 
you know
what I work out.

Original comment by james.st...@gmail.com on 22 Dec 2008 at 2:42

[GoogleCodeExporter]

I couldn't make your suggestions give me the result I wanted - probably due to 
my own
ignorance/inexperience, so I modified the source (attached). I've put comments 
around
my added lines.

My implemented code is below. The one thing I couldn't figure out was how to 
get the
renderCalendar method to recognize whether "selectWeek" was set to true or not. 
I
don't claim to be much of a javascript coder, so let me know if I programmed
something wrong or poorly.

$(".datepicker").datePicker({ 
    selectWeek: true,
    inline: true,
    selectMultiple: false,
    startDate: '01/01/1970',
    endDate: (new Date()).asString()
}).bind('dateSelected',function(e, selectedDate, $td){
    Date.format = "mm/dd/yyyy";
    console.log(selectedDate.addDays(-6).asString());
});

Original comment by james.st...@gmail.com on 22 Dec 2008 at 7:15

Attachments:

• jquery.datePicker.eGandalf.js

[GoogleCodeExporter]

Hey James - thanks for the code... When I get a spare bit of time I'll look 
through
it and see if I can add it in to the plugin :)

Original comment by kelvin.l...@gmail.com on 23 Dec 2008 at 6:31

[GoogleCodeExporter]

Kelvin,

Hate to bother you again, but I've come across a situation where I want to have 
the
"week" selector and a regular datepicker in the same page. If you get a chance, 
could
you see what I need to change in that code to get the "selectWeek" boolean to 
work
correctly? Right now it needs set manually in the plugin code.

I appreciate your help.

James

Original comment by james.st...@gmail.com on 8 Jan 2009 at 2:57

[GoogleCodeExporter]

Hi James,

You can give each date picker an id (or a different class) and initialise them
seperately... For example, the following would work if both datepickers still 
had the
class datepicker and one had an id datepicker1 and the other had an id 
datepicker2:

$("#datepicker1").datePicker({ 
    selectWeek: true,
    inline: true,
    selectMultiple: false,
    startDate: '01/01/1970',
    endDate: (new Date()).asString()
});

$("#datepicker2").datePicker({ 
    selectWeek: false,
    inline: true,
    selectMultiple: false,
    startDate: '01/01/1970',
    endDate: (new Date()).asString()
});

$(".datepicker").bind('dateSelected',function(e, selectedDate, $td){
    Date.format = "mm/dd/yyyy";
    console.log(selectedDate.addDays(-6).asString());
});

Does that answer your question?

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 8 Jan 2009 at 11:03

[GoogleCodeExporter]

Kelvin,

Thank you very much for your response. Perhaps I can clarify the problem - I
understand how to create multiple instances, the problem lies in the 
week-selection
alterations I've made to the plugin.

I've altered the RenderCalendar function so that if selectedWeek=true the 
calendar
should highlight the week rather than the day. This works great except for one 
small
glitch. When datePicker is called as in above, the "selectWeek" option is 
ignored by
the RenderCalendar function. Instead, it always uses the default value set in 
the
plugin code (which I currently have set to true, to force it to work). Meaning 
that
if the default is false and I pass true for the selectWeek option, the date 
selection
works as expected, but the calendar is not rendered correctly to highlight the 
entire
week on hover. In other words, the RenderCalendar function appears to ignore the
selectWeek parameter and always use the default value.

Ideally, I'd like to know how to make renderCalendar pick up the passed option
correctly. However, I would settle for knowing how to create duplicate plugins 
that
do not interfere with each other so that I could use one for week-selection and 
one
for single-date selection.

Please let me know if you need further clarification.

BR

James

Original comment by james.st...@gmail.com on 9 Jan 2009 at 1:18

[GoogleCodeExporter]

Hi James,

Sorry for the misunderstanding. When I first looked at your question I 
understood it
correctly but then I looked at your sourcecode and it seemed like it should 
work as
you programmed it so I thought you must be confused about something else... 
Looking a
little closer I can see the problem. Your code assumes that the entire settings
object is passed to the renderCalendar function (a fair assumption) when in 
fact it's
not...

The quick fix for you is to add it in... Find this block of code:

// render the calendar...
$('.dp-calendar', this.context).renderCalendar(
    {
        month           : this.displayedMonth,
        year            : this.displayedYear,
        renderCallback  : this.cellRender,
        dpController    : this,
        hoverClass      : this.hoverClass
    }
);

And add in another line inside the anonymous object passed to the renderCalendar
function:

selectWeek : this.selectWeek

And that should work for you... I'll have a think about a better solution when 
I get
a chance to think about integrating your functionality into the released 
plugin...

Thanks,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 9 Jan 2009 at 5:59

[GoogleCodeExporter]

Kelvin,

I simply can't thank you enough. That the entire settings object would be 
passed was
exactly my assumption. Your fix worked perfectly. Right now, I couldn't be more
satisfied with the plugin.

Best regards,

James

Original comment by james.st...@gmail.com on 9 Jan 2009 at 7:06

[GoogleCodeExporter]

Hi James,

Great - I'm glad that worked for you. I'll leave this ticket open so that 
hopefully
at some point I will find the time to add "selectWeek" functionality into the 
plugin
itself so you can use the latest greatest version,

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 9 Jan 2009 at 7:20

[GoogleCodeExporter]

Hi Guys,

I've been trying to reproduce the selectWeek trick but with no success.

Do by any chance you have a solution for my problem?
I need to use the calendar to select weeks instead days...
the calendar would return me the weekOfTheMonth/month/year instead the day.

Thanks!

Original comment by jcharl...@gmail.com on 22 Jan 2009 at 6:41

[GoogleCodeExporter]

Hey jcharlier,

I've got this working, but can't share the link just yet as the site hasn't 
launched.
However, I'm attaching the modified plugin I'm using and pasting a 
implementation
sample below.

BR,
James

    $("#Waist .datepicker").datePicker({ 
        selectWeek: true,
        inline: true,
        selectMultiple: false,
        startDate: '01/04/1977',
        endDate: $now.asString()
    }).bind('dateSelected',function(e, selectedDate, $td){
        Date.format = "mm/dd/yyyy";
        // returns the sunday of the selected week.
        $("#Waist #weekdate").attr("value", selectedDate.addDays(-6).asString());
    }).val(null);

I then use something like the following to get the number of weeks from a 
certain
date (could choose 01/01/currentyear, for example. I chose the beginning date 
for my
calendar):

    var $sDate = new Date(Date.parse($("#Waist #weekdate").attr("value")));
    var $oDate = new Date(Date.parse("01/04/1977"));
    var $weeks = Math.floor(($sDate - $oDate)/604800000);

Original comment by james.st...@gmail.com on 22 Jan 2009 at 6:50

Attachments:

• jquery.datePicker.week.js
• jquery.datePicker.week.packed.js

[GoogleCodeExporter]

I should also note that my code makes use of the attached date.js file.

Original comment by james.st...@gmail.com on 22 Jan 2009 at 6:51

Attachments:

• date.js

[GoogleCodeExporter]

Hi James,

Thanks a lot for that! 
Saved me a lot of headaches :P

I've made a little modification in your modification :]
in the line 683-684 of the script I've modified this:

var startOfWeek = 1 - d.getDay(); //it was 0 - d.getDay(); Ive changed this so 
we get
the start of the week in monday instead;
var endOfWeek = 7-d.getDay(); and here to get the end of the week in sunday. 
This is
just a "visual" modification since I'm not interested in the weekends :)

Again, thanks a lot!

Original comment by jcharl...@gmail.com on 23 Jan 2009 at 2:15

[GoogleCodeExporter]

No problem. I'm glad it helped!

Original comment by james.st...@gmail.com on 23 Jan 2009 at 2:17

[GoogleCodeExporter]

Sorry for the re-post but just to keep posted 
I've changed this in the part you have changed in the script:
start line: 679:
//Added by eGandalf
if (this.selectWeek == true){
    this.selectWeek = false;
    if (v != this.isSelected(d)){
        var o_mult = this.selectMultiple;
                    this.selectMultiple = true;
                    var day = d.getDay();
                    if(day == 0){
                        day = 7;
                    }
        var startOfWeek = 1 - day;
        var endOfWeek = 7 - day;

        myDate = d.addDays(startOfWeek-1);
        for (i = endOfWeek; i>=startOfWeek; i--){
            this.setSelected(myDate.addDays(1), v, moveToMonth);
        }
           this.selectMultiple = o_mult;
    }
    this.selectWeek = true;
}
//--------------------------------------------------------------

I had to make some changes in this because the script wasn't prepared to treat 
the
week the way I wanted. 
What I mean is that if you select Sunday it would select the next week instead 
the
actual week :]

Everything is working perfectly.

Cheers

Jean Charlier

Original comment by jcharl...@gmail.com on 23 Jan 2009 at 3:54

[GoogleCodeExporter]

Reposting is good. Thanks for describing how your selector works. The beauty of 
open
source is that we get to customize to fit our own needs.

Original comment by james.st...@gmail.com on 23 Jan 2009 at 4:01

[GoogleCodeExporter]

Hi guys,

Glad you got it working...

I've just added my version of "selectWeek" functionality to the plugin and an 
example
page for it:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerSelectWeek.
html

(you can see the code changes in r27)

Let me know what you think,

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 25 Jan 2009 at 2:10

• Changed state: Fixed

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

This has been really helpful for me, but I am having trouble linking to my jsp 
page. Can you help me out?

Original comment by katiemc...@gmail.com on 29 Jun 2011 at 3:08

[GoogleCodeExporter]

I'd also like to request the ability to select a calendar week (Sun-Sat). Right
now, the week number can be displayed, but it cannot be selected. There is a 
business requirement for this, e.g. EPI Week Calendar.

If you know of any other method to achieve this, I'd love to hear it.

Original comment by weilingx...@gmail.com on 18 Feb 2014 at 8:57