InputfieldDatetime - Datapicker

[vgraveto]

I am new to process wire.

I am using InputfieldForm to create an Input form in my site with some text fields and one Datetime files:

// get the conference date and time

$field = $modules->get("InputfieldDatetime");

$field->label = "Conference Date";

$field->attr("id+name","date");

$field->required = 1;

$field->datapicker = 2; // picker on Click

$field->dateInputFormat = 'Y/m/d';

$field->timeInputFormat = 'H:i';

$form->append($field);

 

The form works Ok, but the data picker is never there!!!

 

The Datapicker is working Ok in the admin panel!!

 

I also need some help in how to change the stytes in my InputfieldForm, an example with one or two fields is perfect.

 

Can any one help me

 

Thanks,

Vitor Garcia Graveto

[vgraveto]

I had a syntax error in the code "datapicker", but I changed already to "datepicker" and it does not work yet.

// get the conference date and time

$field = $modules->get("InputfieldDatetime");

$field->label = "Conference Date";

$field->attr("id+name","date");

$field->required = 1;

$field->datepicker = 1; // picker on Click

$field->dateInputFormat = 'Y/m/d';

$field->timeInputFormat = 'H:i';

$form->append($field);

I am using version 2.2.2 of pw

Thanks,

[adrian]

Make sure these are getting loaded:

http://pwempty.dev/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css

http://pwempty.dev/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js

and if you ever want the time picker as well:

http://pwempty.dev/wire/modules/Inputfield/InputfieldDatetime/jquery-ui-timepicker-addon.js

[vgraveto]

Sorry for my rookie question!

How can I check those files are being loaded?

I need both date and time picker.

Thanks,

[adrian]

Firstly, if you want timepicker support, you'll need to use option 1 or 3 for: $field->datepicker

https://github.com/ryancramerdesign/ProcessWire/blob/03387f8283d518e9cc405eff8f05cd6a5bf77c4c/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.module#L24

Then to see if they are being loaded, just view the page source of your page once it's loaded in the browser. If those scripts are not there, you can do this:

$config->styles->add("/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css");
$config->scripts->add("/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js");
$config->scripts->add("/wire/modules/Inputfield/InputfieldDatetime/jquery-ui-timepicker-addon.js");

[Soma]

adrian is right.  But you'll also need jQuery Core and jQuery UI library included in your website or that pages where you have datepicker, since datepicker the one from there I thought. 

Small side note. Instead of writing 

$field->datepicker = 1;

You should use the constant

$field->datepicker = InputfieldDatetime::datepickerClick;

More readable too.

Firstly, if you want timepicker support, you'll need to use option 1 or 3 for: $field->datepicker

https://github.com/ryancramerdesign/ProcessWire/blob/03387f8283d518e9cc405eff8f05cd6a5bf77c4c/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.module#L24

Then to see if they are being loaded, just view the page source of your page once it's loaded in the browser. If those scripts are not there, you can do this:

$config->styles->add("/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css");
$config->scripts->add("/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js");
$config->scripts->add("/wire/modules/Inputfield/InputfieldDatetime/jquery-ui-timepicker-addon.js");

But that depends on how he's implemented the scripts in his templates. Not everybody is using $config->scripts $config->styles array?

[vgraveto]

With your great help I am almost there. I include in my header the lines:

        <link type='text/css' href='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css?v=103' rel='stylesheet' />

        <script type='text/javascript' src='/wire/modules/Jquery/JqueryCore/JqueryCore.js?v=162'></script>

        <script type='text/javascript' src='/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=180'></script>

        <script type='text/javascript' src='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js?v=103'></script>

        <script type='text/javascript' src='/wire/modules/Inputfield/InputfieldDatetime/jquery-ui-timepicker-addon.js'></script>

I do not know how, or where to use the the $config lines suggested by Adrian, could you help?

Now "it works but" it is not nice, buttons are very large and calendar is transparent!!! I suppose I am missing a css?

There is something missing!!

[vgraveto]

I can see all the page bellow the datapicker, and I also do no see the slider for changing the time, I only see the text "Time" and "minutes". The buttons Now and Done are also there but very large and overlapping the minutes.

What is missing?

[adrian]

Seems like you are missing this:

/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css

[vgraveto]

Sorry again, but that line is on my previous post, it is the link type:

<link type='text/css' href='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css?v=103'rel='stylesheet' />

Is any thing wrong in this line, I have copied it from the admin page where the datapicker is working.

