How do I disable dates till current date?

  • Profile Image
    stellarauto
    Asked 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? 

  • Profile Image
    techinso
    Answered 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
    stellarauto
    Answered 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 noopener" 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 noopener"></a> 

    <div class="dateTypes"> 

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

    </div> 

    </center> 

    </body> 

    </html> 

  • Profile Image
    msfirth
    Answered 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
    liyam
    Answered 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
    stellarauto
    Answered 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
    liyam
    Answered 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
    stellarauto
    Answered on March 19, 2011 at 09:58 AM

    Thanks again

    I'll keep my fingers crossed :)

  • Profile Image
    Madhu
    Answered 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
    abajan
    Answered 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
    swetha 
    Answered on March 09, 2015 at 08:17 AM

    above html code not working ie 7...please give me solution..
  • Profile Image
    abajan
    Answered 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
    suna 
    Answered on May 23, 2016 at 06:49 AM

    Disable all dates except current date

     

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

  • Profile Image
    Jan
    Answered 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.