Monday, July 18, 2011

Week picker using jQuery UI Datepicker

There is my implementation of Week picker using jQuery UI Datepicker (requers jQuery UI 1.8+).







Html and Javascript are shared on JsFiddle http://jsfiddle.net/manishma/AVZJh/

11 comments:

  1. Great work! I have modified your code so that it will work on input boxes too, not just inline datepickers. It also takes the datepicker's firstDay option into account.

    http://jsfiddle.net/MqD2n/

    ReplyDelete
  2. i love this week-picker! it's the only thing like it i've been able to find.
    i really could use some help figuring out how to make it's output go into a form input field, so the week-range will be submitted with the form.

    ReplyDelete
  3. There are some small changes in the code, make it easy to put week range into form input field.

    http://jsfiddle.net/manishma/sqEwN/

    ReplyDelete
  4. How cam I modify to select the Monday of the highlighted week in an input box? I will have multiple instances of this per page as well. Thanks!

    ReplyDelete
    Replies
    1. Check this one: http://jsfiddle.net/manishma/PcyGW/

      Delete
    2. Thanks! Closer to what I'm looking for, but not there just yet. When the user selects the text box I want the calendar to appear, then they select the week. The Monday of the week should appear in the text box. I don't need the start and end dates.

      I have 15 of these on my page, so they can't all have the same id="monday"... at least I don't think they can.

      Any help would be greatly appreciated!

      Delete
    3. Check this one: http://jsfiddle.net/manishma/pDUkW/

      Delete
    4. Brilliant! Works great on jsFiddle but on my page once a date is selected it puts the Monday (perfect!) in the input box, but the problem is it opens the calendar again. You have to click on the page somewhere to get it to close. Must be something on my page...

      If you are ever in Michigan let me know, I'll buy you a beer!

      Delete
    5. I think I've figured it out. It's an IE thing. Your script works in Chrome, but not in IE. Any ideas?

      Delete
    6. I went on to some other stuff but was bothered by this IE issue. Fixed it by changing this line:
      $(this).datepicker('setDate', monday).blur();
      to this:
      $(this).val($.datepicker.formatDate('mm/dd/yy', monday)).blur();

      Thanks again for your help! The offer for a beer still stands!

      Delete