Title: Custom DatePicker Last modified: September 2, 2023 --- # Custom DatePicker * Resolved [andriiwork](https://wordpress.org/support/users/andriiwork/) * (@andriiwork) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/) * Hello All. I have a small problem with datepicker. I want use custom datepicker. I use this snippet for disable all UM DatePicker. And add my custom datepicker. All work fine, but when I choose date in my datepicker, date change only visual. When I click registration button I have error in date input label. * The same problem if I edit the user profile and change the date, it also changes only visually. After pressing the update profile button, the date remains as it was. * ```wp-block-code add_filter( 'um_extend_field_classes', 'my_extend_field_classes', 10, 3 ); function my_extend_field_classes( $classes, $key, $data ) { if ( $data['type'] == 'date' ) { $classes .= 'customdatepicker '; } return $classes; } function unload_um_styles(){ wp_dequeue_style(array( "um_datetime", "um_datetime_date", "um_datetime_time", )); wp_deregister_style(array( "um_datetime", "um_datetime_date", "um_datetime_time", )); }; add_action("wp_print_styles","unload_um_styles"); ``` Viewing 9 replies - 1 through 9 (of 9 total) * [missveronica](https://wordpress.org/support/users/missveronicatv/) * (@missveronicatv) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17021253) * [@andriiwork](https://wordpress.org/support/users/andriiwork/) * Which date picker are you trying to use? I have recently integrated this date picker with UM: * [https://wordpress.org/plugins/date-time-picker-for-contact-form-7/](https://wordpress.org/plugins/date-time-picker-for-contact-form-7/) * Thread Starter [andriiwork](https://wordpress.org/support/users/andriiwork/) * (@andriiwork) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17021261) * Hello [@missveronicatv](https://wordpress.org/support/users/missveronicatv/) * I use InputWP datepicker, but I can use you integrated cf7 datepicker:) * You have tutorial? * [missveronica](https://wordpress.org/support/users/missveronicatv/) * (@missveronicatv) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17021262) * [@andriiwork](https://wordpress.org/support/users/andriiwork/) * I have created this GitHub repository * [https://github.com/MissVeronica/UM-Integration-of-Date-Time-Picker](https://github.com/MissVeronica/UM-Integration-of-Date-Time-Picker) * Thread Starter [andriiwork](https://wordpress.org/support/users/andriiwork/) * (@andriiwork) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17021307) * [@missveronicatv](https://wordpress.org/support/users/missveronicatv/) Thanks for you help, I add you datepicker integration. But now I have wrong date format, I change date format in JS file “Y-m-d” to “d.m.Y” but its now work 🙁 * Thread Starter [andriiwork](https://wordpress.org/support/users/andriiwork/) * (@andriiwork) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17022190) * Hello [@missveronicatv](https://wordpress.org/support/users/missveronicatv/) I have a small solution 🙂 Maybe you know how I can change format in “value” and “data-value”. (Add photo and use this snippets). * In this input date format Y/m/d but in snippets I change format to `d.m.Y` * ![](https://i0.wp.com/i.ibb.co/YNvYTJS/Screenshot-2023-09-03-at-18-06-15.png? ssl=1) * ```wp-block-code add_action("um_registration_complete","um_change_date_format", 1, 2 ); function um_change_date_format( $user_id, $args ){ $date = get_user_meta( $user_id, "custom_date", true ); update_user_meta( $user_id, "custom_date", date_i18n("d.m.Y", strtotime( $date ) ) ); } add_action("um_after_user_updated","um_update_date_format", 1, 2 ); function um_update_date_format( $user_id, $args ){ $date = get_user_meta( $user_id, "custom_date", true ); update_user_meta( $user_id, "custom_date", date_i18n("d.m.Y", strtotime( $date ) ) ); } add_filter( "um_get_field_date", 'um_get_field_date_custom_format', 10, 1 ); function um_get_field_date_custom_format( $array ) { $array['js_format'] = 'dd.mm.yyyy'; $array['format_custom'] = 'd.m.Y'; $array['format'] = 'd.m.Y'; return $array; } ``` * [missveronica](https://wordpress.org/support/users/missveronicatv/) * (@missveronicatv) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17022221) * [@andriiwork](https://wordpress.org/support/users/andriiwork/) * You can try to use a filter in the `field_value` function and modify the returned` $value` in `class-fields.php` line 803. * Thread Starter [andriiwork](https://wordpress.org/support/users/andriiwork/) * (@andriiwork) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17022543) * [@missveronicatv](https://wordpress.org/support/users/missveronicatv/) I find solution for me 🙂 Thanks. I edit date format in class-fields.php – line 2649. * May be you can help me, how I can add this code in Snippet. I don’t want edit original UM Plugin files. Thanks for help! * ```wp-block-code // Normalise date format. $value = $this->field_value( $key, $default, $data ); if ( $value ) { // numeric (either unix or YYYYMMDD). ACF uses Ymd format of date inside the meta tables. if ( is_numeric( $value ) && strlen( $value ) !== 8 ) { $unixtimestamp = $value; } else { $unixtimestamp = strtotime( $value ); } // Ultimate Member date field stores the date in metatable in the format Y/m/d. Convert to it before echo. //$value = date( 'Y/m/d', $unixtimestamp ); $value = date( 'd.m.Y', $unixtimestamp ); } ``` * [missveronica](https://wordpress.org/support/users/missveronicatv/) * (@missveronicatv) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17022623) * [@andriiwork](https://wordpress.org/support/users/andriiwork/) * You can try this code snippet. I have used the meta keys `birth_date` and `date_picker` in this example. The filter is `"um_{$key}_form_edit_field"` * ``` add_filter( 'um_birth_date_form_edit_field', 'um_date_form_edit_field_format', 10, 2 ); add_filter( 'um_date_picker_form_edit_field', 'um_date_form_edit_field_format', 10, 2 ); function um_date_form_edit_field_format( $output, $set_mode ) { $array = explode( '" data-value="', $output ); if ( count ( $array ) == 2 ) { $last = explode( '"', $array[1] ); $unixtimestamp = strtotime( $last[0] ); $value = date( 'd.m.Y', $unixtimestamp ); $output = str_replace( $last[0], esc_attr( $value ), $output ); } return $output; } ``` * Thread Starter [andriiwork](https://wordpress.org/support/users/andriiwork/) * (@andriiwork) * [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17023717) * [@missveronicatv](https://wordpress.org/support/users/missveronicatv/) Thanks! You code work perfectly! Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Custom DatePicker’ is closed to new replies. * ![](https://ps.w.org/ultimate-member/assets/icon-256x256.png?rev=3160947) * [Ultimate Member – User Profile, Registration, Login, Member Directory, Content Restriction & Membership Plugin](https://wordpress.org/plugins/ultimate-member/) * [Frequently Asked Questions](https://wordpress.org/plugins/ultimate-member/#faq) * [Support Threads](https://wordpress.org/support/plugin/ultimate-member/) * [Active Topics](https://wordpress.org/support/plugin/ultimate-member/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/ultimate-member/unresolved/) * [Reviews](https://wordpress.org/support/plugin/ultimate-member/reviews/) * 9 replies * 2 participants * Last reply from: [andriiwork](https://wordpress.org/support/users/andriiwork/) * Last activity: [2 years, 9 months ago](https://wordpress.org/support/topic/custom-datepicker/#post-17023717) * Status: resolved