SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    742
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery UI Datepicker - Disabling specific dates.

    Hi

    I am using the jQuery UI Datepicker - Event Search.

    I want to disable specific dates only. For example, I want to disable the following dates only:

    Code:
    10th Oct 2010
    21st Oct 2010
    12th Nov 2010
    I searched in google and found one page which promised to deliver what I was looking for. But unfortunately it does not seem to work. If you look into its demo, it has disabled ALL dates.


    So, has anyone worked on this before, can anyone help me please?


    Thanks

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,085
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    When you initialize the datepicker you can supply it callback function called beforeShowDay that takes a date as parameter and you can return an array with options you want for that day (one if these options indicates whether or not you want the date to be selectable).
    For more info see the tab "Events" on this page: http://jqueryui.com/demos/datepicker...-beforeShowDay

    AFAIK there is no way to supply an array of dates that should not be selectable directly.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    742
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I read that already, could not figure out how to implement it.

    Can you show me an example please on how to do this?


    Thanks

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,085
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Sure. For your example dates it would be something like:

    Code JavaScript:
    $(element).datepicker({
      // .. settings you already have go here ..
      beforeShowDate: function(date) {
          if (date.toDateString()===new Date(2010,9,10).toDateString()) {
             return [false,""]; // Don't show 10th Oct 2010
          }
          if (date.toDateString()===new Date(2010,9,21).toDateString()) {
             return [false,""]; // Don't show 21st Oct 2010
          }
          if (date.toDateString()===new Date(2010,10,12).toDateString()) {
             return [false,""]; // Dont show 12th Nov 2010
          }
          return [true,""];
      }
    });

    The format for new Date is <year>,<month>,<day> where you need to set month 1 lower than it actually is. January is 0, ..., December is 11

    HTH
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    742
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Can I have those dates merged to a single array?

    Like

    var badDates = Array('2010-10-23','2010-10-12');

    Thanks

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,085
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cancer10 View Post
    Can I have those dates merged to a single array?

    Like

    var badDates = Array('2010-10-23','2010-10-12');

    Thanks
    Quote Originally Posted by ScallioXTX View Post
    AFAIK there is no way to supply an array of dates that should not be selectable directly.
    So no.
    You could write the beforeShowDate function such that you can put an array in there, but I'll leave that as an exercise for you
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    742
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    So is there anyway to disable a date range?


    For example, I want to disable all dates between and including

    2010-10-23 to 2010-10-29



    Thanks again for your help.

  8. #8
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,085
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    No. The only thing you can set is a date before which everything should be disabled (minDate) or a date after which everything should be disabled (maxDate).

    For everything other than that you need the beforeShowDate callback.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •