DateTime Single widget: Add an option to make the widget read-only

  • Profile Image
    Asked on May 04, 2016 at 01:06 PM

    It seems the bug is still present. When you set as read only a data field set in Lite Mode, the field show less then the first 2 digits.

    Any suggestion?

  • Profile Image
    Answered on May 04, 2016 at 01:25 PM

    Are you trying to make the DateTime Single widget read-only or are you referring to the normal Date field in Lite Mode? On the original thread, it is said that the issue occurs in the form of the user who opened that thread. May we know which form on your account are you working on that has either of these fields so we can try to reproduce the issue.

    We will wait for your response. Thank you.

  • Profile Image
    Answered on May 04, 2016 at 04:35 PM

    Hi Mike, and thanks for your prompt reply.

    I'm referring to the normal Date field in Lite Mode.

    this is the form I'm working on 

    I'm building a booking process, where customer ask the availability of the theater, filling few fields. If it is available, I send back a link to the "I agree to book an I will pay you" form with URL parameters, in order to pre fill data filed asked, price and few other info, asking to complete the information we need and resubmit to confirm the booking.

    i also added a calculation field that set the date for the payment 10 day before the booked date.

    This is the reason why I need all these data filed are read only.


    BTW JotForm is AWESOME and I'm falling in love !!!




  • Profile Image
    Answered on May 04, 2016 at 05:27 PM

    I see what you mean, after cloning your form, I noticed that when the Date/Time field on your form is set as read-only while on Lite mode it shrunk making only one digit visible.

    It doesn't seem to be applied to all forms because when I tried having it in a form that only has a Date/Time field with the same settings, it just works fine.

    Now, to fixed the issue, we can use CSS codes to increase the width of the Date/Time field in Lite mode. 

    For your form, you can add the CSS codes below.

    #id_59 .form-sub-label-container:last-child, #id_48 .form-sub-label-container:last-child {

        width: 50% !important;


    Here's a guide that will teach you how to inject custom CSS codes to your form.


    Here's a clone version of your form where I have applied the changes above.

    Please note that I just set field "Data" to have the current date so the conditions will be met and it will show the "Il pagamento avverrà entro il" field.

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image
    Answered on May 04, 2016 at 07:00 PM

    It works. Thanks. Because there were some other hidden data field, I add the relevant #id_ in the CSS and all the data fields are working. Many thanks. You are great!


  • Profile Image
    Answered on May 04, 2016 at 08:13 PM

    On behalf of my colleague, you're welcome.

    If you have any other questions or concerns, feel free to open a new thread.