PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Disable certain days on date picker

  1. Alex
    Member

    Hi,

    I am using the date picker and do not want people to be able to choose a Sunday. Is it possible to do this?

    Posted 14 years ago on Friday July 16, 2010 | Permalink
  2. Alex
    Member

    Also, is it possible to disable the user to select days in the past too?

    Posted 14 years ago on Friday July 16, 2010 | Permalink
  3. Sure, the datepicker is the standard jQuery UI plugin. There are lots of configuration variables.

    You can refer to this previous thread for links and more details.

    http://forum.gravityhelp.com/topic/how-to-highlight-current-date-or-future-date-in-jquery-datepicker#post-5603

    Posted 14 years ago on Friday July 16, 2010 | Permalink
  4. Alex
    Member

    thanks. will look into this. does this apply for the size of the popup too as IE's is much bigger than FF and Chrome

    Posted 14 years ago on Friday July 16, 2010 | Permalink
  5. The actual popup size may be a parameter you can modify for the script.. not sure without researching that. The basic styles for the datepicker are included in the forms.css file though if you wanted to change padding/margins and other sizing there.

    Posted 14 years ago on Friday July 16, 2010 | Permalink
  6. It appears the datepicker size is directly related to the font size so you should be able to control this with some themeing/CSS

    http://stackoverflow.com/questions/659588/how-to-resize-the-jquery-datepicker-control

    Posted 14 years ago on Friday July 16, 2010 | Permalink
  7. Alex
    Member

    I've been able to sort out the font size issue. This is the CSS I used to fix it:

    .ui-datepicker-header, .ui-datepicker, .ui-datepicker-prev, .ui-datepicker-next {font-size:10px;}

    I have also configured the datepicker to allow only today onwards. However, I can't figure out how to make certain days unselectable. I can see weekends are easier to do but I want only Sunday to be unselectable. You know the code for this?

    Posted 14 years ago on Monday July 19, 2010 | Permalink
  8. I wouldn't know without researching more myself. A quick google search turned up a few sites that might be helpful.

    http://davidwalsh.name/jquery-datepicker-disable-days

    http://jqueryui.com/demos/datepicker/

    http://www.aliaspooryorik.com/blog/index.cfm/e/posts.details/post/disable-specific-days-in-a-jquery-ui-datepicker-268

    Posted 14 years ago on Monday July 19, 2010 | Permalink
  9. Alex
    Member

    I have found that since upgrading gravityforms the previous date JS is no longer working. what is the solution here?

    I also never found out how to disable Sunday only!!!

    Posted 14 years ago on Thursday September 30, 2010 | Permalink
  10. Not sure what you mean that the "previous" date script isn't working. Everything is overwritten during the upgrade and the datepicker UI component hasn't been updated or changed in the recent version. You may have some kind of script conflict with another plugin or may need to manually remove the files from the plugin folder and reinstall via ftp.

    As mentioned above, the datepicker is the standard version from the jQuery UI library. You'll just have to continue to search for the documentation on how to exclude just Sundays.

    EDIT: I did find this in a quick search.. I can't confirm that it works but you may want to check it out.

    http://www.devcomments.com/DatePicker-restrict-certain-days-at57218.htm

    Posted 14 years ago on Thursday September 30, 2010 | Permalink
  11. Alex
    Member

    ok. i've sorted some of it out, to an extent. i input the code again to load before the datepicker and not after it (it worked beforehand):

    <script type="text/javascript">
    jQuery.noConflict();
      jQuery(document).ready(function($) {</p>
    <p>		$( "#input_1_26" ).datepicker({ defaultDate: '0d', minDate: '0d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/info/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
      });
    );
    </script>

    However, the dd/mm/yy somehow changes to mm/dd/yy and changes back when it is taken out.

    I'm also having difficulty implementing the noSundays script:

    $('#noSundays').datepicker(
    {
    beforeShowDay: function(date){
     if (date.getDay() == 0){
    return [false,''];
    } else {
     return [true, ''];
    }
    }
     }
    );

    I have changed #noSundays to #input_1_26 too and nothing

    Posted 14 years ago on Wednesday October 6, 2010 | Permalink
  12. Alex
    Member

    SOLVED!

    here's the code just in case anyone wants to use it. The following selects the current day, disables any day before today and disables Sunday as an option. The date format is, for example, Thu 07/10/10 for today:


    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($) {
    $( "#input_1_26" ).datepicker({ defaultDate: '0d', minDate: '0d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/info/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, dateFormat: 'D dd/mm/yy', beforeShowDay: function(date){if (date.getDay() == 0){return [false,''];} else {return [true, ''];}}});
    });
    </script>

    Posted 14 years ago on Thursday October 7, 2010 | Permalink
  13. I hate to be a thread bumper, but rather than starting a new one (because this answers part of my question), I'd like to know how I could disable a day (and all days prior) that was selected in the first of 2 Datepickers in the latter one. Here's the form I've got so far to illustrate:

    http://www.autoseason.com/wp_test/reservations

    Cheers, this is my first post and I just want to mention that GravityForms is the best plugin of its kind I've found, well done guys.

    Posted 13 years ago on Saturday July 16, 2011 | Permalink
  14. This isn't currently a built in feature, although we do plan on enhancing the Date field in the future to incorporate a Range feature that will show 2 fields instead of 1. But the only way to do what you described would be through the use of custom jQuery to validate what was entered and make sure the 2nd date was after the 1st. I'm not aware of any code snippets that could be provided to help with this as I haven't seen it done before.

    Posted 13 years ago on Monday July 18, 2011 | Permalink
  15. Thanks for your reply Carl, I figured I'd have to do a bit of custom jQuery and like you I wasn't able to find any example code online that does this. I'll keep looking, but I appreciate your response, and if there are any other members that could possibly point me in the right direction I'd appreciate that a great deal. Cheers.

    Posted 13 years ago on Monday July 18, 2011 | Permalink
  16. I went ahead and solved the issue and thought I'd post the code here in case anyone else needed it (I also included the php code which isolates the javascript to just the page I need):

    <?php if (is_page('reservations') ) { ?>
    <!--reservations page custom JS-->
    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($) {
    $( "#input_1_5" ).datepicker({
    defaultDate: '+1d',
    minDate: '+1d',
    gotoCurrent: true,
    prevText: '',
    showOn: 'both',
    buttonImage: '/wp_test/wp-content/plugins/gravityforms/images/calendar.png',
    buttonImageOnly: true,
    dateFormat: 'D dd/mm/yy',
    beforeShow: customRange
    });
    $( "#input_1_7" ).datepicker({
    prevText: '',
    showOn: 'both',
    buttonImage: '/wp_test/wp-content/plugins/gravityforms/images/calendar.png',
    buttonImageOnly: true,
    dateFormat: 'D dd/mm/yy',
    beforeShow: customRange
    });
    });
    function customRange(input) {
    if (input.id == 'input_1_7') {
    return {
    minDate: jQuery('#input_1_5').datepicker("getDate")
    };
    } else if (input.id == 'input_1_5') {
    return {
    maxDate: jQuery('#input_1_7').datepicker("getDate")
    };
    }
    }
    </script>
    <?php } ?>

    There's probably a more elegant way to go about this, but it seems to work just fine. I hope someone finds this useful. I got the code snippet from the following link:

    http://jsbin.com/evudo/26/edit

    Cheers.

    Posted 13 years ago on Tuesday July 19, 2011 | Permalink
  17. Nice, thanks for posting the solution for other users!

    Posted 13 years ago on Tuesday July 19, 2011 | Permalink

This topic has been resolved and has been closed to new replies.