It does seem that it does not always add in the correct headers and even setting up a test form the first time I added it it did not work and I got the error.
I am adding the form element by using the right app structure and right clicking and then adding the form and its elements.
Well yes, exactly. That is why we always advise to use the UI to add components. This way all the required files are being created and added.
Copy-pasting random parts of one page to other pages can cause lots of troubles 
Perhaps there needs to be a warning if a date and time element is added to the page to let the user know that they need to make it a date and time using the properties menu.
Because if you do copy an element and put it in the page you look at the properties and it shows it as being a date and time and even in the Design view it shows you the date and time as working, but then when you open it up in a browser it does not work.
For all intensive purposes it looks like all is in order when you look at it.
This for example is the one which does not work but looking at it in editor all is working
And the properties
This is all well and good, but if you look at above a no coder such as myself will make this error and go around in circles!
I am sorry i don’t understand you.
Do you want to use the Date Picker component or the standard HTML datetime input type?
If you want to use the Date Picker component then that’s already explained in the docs …
Then why would you deal with code editing if you are a no coder?
I really can’t understand your point and what component are you trying to use.
Ok you are missing the point completely!
I am not trying get help for the element (I now know what the issue is) I am explaining there is an issue and why I added this in “Bugs”
OK let em try again - here is the use case:
User like me who has little knowledge of html comes along and does the following.
FOR EXAMPLE this image is from a form which has a date picker in it which will not work in a web page because the headers were not inserted by Wappler because I used the above use case.
It is simple to say don’t cut and paste etc etc, but you are a experienced coder and a lot of us are not and a lot more people copy and paste simple html to recreate forms.
I am not creating this situation because I like causing pain and torturing myself 
My point:
There needs to be an error check for the user to indicate that an element is being used on the page does not have the correct headers in it or on save the page needs to detect the use of the element - such as the form date picker - and insert the correct headers. Otherwise the user - like me- does not know why it is to working because it appears to be working in the wappler :Design" view as the above picture shows.
It also appears as if it is correct in the properties view if you use the above use case - as I indicated in my earlier comment.
This is a standard HTML datetime input, not the Date Picker component available in Wappler.
The standard HTML datetime input does not require any additional js files included … as the Date Picker component does, so you can copy and paste it across your pages.
Your issue is with the Date Picker component! I think you are confusing both.
When the Date Picker component is used, the input type should not be date/datetime but just simple text!
And yes you can’t just copy and paste App Connect components (like Date Picker component) from one page to another. And that is why in all the docs its explained how to add them in the App Structure using the UI, where they are supposed to be added from.
Oh my!!
Yes yes I know it is text, I worked that out after watching tutorials but it does not change the use case and the error. It is not inserting the headers!
What I am telling you is that is irrelevant to the use case, absolutely no relevance what so ever!
Just do this:
Create a new page
Save the page
Go do code view and paste this in it.
Save.
<div class="form-group col-6">
<label for="date1" id="titlestartdate">Start date and time</label>
<input class="form-control" id="startdate" name="start-date" aria-describedby="input2_help" placeholder="Enter some text" is="dmx-date-picker">
<small id="date1_Help" class="form-text text-muted">Specify the start and time for this board to auto start</small>
</div>
Then look at it in the proprieties window, scroll down what do you see.
You see that is shows it as a date picker with “text”, but it does not work!
why? well because it was simple copy and paste.
Is there an indication it is not correct - well no, because it looks like it should work - why well look at the use case.
Please tell me you understand 
Yes, i understand you and i’ll repeat myself:
Copying and pasting components like this across the pages:
<input class="form-control" id="startdate" name="start-date" aria-describedby="input2_help" placeholder="Enter some text" is="dmx-date-picker">
is wrong and this should never be done. You should never copy App Connect components code across pages
And that is in no way a bug. Components are only supposed to be added through the UI in the App Structure.
Do you see anything wrong with this?
Well no you don’t it looks like a date and time picker has been inserted so I happily go along building the rest of the form.
Then can’t work out why its not working, because the properties tab say yep all is good!
But it is not and there should be user feedback that it is not correct.
People will cut and paste!
Ok I see I am wasting my time explaining why this is not good UI.
For all you no code or basic HTML newbies who come across this post here is the work around for this use case
You maybe looking at why some form elements are not working, first check that you are not copying and pasting form elements across a page. The properties tab may indicate a form element is working as expected and you may even see it work in the designer. As the use case with the date picker in this thread.
If, as in my example, you find you build a large form and have copied some of the elements form other pages and do not now know how to get things working again it is likley that the correct headers have not been included in the new page.
In this example: I have a date picker in a large form not working because I copied and pasted the code form another page and Wappler can not detect form elements that require dependencies.
This is the fix.
The headers should now be correctly updated and the form elements should be working.
you see the properties of the component because the UI “sees” the component code on the page:
is="dmx-date-picker"
There are cases where the js include is not on the same page, such as SSI or content pages. You need to be able to modify the component properties without having the js include on the page - because it is added on the main page. That’s why the UI shows the properties… i wouldn’t call this not good UI. It would have been worse if you were not able to see and edit its properties in content pages and in SSI files.
And it’s actually really easy to debug user errors like the one we are discussing here by looking at the browser console or looking at the Wappler errors reported at the bottom of the Design/Code view:
So what you are saying that it is my fault and not the UI that it did not have the intelligence to work out the proprieties window was telling me everything is all OK. Because that is what you are saying, you are defending the system rather that listening to what your no programmer customers are saying.
There was no warning errors not even an alert - nothing! And the below on a date field that does not work, but sure, I hear you loud and clear!
Steven, i am sorry if you feel like i am blaming you about the way our software works - that is not my intention. We are here to help … and i am only trying to explain you where the problem comes from.
I am also trying to explain you where and how to check for errors when something doesn’t work for some reason.
When something “doesn’t work” “doesn’t render in design view” “doesn’t show in the browser” or problems similar to these, before posting a bug report you can easily check:
If 1 fails for any reason, you can also check
2. Your browser console:
These 2 debug options are usually more than enough for us to identify the problem and usually they will show the same error message
Want be posting anymore bug reports, or providing anymore feedback, but thanks for pointing out the obvious!
Anyone stumbling on this and wondering why they don’t see any warnings on the editor as described here you will find that when the “app connect mode” is off error messages like the one described above does not show. So you may be stumbling around wondering what is going on.
To show the errors for example “Unknown component found!” in plain English means that the required links in the top of the page that reference the files have an issue - I have provided a work around as the marked “Solution” for those who may choose to copy and paste code.
You may not pick up the message should you have the app connect off. This will look like this in the top right of your screen.
Turn on the lightening bolt which will essentially connect the server components with your view.
Actually your struggle Steven, brought me to a new idea that I haven’t thought before
So this will be definitely a good improvement
Yes… Yes… absolutely!!! 
Hey,
I was running into this error message as well.
However, in my case it was using NodeJS. All the header code that normally gets added to a page was getting added to the layout file which I did not save.
Upon saving the layout file, the required components were included.
EDIT
The page was loading blank with a console error regarding the date picker. So I went into the layout file and added MomentJS. All works now.
