How to display date picker calendar inline in form?

  • ipunt
    Asked on August 1, 2017 at 8: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

  • Ashwin JotForm Support
    Replied on August 2, 2017 at 2: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!

  • ipunt
    Replied on August 2, 2017 at 5: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:

     

    How to display date picker calendar inline in form? Image 1 Screenshot 30

     

    And I want to achieve this:

    How to display date picker calendar inline in form? Image 2 Screenshot 41

  • Ashwin JotForm Support
    Replied on August 2, 2017 at 8: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!

  • ipunt
    Replied on August 2, 2017 at 8:14 AM

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

     

    I

  • Ashwin JotForm Support
    Replied on August 2, 2017 at 9:41 AM

    Hello,

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

    Thank you!

  • Ashwin JotForm Support
    Replied on August 2, 2017 at 9: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:

    How to display date picker calendar inline in form? Image 1 Screenshot 20

    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!

  • ipunt
    Replied on August 2, 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

  • Kiran Support Team Lead
    Replied on August 2, 2017 at 1: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. 

  • ipunt
    Replied on August 4, 2017 at 7:21 PM

    Hi Kiran,

     

    Any chance I'll get this to work?

    Thanks for the effort.

     

    Ivo

  • Kiran Support Team Lead
    Replied on August 4, 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.