From 1b7c7a52a3f99bf5f6cb2ad6831126785b1822ce Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Thu, 27 Jun 2019 11:29:46 +0200 Subject: [PATCH] Updated 023 Adding a custom time field (markdown) --- 023-Adding-a-custom-time-field.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/023-Adding-a-custom-time-field.md b/023-Adding-a-custom-time-field.md index 43b4b7e..cf12dea 100644 --- a/023-Adding-a-custom-time-field.md +++ b/023-Adding-a-custom-time-field.md @@ -24,15 +24,12 @@ When 'new' in Component Builder Fields is clicked, 'New Fields' will be opened, ### Time-Date(Custom Component) -So a field had been created that makes it possible to still do that. For example: If 'Events' is opened on the Registry Dashboard there is a function where dates may be set. [00:06:58](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) In there a date can be selected and the time adjusted and then 'Done' should be clicked. [00:07:26](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m26s) With that selection the field is updated . If that is the kind of field that you're looking for, The implementation is quite different when this kind of field is used(See video). For example: If 'Fields' is opened and 'text' is selected in the 'Type' column and a hint is added. (You could pause the video and look at the field XML.) [00:08:08](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) Since this field is used in a repeatable field, the JavaScript is quite different because you have been working with a repeatable field where you could add as many fields as you liked but wanted the date field to be active on everyone of those and you could not really target a repeatable field simply by adding some JavaScript in the area unless that field's ID was known. [00:08:41](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m41s) Instead of doing it in here(See video) Javascript is actually added which is needed to make this field work into the repeatable fields structure.<<<<<<<<<<<<<<<<< - - - - +So a field had been created that makes it possible to still do that. For example: If 'Events' is opened on the Registry Dashboard there is a function where dates may be set. [00:06:58](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) In there a date can be selected and the time adjusted and then 'Done' should be clicked. [00:07:26](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m26s) With that selection the field is updated . If that is the kind of field that you're looking for, The implementation is quite different when this kind of field is used(See video). For example: If 'Fields' is opened and 'text' is selected in the 'Type' column and a hint is added. (You could pause the video and look at the field XML.) [00:08:08](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) Since this field is used in a repeatable field, the JavaScript is quite different because you have been working with a repeatable field where you could add as many fields as you liked but wanted the date field to be active on everyone of those and you could not really target a repeatable field simply by adding some JavaScript in the area unless that field's ID was known. [00:08:41](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m41s) Instead of doing it in here(See video) Javascript is actually added which is needed to make this field work into the repeatable fields structure. ### JavaScript Repeatable Field Time-Date _Important_ -It's event dates, one of those values there(1196) is the id of that date field that I did I just showed you. In scripts (you can pause the video and exactly look what I did there). [00:09:24](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) I'm basically including some styles as well as some JavaScript. I have a loop which loops 50 times. Because I'm only allowing, if you are looking at the repeatable field, I'm only allowing 50 fields to be added. In the loop I'm targeting through the dynamic [00:09:52](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) php. I'm targeting each of those fields. At the moment there's a row added. I'm checking whether that row exists, if it does I'm simply using the jQuery DateTimepicker, which is actually brought to the page by the script here. It has some options which is tweakable, and that's it. [00:10:19](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) That's how I add that kind of date selecting picker method in a repeatable field. I will hold it a bit there you could pause the video, jottle that down if you want and scroll down. This is actually the end of the code that is the start. [00:10:43](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m43s) +If Field(See video) is opened, select 'Event Dates', then one of those values (in the XML Field Definition) '1196', is the ID of that date field. (You can pause the video and follow what is done there). + [00:09:24](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) In 'Scripts' some styles is included as well as some JavaScript. There is a loop which loops 50 times. Looking at the Repeatable Field, it may be seen that only 50 fields are allowed to be added in the loop which is targeted through the dynamic PHP. [00:09:52](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) Each of that fields is targeted. At the moment there is a row added. Check whether that row exists, if it does simply use the 'jQuery DateTimepicker', which is actually brought to the page by the script. It has some options which is tweakable. [00:10:19](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) That's how that kind of date selecting picker method is added in a Repeatable Field. [00:10:43](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m43s) <<<<<<<<<<<<<<<<< ### Multiple Date Fields