Is there any way to hide the Calendar fields and just leave the calendar icon?

  • eumiramc
    Asked on November 16, 2016 at 9:53 PM
    is there any way to hide the Calendar fields and just leave the calendar icon
  • Chriistian Jotform Support
    Replied on November 16, 2016 at 10:20 PM

    Yes, you can use the Mini Date Picker widget for your requirement. Simply add the Mini Date Picker widget to your form and add the CSS below to the Custom CSS area of the widget:

    input#datepicker {

        display: none;

    }

     

    Is there any way to hide the Calendar fields and just leave the calendar icon? Image 1 Screenshot 30

    Here's how it should look after:

    Is there any way to hide the Calendar fields and just leave the calendar icon? Image 2 Screenshot 41

    If you need further assistance, please let us know.
    Regards.

  • eumiramc
    Replied on November 20, 2016 at 8:35 PM

    Excellent! However, I see that there is a big space (I think) between the Date label and the icon, could you help me fix that?

  • Chriistian Jotform Support
    Replied on November 20, 2016 at 10:27 PM

    You can inject this custom CSS to your form to reduce the width of the Date label on your Test Table form. This should make the label closer to the icon. Please follow this guide on How to Inject Custom CSS Codes.

    #label_17 {

        width: 35px !important;

    }

    Is there any way to hide the Calendar fields and just leave the calendar icon? Image 1 Screenshot 20

    May I also suggest to add some instruction to the form so your users know they can select a date using the calendar icon. Otherwise, they might not now that they can select a date using that icon.

    Please let us know if you have further questions.
    Regards.

  • eumiramc
    Replied on November 20, 2016 at 10:49 PM

    Hi! Thank you very much! Thanks for your suggestion.

     

    Can I say something? Where do you configure/adapt so easily the CSS? Is that I don't know where to start and I don't know if you have a real time CSS editor for doing it.

  • Chriistian Jotform Support
    Replied on November 21, 2016 at 12:14 AM

    You are most welcome. You can use our Advanced Designer to setup your CSS and see the changes applied to your form immediately.

    To use the Advanced Designer, click the Design button on the form builder.

    Is there any way to hide the Calendar fields and just leave the calendar icon? Image 1 Screenshot 40

    Then click Advanced Designer.

    Is there any way to hide the Calendar fields and just leave the calendar icon? Image 2 Screenshot 51

    On the Advanced Designer page, click the CSS tab. You can then input the CSS that you want to apply to the form. Once the CSS is added, the changes should be visible on the form.

    Is there any way to hide the Calendar fields and just leave the calendar icon? Image 3 Screenshot 62

    You can also check this guide for more information on the advanced designer: Form Designer Tutorial: Let's create fantastic forms!

    Cheers.