How to remove the calendar window

  • rbell1
    Asked on December 18, 2018 at 4:16 PM

    Hi team

    Could you please help with the calendar icons (circled in screenshot) that is displaying on this form when the form is first loaded. They are large and don't look great.

    I would like the calendar icons (circled in screenshot) not to appear.  I also would like the current calendar to display only when the date field is clicked into.  Please note you have already made some changes that I requested to the popup calendar - these changes are perfect so please don't change the actual popup calendar.

    Thanks

    Richard

    Jotform Thread 1677294 Screenshot
  • John_Benson
    Replied on December 18, 2018 at 6:17 PM

    You can disable the Calendar Pop-up in the Properties page. Here's a screenshot guide:

    1545174980vxxcvxcv234626 Screenshot 10

    Also, please use the default Date Picker field.

    1545175050czxh6513 Screenshot 21

  • Kiran Support Team Lead
    Replied on December 19, 2018 at 6:47 AM

    I have checked your JotForm and see that the calendar being displayed is the icon beside the date field. I notice that there is some CSS code added to the form which is causing the icon to be displayed large. Please try removing the following section of the CSS code in the form so that the icon shall be displayed normally.

    .showAutoCalendar {

        width : 200%;

    }

    With the option enabled as mentioned by our colleague, the calendar shall only be displayed when clicked.

    Thanks!

  • rbell1
    Replied on December 19, 2018 at 2:29 PM

    Thanks I have made that change.  I think our customers find it difficult to click the small date icon.  Are you able to change it so the the calendar pops up if they click in the date field, and not the icon?

    Thank you

  • Mike_G JotForm Support
    Replied on December 19, 2018 at 4:21 PM

    I'm not sure if the solution I have below would work for you.

    Can you try injecting the CSS codes below to your form, please?

    img[id*="_pick"] {

        position: absolute !important;

        top: 24px;

        opacity: 0;

        width: 114px !important;

        height: 20px;

        cursor: text;

    }

    I hope this helps. If you have other questions or concerns, please feel free to let us know.

  • rbell1
    Replied on December 20, 2018 at 3:50 PM

    Hi

    That worked on the first date picker.  but then when i click in the second date picker field (after I have selected a date in the first date picker field) the calendar does not open up.  Did I do something wrong injecting the code?

    Thanks

    Richard

  • John_Benson
    Replied on December 20, 2018 at 5:04 PM

    I tested the form and I was not able to replicate the issue. Here's a screencast of my test:

    1545343234h676844 Screenshot 10

    Is the form embedded on a website? May we know what device are you using so we can try to replicate the issue?