Problems copying date picker to another page

StevenM · May 24, 2020, 8:24am

Wappler Version : 3.0
Operating System : mac Catalina 10.15.4

Expected behavior

Using the text filed as custom date time in php vs node js.

In php it shows as below and is expected.

Actual behavior

In node.js verison

non of the date fields appear to work other than the simple “Date” field.

Nothing happens

How to reproduce

Code for field in php works but not in node.js

<div class="form-group col-6">
	<label for="date2">Your text</label>
	<input id="date2" class="form-control" type="text" is="dmx-date-picker" format="DD/MM/YYYY hh:mm a">
	<small id="date2_Help" class="form-text text-muted">Enter your large text here.</small>
</div>

Or Use:

   <div class="form-group col-6">
<label for="date2">Your text</label>
<input id="date2" class="form-control" type="datetime-local" is="dmx-date-picker" format="DD/MM/YYYY hh:mm a">
<small id="date2_Help" class="form-text text-muted">Enter your large text here.</small>
	</div>

Teodor · May 24, 2020, 9:18am

Are there any errors in your browser dev tools?

StevenM · May 24, 2020, 10:10pm

HI @Teodor No there is nothing seems to just fail silently, same page in php is working just fine.

Only the following: Unknown component found! date-picker

Simple date field “date” is the only one working in node.js

Teodor · May 25, 2020, 8:29am

@StevenM
I just tested this on a NodeJS project page. The date picker component works as expected.
How are you adding it on the page or are you copy-pasting its code from another project?

If you se

Unknown component found! date-picker

probably its js includes which are automatically added when you click the Make date picker button are missing.

StevenM · May 25, 2020, 8:48am

OK

Double checked this:

created a project node.
Added a page
Added a form
Added a form group text input
made it local date time

Doesn’t work kills the Wappler design view and in browser throws an error.

Teodor · May 25, 2020, 8:50am

Can you post the form / input code here, please?

Also what do you mean by made it local date time? Is it the date picker component you are referring to?

StevenM · May 25, 2020, 8:59am

The code below for the test page I just set up.

    <!doctype html>
    <html>

    <head>
    	<base href="/">
    	<script src="dmxAppConnect/dmxAppConnect.js"></script>
    	<meta charset="UTF-8">
    	<title>Untitled Document</title>
    	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
    	<link rel="stylesheet" href="fontawesome5/css/all.min.css" />
    	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    	<link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
    	<link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
    	<script src="dmxAppConnect/dmxDatePicker/daterangepicker.min.js"></script>
    	<link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
    	<script src="dmxAppConnect/dmxDatePicker/dmxDatePicker.js"></script>

    </head>

    <body is="dmx-app" id="">
    	<div class="row">
    		<div class="col">
    			<form id="form1">
    				<div class="form-row"></div>
    				<div class="form-group">
    					<label for="input1">Some text</label>
    					<input type="datetime-local" class="form-control" id="input1" name="input1" aria-describedby="input1_help" placeholder="Enter some text" is="dmx-date-picker">
    					<small id="input1_help" class="form-text text-muted">Your input is very valuable.</small>
    				</div>
    			</form>
    		</div>
    	</div>
    	<script src="bootstrap/4/js/popper.min.js"></script>
    	<script src="bootstrap/4/js/bootstrap.min.js"></script>
    </body>

    </html>

StevenM · May 25, 2020, 9:00am

Date time

StevenM · May 25, 2020, 9:02am

I just closed down wappler started it up again and now it works

Teodor · May 25, 2020, 9:03am

Just tested your page and it seems to work perfectly fine on my node server:

Also … when using the date picker component, just use a text input type not date/datetime-local

StevenM · May 25, 2020, 9:09am

Yes I tried just text input but did not work.

I have alarge form I built on apage and it does not work, even when I remove the field and start again

Teodor · May 25, 2020, 9:10am

Is this the page giving you the error in the browser console? IF yes, please provide the code here so i can check it.

StevenM · May 25, 2020, 9:11am

On my large form I get this error.

But on a blank page with nothing else it works

Unknown component found! date-picker 2 [BaseComponent.js:292](http://localhost:3000/dmxAppConnect/maps/core/BaseComponent.js)

Source map error: Error: request failed with status 404 Resource URL: http://localhost:3000/bootstrap/4/css/bootstrap.min.css Source Map URL: bootstrap.min.css.map

Teodor · May 25, 2020, 9:13am

As i explained above, most probably the js include is missing from your page head tags.
Can you provide a link to the page or paste the code here?

StevenM · May 25, 2020, 9:25am

OK, based on that I fixed the big form by adding a new text field and turned that text input into date picker using the right controls in the properties area and it loaded the correct header references.

So what I can tell is that you can not add in the code manually into the editor you have to use the right controls to make sure that it adds in the correct references in the header.

You can not copy and paste either as it will not pick up that you have a date and time picker in it.

StevenM · May 25, 2020, 9:26am

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.

Teodor · May 25, 2020, 9:27am

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

StevenM · May 25, 2020, 9:34am

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