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

    How do I disable dates till current date?

    Asked by stellarauto on March 09, 2011 at 12:23 AM

     

    Hi,

    I am using the form for car rental services. The current date and the days before it has to be disabled so that the customers can select the pick-up date starting next day inorder to check with vehicle availability. I tried using the conditions but it seems I have to change the date everyday .

     

    It would be like,

     

    If
    Pick-up Date & Time
    Please selectRental typeVehiclePick-up LocationPick-up Date & TimeReturn Date & TimeTitleFull NameGenderCompany NameCountryFaxLand PhoneMobileE-mailHow do you know abou...How can we contact y...
    field
    Before
    Please selectIs EmptyIs FilledBeforeAfter

    Then

    Show

                                                             Show                                                         Hide                                                     

    Please choose Date &...

     

    Please SelectOnline BookingWorking hours SATURD...ImagePlease choose Date &...Return date cannot b...Rental typeVehiclePick-up LocationPick-up Date & TimeReturn Date & TimePage BreakCustomer InfoTitleFull NameGenderCompany NameCountryFaxLand PhoneMobileE-mailPage BreakHow do you know abou...How can we contact y...Enter the message as...DisclaimerI confirm that I hav...I AgreeField (show -> Please choose date not less than 24hrs)

     

     

    Can you help me with it? 

    disable dates date conditions date picker style size name
  • Profile Image

    Answered by techinso on March 10, 2011 at 03:25 AM

    Hello,

     

    It is possible to change the condition so it will always include the current date, but you will need to modify the form source code. The condition for your calendar should look something like:

     

    <script type="text/javascript">
       JotForm.setConditions([{"type":"field","link":"Any","terms":[{"field":"1","operator":"before","value":"2011-03-10"}],"action":{"field":"2","visibility":"Hide"}}]);

     

    (I have made an example with hiding the submit button, so disregard the last hide :))

    In order to always use the current date, instead of the hardcoded date (in this example 2011-03-10), you can add the following lines just before the JotForm.setConditions line:

     

    var currentTime = new Date()
    var month1 = currentTime.getMonth() + 1
    var day1 = currentTime.getDate()
    var year1 = currentTime.getFullYear()
    if (month1<10) month1="0"+month1;
    if (day1<10) day1="0"+day1;
    curdate = year1 + "-" + month1 + "-" + day1

     

    and then replace:

    "2011-03-10"

    with

    curdate

     

    Please note that curdate should not be surrounded by quotes. In my example the new code looks like this:

     

    <script type="text/javascript">
    var currentTime = new Date()
    var month1 = currentTime.getMonth() + 1
    var day1 = currentTime.getDate()
    var year1 = currentTime.getFullYear()
    if (month1<10) month1="0"+month1;
    if (day1<10) day1="0"+day1;
    curdate = year1 + "-" + month1 + "-" + day1
       JotForm.setConditions([{"type":"field","link":"Any","terms":[{"field":"1","operator":"before","value": curdate}],"action":{"field":"2","visibility":"Hide"}}]);

     

    I hope this will be useful for you.

     

    Best Regards,

    Yanislav Ivanov

  • Profile Image

    Answered by stellarauto on March 13, 2011 at 09:06 AM

    Dear Mr.Yanislav Ivanov

     

    Thank you very much for your support. I find it useful and it works fine with the form. However,I found this following script through google and found this could actually disable the past dates so that the customers wont be able to select them. but I find difficulty implenting to the form. Is there a way to use it? I am not much of a guy to understand Javascripts. :P

     

    Script as follows :

    <!DOCTYPE html> 

    <html> 

    <head> 

    <link target="_blank" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="nofollow" rel="stylesheet" type="text/css"/> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

       <script> 

    $(document).ready(function() {

    // get the current date

    var date = new Date();

    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

    // Disable all dates till today

    $('#datepicker2').datepicker({

    minDate: new Date(y, m, d+1),

    dateFormat: 'mm-dd-yy',

    });

    function enableFirday(date) {

    var day = date.getDay();

    return [(day == 5), ''];

    }

    });

    </script> 

    <style> 

    h1{font-family: serif, "Bitstream Charter", tahoma; color:#1C6575;font-size:3em;border-bottom:1px solid #D6D6D6;}

    h2{font-family: serif, "Bitstream Charter", tahoma; color:#1C6575;float:left;clear:both;width:250px;text-align:right}

    input{border:1px solid #D6D6D6;background:url(DatePicker.gif) no-repeat right 3px; padding:2px;width:150px;margin:10px;float:left;}

    div.dateTypes{margin:0 auto;width:600px;}

    </style> 

    </head> 

    <body style="font-size:62.5%;"> 

    <center><a target="_blank" href="http://articles.tutorboy.com/javascript/jquery-ui-datepicker-disable-specified-dates.html" rel="nofollow"></a> 

    <div class="dateTypes"> 

    <input type="text" id="datepicker2" value="" /> 

    </div> 

    </center> 

    </body> 

    </html> 

  • Profile Image

    Answered by msfirth on March 13, 2011 at 09:23 PM

    Can I change the code without having to store it locally on my web server? Can I change the source code for my form online in on JotForm?

  • Profile Image
    JotForm Support

    Answered by liyam on March 17, 2011 at 06:36 AM

    hello stellarauto,

    I tried integrating the javascript form the sample that you have to jotform's datescript but unfortunately it's in conflict with the jotform script.

    Though let's see if we could add this into one of the date field features in JotForm.

    Hi msfirth,

    Unfortunately, you cannot edit the javascript without taking it out from jotfrom.

    Hope this helps.

  • Profile Image

    Answered by stellarauto on March 17, 2011 at 11:16 AM

    Thanks Liyam, 

    Kindly help me with it. 

    Sorry I didn include my name.

     

    Regards

    Aqil

  • Profile Image
    JotForm Support

    Answered by liyam on March 18, 2011 at 08:49 AM

    Hello Aqil,

    The sad news is that I'm not powerful enough to make this work.

    I have forwarded this to the development team.

    For now, let's stay with techinso's solution.

    Thanks

  • Profile Image

    Answered by stellarauto on March 19, 2011 at 09:58 AM

    Thanks again

    I'll keep my fingers crossed :)

  • Profile Image

    Answered by Madhu on June 19, 2012 at 01:07 AM

    Hello,

    I have two datePicker in my control "From" and "To". I want when when user select "From" date then dates lesser than selected date in "From", should be disable in "To".

  • Profile Image
    JotForm Support

    Answered by abajan on June 19, 2012 at 02:03 AM

    @Madhu

    Since there's no such functionality built into our Conditions Wizard, you would have to get a copy of the form's full source from the Embed Form Wizard, insert it into a web page and add a script to perform the task. If you provide the name of the form, we can search for it in your account and work on a solution (hopefully) for you.

    The solutions in this related thread may also be helpful.

  • Profile Image

    Answered by swetha  on March 09, 2015 at 08:17 AM

    above html code not working ie 7...please give me solution..
  • Profile Image
    JotForm Support

    Answered by abajan on March 09, 2015 at 09:54 AM

    @swetha

    This is a fairly old thread and we also find it's better to deal with each user in their own thread. As such, I've moved your question to another thread:

    http://www.jotform.com/answers/529471

    Your query will be addressed there in due course.

    Thanks

  • Profile Image

    Answered by suna  on May 23, 2016 at 06:49 AM

    Disable all dates except current date

     

    $( "#date" ).datepicker({ minDate: 0,maxDate: 0});

  • Profile Image
    JotForm Support

    Answered by Jan on May 23, 2016 at 09:40 AM

    @suna

    Thank you for sharing that solution. This will be helpful for everyone. Let us know if you need our help.