DateTime Single widget - New widget wizard is not recognizing injected CSS codes

  • MaidCrew
    Asked on December 9, 2015 at 10:24 PM

    Hi... Into one of my forms I've added a widget by the name of "DateTime Single". I'd like to cloak (not hide) the field so that the input (time stamp) registers upon page load and is then passed on through email upon form submission. (I know that the email's date&time can act as a time-stamp but I'm needing a time-stamp for when the form was actually initiated and then additional time-stamping for when certain subsequent pages were loaded or rendered.) Is there a simple way to cloak the widget so that viewers / form-submitters can't manipulate the time-stamp. I'm not good with CSS... not even sure if CSS can cloak a widget input-field or if the widget creator has to build that feature in ??? Thanks in advance for any help.

  • Chriistian Jotform Support
    Replied on December 10, 2015 at 3:03 AM

    Hi,

     

    Do you mean you want to disable the DateTime Single widget so user cannot change the value of the widget? If so, please try to inject this custom CSS code in your widget.

    input#cal {

        pointer-events: none !important;

    }

     

    DateTime Single widget   New widget wizard is not recognizing injected CSS codes Image 1 Screenshot 20

     

    You can check this sample cloned form that I used for testing - https://form.jotform.com/53431139061952?.

     

    Do let us know if you need further assistance.
    Regards.

  • MaidCrew
    Replied on December 10, 2015 at 6:08 AM

    Thanks for reply... it's not that I don't want user to be able to change the value, I just don't want the user to see the date & time at all... BUT I can't "hide" it with conditions or the output/value won't render/generate.

    I will place on the form a secondary, visible date & time field for the user to view & use as a "clock-in/check-in" while the cloaked date & time will be used to validate that they were honest with the "clock/check-in" times the user entered.

    Its like the cloaked GPS/address location validator I have on the form.  The user isn't aware that the upon submission, their location is recorded & passed along to us to validate they are where they're suppose to be. (we're wanting to use this form as a time-card for unsupervised employees out in the field who are suppose to be as specific addresses at specific times.... when they input their clock-in times & their location, we need to be able to have the form's cloaked GPS & Date-Time fields act as a validation of the values they inputted into the non-cloaked date-time fields.)

  • MaidCrew
    Replied on December 10, 2015 at 6:48 AM

    I tried the CSS you recommended on both an apple iphone & an Android based phone and on my computer and the input can still be manipulated or adjusted.

  • mert JotForm UI Developer
    Replied on December 10, 2015 at 9:14 AM

    Actually, if you set the "Hide the Default Field" as "Yes", it will hide the current date and time on the widget's "Text Box" field.

     

    To do that,

    DateTime Single widget   New widget wizard is not recognizing injected CSS codes Image 1 Screenshot 30

     

    Below, you can see the results on mobile:

    DateTime Single widget   New widget wizard is not recognizing injected CSS codes Image 2 Screenshot 41

     

    I hope this one will work for you. Please try this one and let us know the results.

    Thanks.

  • MaidCrew
    Replied on December 10, 2015 at 10:54 AM

    Thanks for the response but this solution does not work either.... users are still able to click into & activate the field and select a date & time.  The field has to be cloaked or disabled from editing to keep users from messing with it.

    the default date/time widget under Quick Tools would work IF it were to record current time upon page load rather than form load.  Still at a loss.

  • BJoanna
    Replied on December 10, 2015 at 12:13 PM

    CSS code that my colleague Chriistian provided will disable the DateTime Single widget so user cannot change the value of the widget. I have tested his form and my cloned form and I was not able to change the date/time on my PC and on my Samsung Galaxy S4.

    If you want to hide field, you can do it by adding this code inside of DateTime Single widget Custom CSS field.

    input#cal {

        visibility:hidden!important;

    }

    On my cloned form I disable first DateTime and I hide second field. After that I made test submission and first DateTime  field is showing time when i started form and second when I when I clicked on next button and open second page.

    DateTime Single widget   New widget wizard is not recognizing injected CSS codes Image 1 Screenshot 20

    Here is my demo form: https://form.jotform.com/53434552854964? 

    Hope this will help. Let us know if you need further assistance. 

  • MaidCrew
    Replied on December 10, 2015 at 1:55 PM

    I've made a recording of what I'm experiencing.  Not sure what I'm doing wrong but I thing I've followed y'alls instructions correctly and I'm still not obtaining the same results as y'alls cloned form.

    Please advise... I'm on a Windows 10Pro using both Chrome & Edge Browsers

    http://screencast-o-matic.com/watch/col6FKhUu7

    Thanks in advance.

  • BJoanna
    Replied on December 10, 2015 at 2:21 PM

    Thank you for providing video with your issue. When I watched your video I saw that you are using new widget wizard. It seems that new widget wizard is not recognizing injected CSS codes. I was able to replicate mentioned issue when I used new widget wizard. 

    I will escalate this issue to our developers and we will inform you via this thread once this issue is resolved. 

    For now with this link http://www.jotform.com/?old, you can access old widget wizard and add code that my colleague provided.

    DateTime Single widget   New widget wizard is not recognizing injected CSS codes Image 1 Screenshot 20

  • MaidCrew
    Replied on December 10, 2015 at 2:54 PM

    Still not sure whats wrong... did as you instructed but system doesn't want to render the same screens on my end.  Another vid to show what I did.

    http://screencast-o-matic.com/watch/col6qshUxj

    thanks

  • BJoanna
    Replied on December 10, 2015 at 3:41 PM

    I have moved your last question to separate thread, because it is not related to subject of this thread. We will provide you an answer on other thread shortly.

    http://www.jotform.com/answers/722722 

     

  • TitusN
    Replied on December 21, 2015 at 12:13 AM

    Hello, 

    We've fixed the Custom CSS tab - your Custom Styles should be able to work now - 

    Please give it a spin - and if you have any issues - let us know.

    We apologize for the inconvenience caused.