What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Calender Picker - Restrict Previous Date & Switching to Signle Text Box

    Asked by virtualclick on June 27, 2013 at 02:31 PM

    I have two questions...

    Note: I'm hosting the source / javascript myself.

    1. How do we restrict the calender picker from allowing a user to select a previous date from today.

    2. How do we change the format of the date entry fields from 3 boxes - to just one larger box?

     

    Thanks!

     

    Page URL:
    www.flywithclass.com

    source format select datetime calendar picker
  • Profile Image
    JotForm Support

    Answered by Mike_T on June 27, 2013 at 03:21 PM

    Thank you for contacting us.

    1. How do we restrict the calender picker from allowing a user to select a previous date from today.

    The DateTime field is based on http://calendarview.org/ widget for Prototype. Unfortunately, I have not found any references in documentation about disabling the dates. However, it is possible that one of my colleagues has found a workaround per this thread. I will ask him about this and then get back to you.

    2. How do we change the format of the date entry fields from 3 boxes - to just one larger box?

    The DateTime field can not be switched to the single Text Box, but if you need it, you can use a simple Text Box, and add a custom Javascript in order to trigger the Calendar on it.

    You can find some code examples on the following page:

    http://calendarview.org/

    Also, there is a basic example with JotForm Text Box.

  • Profile Image

    Answered by virtualclick on June 27, 2013 at 05:17 PM

    Thanks that code works! However, I have 2 date field boxes.  The first one works, but not the 2nd. How do I change the javascript to have the calander popup appear for both? I tried this ..but doesn't work..

    <script type="text/javascript">
        window.onload = function() {
        Calendar.setup({
            dateField    : 'input_25', 'input_29',
            triggerElement :'calendarButton'
            })
            }
    </script>

     

  • Profile Image

    Answered by jeanettebmz on June 27, 2013 at 05:59 PM

    On regards to your first question, actually there is a way to restrict past dates through conditional logics as I've explained in a past post for Weekly Updates

    Please check this form

    I used dynamic dates conditional :  'today - 364'

    Of course, you need to stablish on conditional to hide the submit button and show a warning or something like that. And I think that would work for 1 or more DateTime fields

  • Profile Image

    Answered by jeanettebmz on June 27, 2013 at 06:04 PM

    On regards to this question or further questions you might have

    2. How do we change the format of the date entry fields from 3 boxes - to just one larger box?

    We would appreciate if you open one thrad for each question you might have, this way you'll help us to maintain a knowledge base to provide solutions for other users with similar situations

    Cheers!

  • Profile Image
    JotForm Support

    Answered by Mike_T on June 27, 2013 at 06:43 PM

     

    The first one works, but not the 2nd. How do I change the javascript to have the calander popup appear for both?

    You can try the following:

    <script type="text/javascript">

          window.onload = function() {

            Calendar.setup(

              {

                dateField : 'input_25'

              }

            )

            Calendar.setup(

              {

                dateField : 'input_29'

              }

            )

          }

    </script>

    It seems that we can avoid using 'triggerElement', so this will pop-up automatically upon input click.

    Anyway, Jeanette is right, we strive to have one question per one thread, so it will be easier to deal with and much more accessible for other JotForm users. Please kindly use separate threads for each inquiry.

    Thank you!

  • Profile Image

    Answered by virtualclick on June 27, 2013 at 07:04 PM

    Thank-you! That solved my issue.

  • Profile Image

    Answered by thyrocare on August 23, 2014 at 06:43 AM

    Is there any other option for the solution Like using CSS
  • Profile Image
    JotForm Support

    Answered by KadeJM on August 23, 2014 at 05:34 PM

    @ virtualclick 

    On behalf of my colleagues whom had helped you here you are most welcome and we're very glad to hear that this has solved your issue.

     

    @ thyrocare

    You've asked a follow-up question to this thread so I have moved your question here.