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?
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
-
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.
Posted 13 years ago on Friday July 16, 2010 | Permalink -
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 13 years ago on Friday July 16, 2010 | Permalink -
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 13 years ago on Friday July 16, 2010 | Permalink -
Alex
MemberI'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 13 years ago on Monday July 19, 2010 | Permalink -
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
Posted 13 years ago on Monday July 19, 2010 | Permalink -
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 13 years ago on Thursday September 30, 2010 | Permalink -
Alex
Memberok. 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 13 years ago on Wednesday October 6, 2010 | Permalink -
Alex
MemberSOLVED!
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 13 years ago on Thursday October 7, 2010 | Permalink -
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 12 years ago on Saturday July 16, 2011 | Permalink -
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 12 years ago on Monday July 18, 2011 | Permalink -
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 12 years ago on Monday July 18, 2011 | Permalink -
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 12 years ago on Tuesday July 19, 2011 | Permalink -
Nice, thanks for posting the solution for other users!
Posted 12 years ago on Tuesday July 19, 2011 | Permalink
This topic has been resolved and has been closed to new replies.