custom field

Integrate a Bootstrap 3 jQuery UI datepicker or spinner using a custom field in ChronoForms.

Overview

The issue arises when trying to use a custom code field to implement advanced input controls like datepickers and spinners, as they need to properly pass data to the session and be recognized in the debugger.
Use a custom field element with the correct HTML structure, ensuring the input element has a proper name and ID attribute to allow CF to capture and process the submitted data correctly.

md mdma 07 Sep, 2015

Hello,
iam trying to integrate a bs3 jqueryui like datepicker.
I have seen external datepickers were implemented with a text-field.

I want to integrate with a custom-code field in designer.
I need to know what code is needed that a field generated through custom field can:

pass data to session and so on,
gets recogniced in the debugger as array(?)

is it possible?how?

md mdma 07 Sep, 2015

<div class="input-group date">
  <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

this should be the code in the end...
would it be possible to construct code with a standard text field like this?

I have seen the tutorials with jqueryUI but the problem there is:
the calender-icon doesnt open the calender..

md mdma 07 Sep, 2015

another question also regarding manipulating txt-field or if possible use custom code field...

for a spinner

<div class="input-group spinner">
    <input type="text" class="form-control" >
    <div class="input-group-btn-vertical">
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
    </div>
  </div>
</div>

md mdma 08 Sep, 2015

Answer

hello
the first code for calender input i got working in a custom field element by
coping/editing/messing with code around from standard text field and come closer and closer to desired code:


<div class="input-group date">
<input name="mycustomfield" id="mycustomfield" class=" form-control"  type="text" /> 
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>

this is bootstrap 3 input-group markup now, so also the icon is now linked to open calender.

This topic is locked and no more replies can be posted.