SOLVED: Forms Element: Datepicker format and translation

Bugs
1

Can I in anyway change the datepicker in the forms element to have monday as week start date and also translate the days/months to another language?

I can see bricks is using flatpickr.js and it looks like there are localizations to play around with, but I don’t know how to use it :slight_smile:

2

Tried to use localizations, but failed in every way. For example I’ve tried to modify code used to do this in WS Forms.

@timmse Looking at 1.5 form element files (lines 1205-1228) it would be nice to have a filter here to modify existing or add more options to $datepicker_options array. Or the customization could be passed like in Fluent Forms date-time field.

			// Datepicker
			if ( $field['type'] === 'datepicker' ) {
				$this->set_attribute( "field-$index", 'class', 'flatpickr' );

				$time_24h = get_option( 'time_format' );
				$time_24h = strpos( $time_24h, 'H' ) !== false || strpos( $time_24h, 'G' ) !== false;

				$date_format = isset( $field['time'] ) ? get_option( 'date_format' ) . ' H:i' : get_option( 'date_format' );

				$datepicker_options = [
					'enableTime' => isset( $field['time'] ),
					'minTime'    => isset( $field['minTime'] ) ? $field['minTime'] : '',
					'maxTime'    => isset( $field['maxTime'] ) ? $field['maxTime'] : '',
					'altInput'   => true,
					'altFormat'  => $date_format,
					'dateFormat' => $date_format,
					'time_24hr'  => $time_24h,
					// 'today' => date( get_option('date_format') ),
					// 'minDate' => 'today',
					// 'maxDate' => 'January 01, 2020',
				];

				$this->set_attribute( "field-$index", 'data-bricks-datepicker-options', wp_json_encode( $datepicker_options ) );
			}

But I guess that for most users, simply having an option or tutorial to change date picker localization globally would be nice.

If there was a global locale setting for datepicker then the language settings could be loaded dynamically like described in this GitHub answer.

Docs: Localization - flatpickr

3

Hello @creatiwdk, @Matiasko

Thank you for your post. We added to the Bricks 1.5 release a new Bricks filter where you may modify the flatpickr library options as described in the academy: Form Element – Bricks Academy

This will only be available in the coming Bricks 1.5 update (not in first beta).

1 Like
4

This is more than I expected, so I really, really appreciate it :slight_smile:

1 Like
5

Hello, I need some help please.

The php snippet for the firstdayofweek work as is writen in bricks academy, but where can I add the date range option and the mindate today?

Thanks

6

Hi Andreas,
Welcome to to the forum!

You can add the minDate option like this:

add_filter( 'bricks/element/form/datepicker_options', function( $options, $element ) {

    $options = [
        'minDate' => 'today'
    ];

    return $options;
}, 10, 2 );
2 Likes