Up to 50 percent off

Jquery Datepicker Customization

This topic contains 3 reply and 3 voices, and was last updated by jman057 10 years, 7 months ago
Viewing 3 Posts - 1 through 3 (of 3 total)
Author Posts
October 29, 2013 at 11:35 pm 9587
jman057 I have purchased WPUF Pro and want to buy the Buddypress Profile Integration Add-on but need to make sure that I can customize the jquery date-picker to work with the Birthdate field in my Buddypress site. I want to add a year drop-down or year navigation buttons to the date-picker jquery calendar so that users can click to their year and then navigate to the month and pick the day. As of now there is are only buttons to go forward and backwards by month. I also want to set the default date to January, 24 1990 which is a more realistic date for someone signing up to my site. First, can you tell me where to find the code for the jquery date picker and can you take a look at the code below to see if it will work: $.datepicker.setDefaults($.extend({changeYear: true})); $("#datepicker_open").click(function(){ $("#datepicker").datepicker( "dialog", "23.01.1990", function(){ alert("Event onSelect"); }, { showButtonPanel: true } ); }); If this will work can you give me instructions on where to put this code. Thanks a lot!
October 31, 2013 at 1:06 am 9619
Tareq Hasan Tareq Hasan

[php]
function wpufe_set_datepicker() {
?>
<script type="text/javascript">
jQuery(function($) {
$.datepicker.setDefaults({
changeYear: true,
changeMonth: true,
defaultDate: new Date(1990, 0, 24)
});
});
</script>
<?php
}

add_action( ‘wp_head’, ‘wpufe_set_datepicker’ );
[/php]

Add this to your themes functions.php and you’ll have year and month dropdown and set the default date to January, 1990

October 31, 2013 at 5:41 am 9628
hughs hughs

Thanks Tareq,
I tested the above code in the WPUF registration and it works great. I am assuming it will format the date in the correct Buddypress format in the Buddypress Integration add-on.
Thanks again!

March 29, 2014 at 1:06 pm 17508
jman057 jman057

I added this to make sure I could select an appropriate date range

yearRange: '-90:+1'

Thanks for the solution!

Viewing 3 Posts - 1 through 3 (of 3 total)
Coupon
Coupons