​Those it exist any css for the datapicker it self ?

[adrian]

Sorry, not sure how I missed that

If you right-click > inspect element on the slider you'll see it is using css from:

/wire/modules/AdminTheme/AdminThemeDefault/styles/main-classic.css

so try including that as well.

EDIT: PS I forgot to welcome you to PW

[vgraveto]

Ok. Now I have this lines in my head section:

        <link type='text/css' href='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css?v=103' rel='stylesheet' />

        <link type='text/css' href='/wire/modules/Inputfield/InputfieldCheckboxes/InputfieldCheckboxes.css?v=100' rel='stylesheet' />

        <link type='text/css' href='/wire/templates-admin/styles/inputfields.css' rel='stylesheet' />

        <link type='text/css' href='/wire/templates-admin/styles/JqueryUI/JqueryUI.css' rel='stylesheet' />

        <link type='text/css' href='/wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.css?v=103' rel='stylesheet' />

        <script type='text/javascript' src='/wire/modules/Jquery/JqueryCore/JqueryCore.js?v=162'></script>

        <script type='text/javascript' src='/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=180'></script>

        <script type='text/javascript' src='/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js?v=103'></script>

        <script type='text/javascript' src='/wire/modules/Inputfield/InputfieldDatetime/jquery-ui-timepicker-addon.js'></script>

 

It is working good, just one last issue: The button that we click to call the datapicker is huge. Any idea which style should I use to change it?

I would also need a code example of how to group two or more Inputfields. I have 5 Inputfields and I need to group them in two groups, one with the first 3 and the other with 2. I am using InputfieldForm and just appending each field to the form:

       $form->append($field);

Is there a way to present the fields in groups?

I am really new to PW but I think it is a very good framework.

Thanks again for your support.

[adrian]

A little self help tip  

Right click on the button and choose Inspect Element and then see what css is applied to the button.

As for grouping inputfields, check out Field type FieldsetOpen:

https://processwire.com/talk/topic/176-fieldsetopen-fieldsettabopen-%E2%80%93-what-is-it/

[vgraveto]

Thanks all for the great help. I have my form up And running.

But I need some more help. How can I add to my InputfieldForm a static field, or better I need to add several static fields to my form that the user can not change but I need to change there values in my php code.

I tried to add a fieldtextType but I got an error message.

Is there a way to use an inputfield and disable it from user input?

[vgraveto]

I also uses with success the inputfieldset to group my fields in the form, but it would be greate to have a code example of how to collapse And expand the fieldset?

[adrian]

You can used a hidden field:

$field = $modules->get("InputfieldHidden");

and set the value to whatever you need and process that with the rest of the form.

As for collapsing fields:

$field->collapsed = Inputfield::collapsedBlank;

and you can use all the options from here:

https://github.com/ryancramerdesign/ProcessWire/blob/03387f8283d518e9cc405eff8f05cd6a5bf77c4c/wire/core/Inputfield.php#L56

[vgraveto]

Thanks Adrian,

Sorry but I did not explain well my need. 

I need some "static" fields in the middle of my form, but I need them to be visible to the enduser. What I need is to disable them form being changed by the user.

The issue is that I would like the form object to render them as it renders the other input fields.

[Soma]

$field->attr("disabled", "disabled");

[vgraveto]

OK. It is working.

One more thing if you can?

When using InputfieldForm is there a easy way to include a "recaptcha" for form validation ?

In other words is there a way to include a generic "echo" ilike:

echo recaptcha_get_html($publickey, $error);

 

in the InputfieldForm render process? 

[adrian]

Please think carefully about using captchas - they are a horrible user experience and not really that great at preventing spam anymore anyways. Consider a honeypot or similar approach instead:

https://processwire.com/talk/topic/2089-create-simple-forms-using-api/?p=41795

https://processwire.com/talk/topic/960-comment-spam-filtering-alternatives/?p=8097

[Soma]

Nope there isn't. These days we don't use captcha's since a long time.

What is there already in InputfieldForm is a CSRF token validation.

For spam prevention we use a honeypot or a reverse honeypot.

[vgraveto]

I want to call a JavaScript function when my field InputfieldRadios changes and I used the line:

$field->attr("onChange","changeParticipants()");

 

where changeParticipants() is my JavaScript function.

 

When rendering the form is not adding the OnChange="changeParticipants()" to the Input field !!

 

What am I doing wrong?

[adrian]

Try some jQuery:

$.("#field_id").change(function() {
   alert("Changed");
});