How to use a date field with current date as default without using DatePicker?

  • Profile Image
    drsmart
    Asked on February 03, 2018 at 12:33 PM

    I would like to know how to insert a date field to my form that will default to current date.  The only date field I see on the form builder is the DatePicker.  I would like to have not use the datepicker if possible.

    Thanks!

  • Profile Image
    Victoria_K
    Answered on February 03, 2018 at 01:06 PM

    Would the following field be suitable for your purposes?

    1517681395Screenshot_16.png

    To prevent entry to this field I have made the DatePicker "Read-Only" and set current date as default:

    1517680879Screenshot_14.png

    1517681144Screenshot_15.png

    If I am wrong with my suggestion, please describe your purposes clearer for us to find another options. 

    Let us know if you still need our help

  • Profile Image
    drsmart
    Answered on February 03, 2018 at 01:38 PM

    Thanks for your prompt reply.

    I don't want the field to be read only.  I would like the user to be able to manually enter a date other than the current date if they chose to.  My reason for not wanting the date picker is that I plan to use the source code in a web page on my website to be able to fully customize it.  The date picker adds a lot of complicated html code that I would like to avoid if possible.  In reading old support responses, it seems there used to be a "date" type field that did not include date picker.  If that were still available, that would be great.

  • Profile Image
    Nik_C
    Answered on February 03, 2018 at 03:14 PM

    The only date field in basic fields that we have is the one you already used.

    We also have date fields in widgets: https://widgets.jotform.com/search/date but those are built in iFrame, so I'm not sure if it will serve the purpose you need.

    If you have any further questions please let us know.

    Thank you!

  • Profile Image
    Welvin
    Answered on February 03, 2018 at 06:25 PM

    You can do it this way:

    1. Add a date field, set the current date:

    2. Add a Short Text Entry field.

    3. Add a conditional logic to copy the Date field to the Short Text Entry field:

    Demo: https://www.jotform.com/80337281574964. You can submit it using your email address to see the output.


  • Profile Image
    Welvin
    Answered on February 03, 2018 at 06:30 PM

    Just to add, in the Short Text Entry field, you can also enable the Input Mask. This will prevent mistakes in adding the custom dates.

    Use the correct separator in your date field. In my case, I used the hyphen. 

  • Profile Image
    drsmart
    Answered on February 03, 2018 at 06:52 PM

    I think I wasn't clear in my question.  I realize that I could use the method in your demo, but I plan to use my own html for my form to have greater control over the appearance and functionality of the form.  If possible, could you tell me what piece(s) of information (e.g.  id="id_5", id="lite_mode_5", etc.) connect the field in the JotForm with the html in the source code.  I hope to eliminate most of the html (shown in blue in my question) and just have a field that has a date in it.  I can get the current date into a control on the form in my html.  I just need the JotForm to recognize it as the input for id_5.

  • Profile Image
    Kevin_G
    Answered on February 03, 2018 at 08:48 PM

    Each field has a unique id, that's the same when you download the source code of your form, please check this guide that will help you finding the fields ids so you can handle them with your own script: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names 

    I hope this helps. 

  • Profile Image
    drsmart
    Answered on February 03, 2018 at 09:15 PM

    Thanks.  Actually, using the field id and Names from the control properties will not allow "Connecting" an input field from my html to the JotForm field.  After many, many trial-and-errors, what is required is a variation of the "Unique Field Name" found in the control Properties.

    In my form (https://form.jotform.com/80167186786166), the Date field in JotForm has   Unique Name (Under Advanced Properties / Field Details) = Form_Date.  Field ID’s = #month_5, #day_5, #year_5, #lite_mode_5.  In the source code (in blue in previous question), the input id=id_5 or lite_mode_5.

    None of these will work to connect the input in my html to the JotForm.  What is required is to include: name="q5_Form_Date" in the Input tag.  In my form, it looks like:

    <input type="text" class="datepicker" id="doesn't matter" name="q5_Form_Date" data-zdp_view="years" data-zdp_format="m-d-Y" data-type="input-datetime" data-component="textbox">

    This name (q5_Form_Date) is not shown anywhere on the properties of the control on JotForm.  The date control on JotForm is "Question #5" and the "Unique Name" is Form_Date - hence "q5_Form_Date".

    I just wanted to pass this on in case anyone else is having trouble "connecting" their html form and the JotForm form.

    Thanks again.

    https://form.jotform.com/80167186786166https://form.jotform.com/80167186786166

  • Profile Image
    EltonCris
    Answered on February 03, 2018 at 11:09 PM

    Lite mode is enabled in the datepicker field by default. This uses a single date field for month/day/year in replaced to the 3 date input fields when litemode is off where month/day/year are separated into different fields.

    However, despite of seeing a single date field/litemode field, the value entered in the litemode field is splitted into 3 and populated to the 3 hidden input fields where validation checks are performed. This is also where the values are taken for submission.

    So in your HTML form, you have to use the 3 input fields (month/day/year) in order to capture or pass the date field value. If that's not possible, use javascript function that splits the date value and pass them into the 3 hidden input fields.


    <input class="form-textbox validate[limitDate]" id="month_5" name="q5_Form_Date[month]" type="tel" size="2" data-maxlength="2" value="02" />

    <input class="currentDate form-textbox validate[limitDate]" id="day_5" name="q5_Form_Date[day]" type="tel" size="2" data-maxlength="2" value="03" />

    <input class="form-textbox validate[limitDate]" id="year_5" name="q5_Form_Date[year]" type="tel" size="4" data-maxlength="4" value="2018" />

    I hope this information helps

    If you need further clarifications, let us know.