To use '{' charts in a custom code

I need to include an argument like this in a input form field (custom code) but it is displayed empty since the '{' & '}' charts are translated as data. How to proceed?

My argument is similar to

customdata="{format:'YYYY-MM-DD'}"

But it is displayed like

customdata=""

Thanks in advance,

Hi camerata,

Hmmm . . . that might be tricky. What exactly do you need to do with this - there might be another way round? For example. if this is JavaScript then a Load JS action might do the trick.

Bob

Hi, Bob.
Thanks for your reply.

I need the data to be passed by a javascript file. It's a date picker and other form addons. I would like to find a solution.

May be to use '[' and ']' charts with a JS action to substitute by '{' and '}'?
Please, let me know your suggestion and an example.

Thanks in advance.

HI camerata,

Then I'd add it using a Load JS action

var customdata = "{format:'YYYY-MM-DD'}";

I think that should work OK
Bob

Bob: Then I could not change the argument for other inputs in the same form.

I would need to manage my inputs like this. It's a custom date picker.

<input type="text" customdata="{format:'DD.MM.YYYY', months:'Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember', weekdays:'Mo','Di','Mi','Do','Fr','Sa','So'}">

Hi camerata,

If you PM me the details of the form and the custom datepicker then I'll see what I can get working. You should still be able to do this without having to add illegal attributes to the form inputs.

One work around would be to use a data attribute e.g.

data-dp="format:'DD.MM.YYYY', months:'Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember', weekdays:'Mo','Di','Mi','Do','Fr','Sa','So'"

and convert this back to a JS array in the datepicker.

Bob

Ok, Bob.
I will be contacting via PM with more data.

Like the problem is the '{' and '}' charts (it would work with '[' and ']') I think that a workaround could be to use JS to substitute these charts in the customdata atribute of inputs. Don't you?

I have not many experience with JS but I figure out that's simple. Could you suggest the lines to add the page?
Could I add these JS lines from the custom code form?

Newly thanks in advance.

Hi camerata,

With a lot of trial and error I've got the UIkit datepicker working using a standard ChronoForms input here.

There are several steps to this.

a) I copied the contents of the UIKit package into a new folder: /components/com_chronoforms5/extras/uikit

b) I added a Load JS action to my form with this PHP in it:

<?php
JHtml::_('jquery.framework');
$doc =& JFactory::getDocument();
$doc->addStyleSheet('/components/com_chronoforms5/extras/uikit/css/uikit.min.css');
$doc->addScript('/components/com_chronoforms5/extras/uikit/js/uikit.min.js');
$doc->addStyleSheet('/components/com_chronoforms5/extras/uikit/css/addons/uikit.addons.min.css');
$doc->addScript('/components/com_chronoforms5/extras/uikit/js/addons/datepicker.min.js');
$doc->addScript('/components/com_chronoforms5/extras/uikit/js/addons/form-select.min.js');
?>

Note: this could equally be a Custom Code action; the Load JS action just helps remind me what it is being used for.

c. I added a standard text input to the form Designer tab and added the UIKit parameters to the Extra Params box

data-uk-datepicker={format:'DD.MM.YYYY', i18n:{weekdays:['Mo','Di','Mi','Do','Fr','Sa','So'], months:['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']}}

!!! you have to get all the quotes and brackets correct in this for it to work !!!

I also got it working with a Custom Element element with this HTML in it:

<input type="" name='date_2' data-uk-datepicker="{format:'DD.MM.YYYY', i18n:{weekdays:['Mo','Di','Mi','Do','Fr','Sa','So'], months:['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']}}" />

Bob

PS In this version I'm loading the files for the default template and also for the Form Select add-on which enables the Month and Year selectors in the datepicker.

Thanks, Bob, You are correct,

Just I had charged the css & JS files and datepicker working. The question was the value for the 'data-uk-datepicker' argument.

Curiously when the value is complet (like yours) it works properly but when I write only

data-uk-datepicker="{format:'YYYY-MM-DD'}"

The input appears with

data-uk-datepicker=""

Ok. That's not a problem since I need to pass the month and week day names.