Set datepicker field to “readonly” mode ?

  • Resolved eugene212

    (@eugene212)


    5 years, 7 months ago

    Hi,

    A datepicker field is a very convenient way for picking up dates using a pop-up calendar, but on mobile phones the calendar might be partially blocked by a virtual text keypad, so it requires users to either scroll the page or close the virtual keypad in order to see a complete calendar.

    I have tried to find “read only” Forminator setting for a datepicker field to no avail.

    Is it possible somehow to disable input field for editing, so that there is no obstruction (on mobile phones) to the pop-up calendar when choosing the date ?

    Please advise,

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter eugene212

    (@eugene212)

    5 years, 7 months ago

    Further to this topic:

    I have managed to get the desired behaviour by adding “readonly” attribute in the date.php file, Line 275:

    …..
    array(
    ‘readonly’ => ‘readonly’,
    ‘type’ => ‘text’,
    …….

    But I just wonder if it is (can be) configurable from WP admin panel ?

    Regards,

    Thread Starter eugene212

    (@eugene212)

    5 years, 7 months ago

    The workaround described before is working fine for me at the moment, but it probably would be overwritten with Forminator updates.

    For a better (permanent) solution, maybe development team will consider adding ability to configure “readonly” attribute of Datepicker’s input field via WP admin panel ?

    Regards,

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    5 years, 7 months ago

    HI @eugene212 ,

    Is it possible to share a screenshot regarding how it behaves with the “Virtual Keypad” in mobile? I gave a quick test but wasn’t able to notice any difference with keypads when tested.

    Is it specific to any one mobile device? or mobile browser? Could you please provide further details regarding this so that we could have a better idea regarding the request to make the “Date” field read-only.

    Please advise if I’m missing out anything. Looking forward to your response.

    Regards,
    Nithin

    Thread Starter eugene212

    (@eugene212)

    5 years, 7 months ago

    Hi @wpmudevsupport11

    Nothing is wrong with the virtual keypad as such – I was rather suggesting UI improvement for (common) use case when only the pop-up calendar is used for date picking.

    In this case the virtual keypad is not required at all and actually it’s rather annoying to see it popping up in front of the calendar.

    Here is an example of the virtual keypad obstructing half of calendar:

    https://drive.google.com/file/d/1TxvL6vzQPPnoDZBhkNp21BMW2N-NEzTD/view?usp=sharing

    So, it would be convenient if ‘readonly’ attribute can be enabled/disabled via Forminator WP admin panel.

    Regards,

    Plugin Support Dimitris – WPMU DEV Support

    (@wpmudev-support6)

    5 years, 7 months ago

    Hello @eugene212

    Appreciate the additional information on this. I’ve already shared that with the Forminator team for further consideration. 🙂

    Thank you,
    Dimitris

    boriswenzel

    (@boriswenzel)

    5 years, 3 months ago

    Hi, I have the same issue with a text field.
    It is pre populated with a parameter and the user should not be able to change it.

    The bad thing of the work around is, that all text fields are set to read only.

    Please help to develope a solution.

    Thanks
    Boris

    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    5 years, 3 months ago

    Hi @boriswenzel,

    You can use the HTML field instead to create your custom text option, prepopulated and also adding a read-only attribute to it. You can check out our docs for reference as well:https://premium.wpmudev.org/docs/wpmu-dev-plugins/forminator/#html-field

    If you need any further assistance, please open up a new separate thread so that we can better assist you.

    Best,
    Jonathan S

    Thread Starter eugene212

    (@eugene212)

    5 years, 2 months ago

    Hi there,

    Please advise if anything is planned to address the issue – a few months has passed and every time when Forminator is updated I have to manually add the “read only” property in Forminator code.

    It’s not a big problem, but would be much neater if such option is made available in Forminator.

    Regards,
    Eugene

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    5 years, 2 months ago

    Hi @eugene212

    I’m afraid we don’t have an estimated time.

    But could you give a try on this code as a mu-plugin?

    <?php

add_filter( 'forminator_field_date_markup', function( $html, $field ){

	if ( isset( $field[ 'custom-class' ] ) && strpos( $field[ 'custom-class' ], 'readonly' ) !== false ) {

		$html = str_replace( 'type="text"', 'type="text" readonly', $html );

	}

	return $html;

}, 20, 2 );

    Remove the custom line from Forminator adds the readonly class to your date input:

    https://monosnap.com/file/Lc7AYKbX69kBJe8Ft0He9N19LpAC04

    If you are not familiar with mu-plugins:
    https://premium.wpmudev.org/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

    Let us know if this workaround worked without editting the plugin code file.

    Best Regards
    Patrick Freitas

    Thread Starter eugene212

    (@eugene212)

    5 years, 2 months ago

    Hi Patrick,

    Your suggested workaround is working, thank you !

    With mu-plugin solution it seems that there is no longer need for manual code adjustment when Forminator is updated, so I am marking the topic as resolved (via workaround).

    Regards,
    Eugene

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

The topic ‘Set datepicker field to “readonly” mode ?’ is closed to new replies.