Custom DatePicker

Resolved andriiwork
(@andriiwork)

2 years, 7 months ago
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.
```
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

(@missveronicatv)

2 years, 7 months ago

@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/

Thread Starter

andriiwork

(@andriiwork)

2 years, 7 months ago

Hello @missveronicatv

I use InputWP datepicker, but I can use you integrated cf7 datepicker:)

You have tutorial?

missveronica

(@missveronicatv)

2 years, 7 months ago

@andriiwork

I have created this GitHub repository

https://github.com/MissVeronica/UM-Integration-of-Date-Time-Picker

Thread Starter

andriiwork

(@andriiwork)

2 years, 7 months ago

@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

(@andriiwork)

2 years, 7 months ago

Hello @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

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

(@missveronicatv)

2 years, 7 months ago

@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

(@andriiwork)

2 years, 7 months ago

@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!

					// 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

(@missveronicatv)

2 years, 7 months ago

@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

(@andriiwork)

2 years, 7 months ago

@missveronicatv Thanks! You code work perfectly!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Custom DatePicker’ is closed to new replies.