SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Datepicker excluding certain days?

    Is it possible to have a datepicker which excludes certain days?
    I'm looking for a script which I can set what days a user can select.

    Ideally I would like to be able to set a few specific timeslots along with this.

    Can anyone give me some pointers with this please.

    Thanks for any help in advance.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Here's a demo: jQuery UI DatePicker: Disable Specified Days

    You could easily modify that so that it returns false on all but a couple of allowed days.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link and the quick reply. I've tried to get this working even just with the demo from the link and it shows all dates as disabled!! What am I doing wrong with this?

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry ignore that last post now have the demo working I think. I'll have a go at this and see how I get on. Thanks again might need some help in a bit.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Sorry but I'm struggling with this. I'm not very experienced with modifying javascripts. The code I have is below. Would you be able to explain to me how I go about changing this so that it only disables the dates I put in the array?

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    	<link rel="stylesheet" type="text/css" href="http://davidwalsh.name/dw-content/jquery-ui-css/custom-theme/jquery-ui-1.7.2.custom.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    
    <script>
    /* create an array of days which need to be disabled */
    var disabledDays = ["1-21-2011","1-24-2011","1-27-2011","1-28-2011","1-23-2011","1-17-2011","1-2-2011","1-3-2011","1-4-2011","1-5-2011"];
    
    /* utility functions */
    function nationalDays(date) {
      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
      //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
      for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
          //console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
          return [false];
        }
      }
      //console.log('good:  ' + (m+1) + '-' + d + '-' + y);
      return [true];
    }
    function noWeekendsOrHolidays(date) {
      var noWeekend = jQuery.datepicker.noWeekends(date);
      return noWeekend[0] ? nationalDays(date) : noWeekend;
    }
    
    /* create datepicker */
    jQuery(document).ready(function() {
      jQuery('#date').datepicker({
        //minDate: new Date(2010, 0, 1),
        //maxDate: new Date(2010, 5, 31),
        dateFormat: 'DD, MM, d, yy',
        constrainInput: true,
        beforeShowDay: noWeekendsOrHolidays
      });
    });
    </script>
    </head>
    
    <body>
    <input type="text" name="date" id="date" readonly="readonly" size="12" />
    </body>
    </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sketchgal View Post
    Would you be able to explain to me how I go about changing this so that it only disables the dates I put in the array?
    The existing unchanged demo already does that. The demo disables the dates in the array.

    Do you instead want all dates to be disabled except for those in the array?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The demo disables weekends aswell as the dates in the array. How can I get this to show the weekends? Sorry I wasn't very clear with the last post.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Ahh, that would be this part here.

    Code javascript:
    function noWeekendsOrHolidays(date) {
      var noWeekend = jQuery.datepicker.noWeekends(date);
      return noWeekend[0] ? nationalDays(date) : noWeekend;
    }

    The weekend part can be easily removed.


    Code javascript:
    function noHolidays(date) {
      return nationalDays(date);
    }

    and use noHolidays in other parts of the code instead of noWeekendsOrHolidays. That is, if your dates are holidays. If they're something else, then you should use a more appropriate term, or simplify things by using a more generic description.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats great thanks so much for the help with this I really appreciate it. Just so I know incase I want to use it can you show me how I would get the code to only allow the selection of saturdays as everywhere I've looked shows you how to disable weekends but I can't get it to disable weekdays!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sketchgal View Post
    can you show me how I would get the code to only allow the selection of saturdays
    All you do is check that the day of the week is a Saturday. The getDay method returns the day of the week, which is a number from 0 to 6 where 0 is Sunday, 1 is Monday, etc.

    Code javascript:
    function onlySaturdays(date) {
        return date.getDay() === 6;
    }

    If that's the only restriction on the date, you can then set that as the function that the datePicker uses before showing each day.

    Code javascript:
    $(...).datepicker({
        ...,
        beforeShowDay: onlySaturdays
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Or, if you want to get more flexible, you could extend that onlySaturdays function so that you can choose which days of the week to allow.

    Code javascript:
    function onlyTheseWeekDays(arr) {
        var days = [];
        if (arr instanceof Array) {
            days = arr;
        } else if (!isNaN(Number(arr))) {
            days.push(arr);
        }
        return function (date) {
            var dayOfWeek = date.getDay(),
                i;
            for (i = 0; i < days.length; i += 1) {
                if (days[i] === dayOfWeek) {
                    return [true];
                }
            }
            return [false];
        }
    }

    So that you could then use:

    Code javascript:
    $(...).datepicker({
        ...,
        beforeShowDay: onlyTheseWeekDays(6)
    });

    or

    Code javascript:
    $(...).datepicker({
        ...,
        beforeShowDay: onlyTheseWeekDays([0, 6])
    });

    or

    Code javascript:
    $(...).datepicker({
        ...,
        beforeShowDay: onlyTheseWeekDays([1, 2, 3, 4, 5])
    });

    or for some strange reason:

    Code javascript:
    $(...).datepicker({
        ...,
        beforeShowDay: onlyTheseWeekDays([2, 3, 5])
    });
    Last edited by paul_wilkins; Jan 12, 2011 at 03:22.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks for the help with this but I still can't get this to work. What am I doing wrong?? I want this date picker to only show Saturdays. I have a list of Saturdays at the top which are already booked. Can you show me what I'm doing wrong please? I can't even get the date picker to show now when I click the input box!!

    Here's the code I have below:

    Code:
    <script>
    /* create an array of days which need to be disabled */
    var disabledDays = ["1-1-2011","1-8-2011","1-15-2011"];
    
    
    function onlyTheseWeekDays(arr) {
        var days = [];
        if (arr instanceof Array) {
            days = arr;
        else if (!isNaN(Number(arr))) {
            days.push(arr);
        }
        return function (date) {
            var dayOfWeek = date.getDay(),
                i;
            for (i = 0; i < days.length; i += 1) {
                if (days[i] === dayOfWeek) {
                    return true;
                }
            }
            return false;
        }
    }
    
    /* create datepicker */
    jQuery(document).ready(function() {
      jQuery('#date').datepicker({
        //minDate: new Date(2010, 0, 1),
        //maxDate: new Date(2010, 5, 31),
        dateFormat: 'DD, MM, d, yy',
        constrainInput: true,
        beforeShowDay: onlyTheseWeekDays(6)
      });
    });
    </script>

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    A right parenthesis is missing from just left of the else if part of the code. Put that in place and the date picker should then show.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply but now the calender shows and all the dates are unavailable! Sorry for having to ask for so much help with this, I'm really stuck now.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Please provide a link to a test version of the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Great, one final tweak. The datepicker function needs to return an array where the first item is true or false.

    So, change:

    return true;
    to
    return [true];

    and change

    return false;
    to
    return [false];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, now it shows all saturdays, which is great but how do I get it to not show the ones from the array set at the top?

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sketchgal View Post
    Excellent, now it shows all saturdays, which is great but how do I get it to not show the ones from the array set at the top?
    Let's now extend what's happening in the beforeShowDay event.

    Code javascript:
    beforeShowDay: function (date) {
        var showDay = onlyTheseWeekDays(6)(date);
        if (showDay[0] === true) {
            ...
        }
        return showDay;
    }

    Can you work out what else there should be in the above?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll have a go at it and see how I get on once again thanks for taking the time to help me with this.


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
  •