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

  • drsmart
    Asked on February 3, 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!

  • Victoria_K
    Replied on February 3, 2018 at 1:06 PM

    Would the following field be suitable for your purposes?

    1517681395Screenshot 16 Screenshot 10

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

    1517680879Screenshot 14 Screenshot 21

    1517681144Screenshot 15 Screenshot 32

    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

  • drsmart
    Replied on February 3, 2018 at 1: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.

  • Nik_C
    Replied on February 3, 2018 at 3: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!

  • drsmart
    Replied on February 3, 2018 at 4:42 PM

     It seems I will need to use the DatePicker control.  When I copy and paste the source code to my html editor, the code related to the DatePicker control is:

    <li class="form-line" data-type="control_datetime" id="id_5">
            <label class="form-label form-label-top form-label-auto" id="label_5" for="lite_mode_5"> Date </label>
            <div id="cid_5" class="form-input-wide">
              <div data-wrapper-react="true">
                <div style="display:none;">
                  <span class="form-sub-label-container" style="vertical-align:top;">
                    <input class="form-textbox validate[limitDate]" id="month_5" name="q5_Form_Date[month]" type="tel" size="2" data-maxlength="2" value="02" />
                    <span class="date-separate">
                       -
                    </span>
                    <label class="form-sub-label" for="month_5" id="sublabel_month" style="min-height:13px;"> Month </label>
                  </span>
                  <span class="form-sub-label-container" style="vertical-align:top;">
                    <input class="currentDate form-textbox validate[limitDate]" id="day_5" name="q5_Form_Date[day]" type="tel" size="2" data-maxlength="2" value="03" />
                    <span class="date-separate">
                       -
                    </span>
                    <label class="form-sub-label" for="day_5" id="sublabel_day" style="min-height:13px;"> Day </label>
                  </span>
                  <span class="form-sub-label-container" style="vertical-align:top;">
                    <input class="form-textbox validate[limitDate]" id="year_5" name="q5_Form_Date[year]" type="tel" size="4" data-maxlength="4" value="2018" />
                    <label class="form-sub-label" for="year_5" id="sublabel_year" style="min-height:13px;"> Year </label>
                  </span>
                </div>
                <span class="form-sub-label-container" style="vertical-align:top;">
                  <input class="form-textbox validate[limitDate, validateLiteDate]" id="lite_mode_5" type="text" size="12" data-maxlength="12" value="02-03-2018" data-format="mmddyyyy" data-seperator="-" placeholder="mm-dd-yyyy" />
                  <label class="form-sub-label" for="lite_mode_5" id="sublabel_litemode" style="min-height:13px;">  </label>
                </span>
                <span class="form-sub-label-container" style="vertical-align:top;">
                  <img alt="Pick a Date0" id="input_5_pick" src="https://cdn.jotfor.ms/images/calendar.png" style="vertical-align:middle;" data-component="datetime" />
                  <label class="form-sub-label" for="input_5_pick" style="min-height:13px;">  </label>
                </span>
              </div>
            </div>
          </li>
          <li class="form-line" data-type="control_textbox" id="id_3">
            <label class="form-label form-label-top form-label-auto" id="label_3" for="input_3"> Last Name </label>
            <div id="cid_3" class="form-input-wide">
              <input type="text" id="input_3" name="q3_PatientLastName" data-type="input-textbox" class="form-textbox" size="20" value="" data-component="textbox" />
            </div>
          </li>
          <li class="form-line" data-type="control_textbox" id="id_4">
            <label class="form-label form-label-top form-label-auto" id="label_4" for="input_4"> First Name </label>
            <div id="cid_4" class="form-input-wide">
              <input type="text" id="input_4" name="q4_PatientFirstName" data-type="input-textbox" class="form-textbox" size="20" value="" data-component="textbox" />
            </div>
          </li>


    My goal is to substitute all of the above in my html with something like:

    <label id="label_5" style="display:none" for="id_5">Today's Date Line 73</label>

    <input type="text" class="datepicker" data-type="control_datetime" id="id_5" data-zdp_view="years" data-zdp_format="m-d-Y">

    I'm not sure what information is needed in my html to let JotForm know that the control in my html is connected to the control in JotForm.  I have tried many times using id="id_5",
    id="lite_mode_5", etc.

    I've also tried changing input type to "date" and datetime".

    Thanks!


  • Welvin Support Team Lead
    Replied on February 3, 2018 at 6:25 PM

    You can do it this way:

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

    How to use a date field with current date as default without using DatePicker? Image 1 Screenshot 30

    2. Add a Short Text Entry field.

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

    How to use a date field with current date as default without using DatePicker? Image 2 Screenshot 41

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


  • Welvin Support Team Lead
    Replied on February 3, 2018 at 6: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.

    How to use a date field with current date as default without using DatePicker? Image 1 Screenshot 20

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

  • drsmart
    Replied on February 3, 2018 at 6: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.

  • Kevin Support Team Lead
    Replied on February 3, 2018 at 8: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. 

  • drsmart
    Replied on February 3, 2018 at 9: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

  • Elton Support Team Lead
    Replied on February 3, 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.