How to remove the calendar window

  • Profile Image
    rbell1
    Asked on December 18, 2018 at 04: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

  • Profile Image
    John_Benson
    Answered on December 18, 2018 at 06:17 PM

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

    1545174980vxxcvxcv234626.png

    Also, please use the default Date Picker field.

    1545175050czxh6513.png

  • Profile Image
     
    Answered on December 19, 2018 at 01:18 AM

    Thanks for that.  I have disabled the calendar popup.

    I would like the calendar to pop up when the customer clicks in the date field.  is that possible?


  • Profile Image
    Kiran
    Answered on December 19, 2018 at 06: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!

  • Profile Image
    rbell1
    Answered on December 19, 2018 at 02: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

  • Profile Image
    Mike_G
    Answered on December 19, 2018 at 04: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.

  • Profile Image
    rbell1
    Answered on December 20, 2018 at 03: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

  • Profile Image
    John_Benson
    Answered on December 20, 2018 at 05:04 PM

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

    1545343234h676844.gif

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