Form date picker on one row

Squiz Matrix Support
1

Matrix Version: 6.21.2

Afternoon, looking for some help to get my date picker on the same row but keeping the drop-down functionality. I have build this before on another form but it was free-text and I no longer want free text. What am I missing here.

Old code for free text:

 <div class="row">
    	        <div class="form-group col-lg-6">
                    <legend class="sq-form-question-title date">Key date</legend>
                    <div class="sub-row">
                        <div class="col-lg-3">
                            <label for="q101753_q1_value_d">Day</label><input type="text" name="q101753_q4_value[d]" value="" size="2" maxlength="2" onfocus="this.select()" id="q101753_q4_value_d" class="form-control input-lg">
                        </div>
                        <div class="col-lg-3">
                            <label for="q101753_q4_value_m">Month</label><input type="text" name="q101753_q4_value[m]" value="" size="2" maxlength="2" onfocus="this.select()" id="q101753_q4_value_m" class="form-control input-lg">
                        </div>
                        <div class="col-lg-3">
                            <label for="q101753_q4_value_y">Year</label><input type="text" name="q101753_q4_value[y]" value="" size="4" maxlength="4" onfocus="this.select()" id="q101753_q4_value_y" class="form-control input-lg">
                        </div>
                    </div>
    	        </div>
    	    </div>

New code with date fields on separate rows:

        <div class="form-group row">
			<div class="col-lg-6">
			    <div class="sub-row">
			        <div class="col-lg-3">
				%question_label_225853_q1%
				<!-- Key date -->
				%question_field_225853_q1%
				    </div>
				</div>
			</div>
		</div>

Thanks
Innes

3

Hey @Bart any ideas on this one please? Can’t seem to keep the drop-down functionality but also having the fields stay on the one line.

Thanks

4

Hi @innesz,

It is possible to chain some ^replace modifiers to the question_field_ keywords, but it’s unfortunately a bit fragile and you can end up breaking the rendering of those fields.

I think you’re better off using a Text Question and changing the input type to date so you get an <input type="date">.

You get a value from that in the format of YYYY-MM-DD so you can then use ^date_format modifiers to transform the output (in emails, etc) to whatever you need.

It should also adapt the appearance to the local version for the user, so, for example, in Australia we would see it displayed as DD/MM/YYYY when entering a value or selecting one from the datepicker. The field itself handles converting to the YYYY-MM-DD format for the actual value state.

1 Like
5

Hi @isimmons, that’s great. Thanks very much for the advice and taking the time to get back to me. I will give this a try today and it solves my problem.

Many thanks
Innes

6

Hi @isimmons, this is what I have now and looks great.

<div class="form-group col-lg-6">
                <legend class="sq-form-question-title date">Key date</legend>
            <div class="sub-row">
                <div class="col-lg-6">
            <input type="date" name="q225853_q1_value[dmY]" value="" size="8" maxlength="10" onfocus="this.select()" id="q225853_q1_value_dmY" class="form-control input-lg">
                </div>
            </div>
        </div>

Does my value [dmY] look correct or will this affect the output?

Thanks again
Innes

7

Hi @innesz,

Sorry, to be clear, you would not use the Date Question type with an <input type="date">. It has to be just a Text Question type.

So I think you can just use the %question_field_225853_q1% keyword and let it print the input for you.

You can also use the ‘Extras’ option for the question to add custom class="…" or other attributes (applied to the <input> only).

8

Ah ok but upon using that input type date, it uses a calendar date picker and works perfectly so might be ok. I have still to test the submissions etc. so will see how I get on. If there is any issues I know I can use what you have suggested.

Thanks again
innes

9

Thanks for your help with this! I have finally been able to get test submissions working for this form. My old date field failed to print anything. I created the text field with the input changed so thanks again.

But, in the submission email data it appears as 2023-04-18, do I have to add the keyword modifier to my submission data:

%response_225853_q5^replace_keywords:notempty: Key date test: {response_225853_q5}%

10

Hi @innesz,

No problem!

To answer your question, yes, you would need keyword modifiers if you want the date in a different format, for example:

%response_225853_q5^date_format:j F Y^prepend_if:Key date test\: %

Would output something like:

Key date test: 12 April 2023

The ^date_format modifier uses the PHP datetime format patterns.

Note also the ^prepend_if: modifier that prepends something only if the keyword has a value.

You also no longer need to use the ^replace_keywords modifier.

1 Like
11

Great thanks very muc!