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?
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?
Also, is it possible to disable the user to select days in the past too?
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.
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
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.
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
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?
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
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!!!
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
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
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>
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.
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.
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.
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.
Nice, thanks for posting the solution for other users!