Change input type

Is it possible to change the input field type of a textbox.
I need it to be "date" instead of "text" for the HTML5 datepicker.

With the custom field it is no problem, but it has no "label position" or "tooltip".

I can change the type of the input type in the custom code but than wizard switches it back.

Hi RobP,

As far as I can see you can't change an input type with JavaScript, but using a Custom Code action seems to work OK. I just pasted in the HTML from another CF text input and changed the name, id and type attributes:

<input name="date_a" id="date_a" value="" placeholder="" maxlength="" size="" class="form-control A" title="" style="cursor: auto; background-image: none; background-position: 0% 0%; background-repeat: repeat;" data-inputmask="" data-load-state="" data-tooltip="" type="date" />

or if you prefer the version without all the clutter:

<input name="date_a" id="date_a" class="form-control A" value="" type="date" />

Bob

Hi Bob,

It works with the custom module.
The Tooptip also works.

But the labels are still a problem.
I can't find a way to get the labels to the TOP position.

Rob

Hi Rob,

Leave the Label box of the Custom Code action empty so that ChronoForms doesn't create a label and add the label code to the Code box using the gcore-label-top class:

<label for="text3" class="control-label gcore-label-top">Custom Code</label>
<input name="text3" id="text3" value="" class="form-control A" type="date">

Bob

Tried that.

It puts the Label inside the <div id of field, the tooltip position is then much to high.
Also the label is not visible in the Designer, have to put it in a container.

Rob

Hi Rob,

A bit of trial and error got me to this:

<label for="date_a" class="control-label gcore-label-top">Custom Code</label>
<div class="gcore-input-wide gcore-display-table" id="fin-date_a" style="float: left;">
  <input name="date_a" id="date_a" value="" class="form-control A"  data-tooltip="Tooltip text goes here" type="date" data-type="color">
  <span class="help-block">sub-label</span></div>
</div>

It is true that the label isn't visible in the Designer though :-(

Bob

Thanks Bob,

It would have been a lot easier if it was possible to change the label position in the Custom field or the type in the Text field.

Rob

Hi Rob,

I agree, particularly about the ability to set the HTML5 Type directly in the Text box element.

Bob