How to display date picker calendar inline in form?

  • Profile Image
    ipunt
    Asked on August 01, 2017 at 08:05 PM

    Got my form ready to go but......

     

    Who of you has a solution to get my date picker INLINE? And only on the first page!!!

    I need this date picker as it has all the advantages of blocking dates and no single selection. 

     

    Help me out here.

     

    Ivo

     

     

    reservation-2017-jotform-help-needed

  • Profile Image
    ashwin_d
    Answered on August 02, 2017 at 02:22 AM

    Hello,

    Please inject the following custom css code in form to align the textbox of date picker:

    input#lite_mode_3 {

        padding-top: 17px;

        height: 40px;

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!

  • Profile Image
    ipunt
    Answered on August 02, 2017 at 05:49 AM

    Thanks Ashwin but this wasn't the question on this thread.

     

    I want the date picker to show INLINE (EMBEDDED)

    My first page looks like this now:

     

     

    And I want to achieve this:

  • Profile Image
    ashwin_d
    Answered on August 02, 2017 at 08:11 AM

    Hello,

    Do you mean to say that you want to show the date picker popup inline within the form? 

    Let me try it out and I will get back to you if I am able to come up with desired custom css code.

    Thank you!

  • Profile Image
    ipunt
    Answered on August 02, 2017 at 08:14 AM

    Yes exactly. Hope you'll come up with the perfect solution. 

     

    I

  • Profile Image
    ashwin_d
    Answered on August 02, 2017 at 09:41 AM

    Hello,

    I am working on your requirement and will get back to you soon with the required custom css code.

    Thank you!

  • Profile Image
    ashwin_d
    Answered on August 02, 2017 at 09:54 AM

    Hello,

    Please take a look at the following cloned form and see if this is what you wanted to achieve:  https://form.jotformpro.com/72133608679968

    Screenshot:

    Please inject the following custom css code in your form to display the calendar inline in form:

    div#calendar_3 {

        display: inline !important;

        margin-left: 600px !important;

        margin-top: -522px !important;

    }

    #id_3 {

        padding-bottom: 350px !important;

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Do get back to us if you need any other changes.

    Thank you!

  • Profile Image
    ipunt
    Answered on August 02, 2017 at 10:18 AM

    That's the first page exactly BUT

    when someone selects a date and forwards to the next page, the calendar is still there.

    Solution?

     

    Ivo

  • Profile Image
    Kiran
    Answered on August 02, 2017 at 01:27 PM

    Though the form is displayed in separate pages, it is the same form and so the CSS code applied to the Calendar is causing it to display on the next pages. Please allow me some time to check on this and get back to you with relevant information.

    Thank you for your patience. 

  • Profile Image
    ipunt
    Answered on August 04, 2017 at 07:21 PM

    Hi Kiran,

     

    Any chance I'll get this to work?

    Thanks for the effort.

     

    Ivo

  • Profile Image
    Kiran
    Answered on August 04, 2017 at 10:13 PM

    Sorry about the delay, Ivo. I'm still working on it and will get back to you by today with some useful information. 

    Thank you for your patience and understanding.