Page goes blank when inserting a Date Picker

aschoijett · December 26, 2019, 12:33am

OS info

Operating System : Windows 10.0.17763
Wappler Version : 2.4.5

Problem description

I think I am hitting a weird situation.
When I insert a date picker in my page, the entire (Design) screen goes blank.
The page in my browser also shows blanks. I also get these two messages:

I think the warning is because I have the notification object in the SSI of the page header. I get it the first time I load a Design page and If I refresh it, the warning goes away. In this case, it does not, and I think it’s because the Error message below.

I ventured into the Code area (not a programmer, thus the word “ventured” truly applies to me) and found several lines at the end of the head area that if I remove, along with the offending date picker in the body area, the problem goes away.

These are the lines in the head area

<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js"></script>

<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css">

    <link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css">

    <script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>

The date picker in my file reads like this:

<input id="date1" name="date1" is="dmx-date-picker">

which looks pretty harmless

There is a big “however”, though.
I created a simple page with just a datepicker. It works flawlessly. The head and the body has basically the same corresponding lines to the ones that break this page.

I tried to upload the page I was working on but the site does not let me upload a php file.

Steps to reproduce

Insert a date picker in my page - I could not reproduce by creating a simple page from scratch.
Watch the problem unravel.

Any guidance will be appreciated.

Many thanks and happy holidays for all!

Alex

aschoijett · December 27, 2019, 2:00pm

OK.
I managed to reproduce the problem with the minimal page below.

<!doctype html>
<html>

<head>
	<base href="/webCases/">
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<script src="../dmxAppConnect/dmxAppConnect.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="../dmxAppConnect/dmxNotifications/dmxNotifications.css">
	<script src="../dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
</head>

<body is="dmx-app" id="test2">
	<div class="container">
		<div class="row">
			<div class="col">
				<form id="form1">
					<input id="text1" name="text1" type="text" class="form-control">
				</form>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

STEPS TO REPRODUCE

In the App Structure, select the input Text 1
Click the button Make Date Range Picker

I think the problem could be linked to the use of Fonts Awesome Pro CDN
My project is configured to create pages loading Fonts Awesome 4.7 CDN
I then replace them manually in the page using the Add Framework button in App Structure.

Hope this bit helps those who know better than me how all these pieces work together.

Alex

aschoijett · December 27, 2019, 2:17pm

Sorry, forgot to add that after the two steps above to reproduce the problem are executed, the code looks like this:

<!doctype html>
<html>

<head>
	<base href="/webCases/">
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<script src="../dmxAppConnect/dmxAppConnect.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="../dmxAppConnect/dmxNotifications/dmxNotifications.css">
	<script src="../dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css">
<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css">
<script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
</head>

<body is="dmx-app" id="test2">
	<div class="container">
		<div class="row">
			<div class="col">
				<form id="form1">
					<input id="text1" name="text1" type="text" class="form-control" is="dmx-date-range-picker">
				</form>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

The last step adds lines 16-20 and modifies line 28. The last thing I before the page goes blank is a success notification that the moment 2.22.2 library has been added.

The problem also happens

with FA 4.7 CDN, i.e. without doing the font replacement mentioned in my previous post.
if I insert a Date Range Picker instead of converting a text input to a range date picker.

Please let me know if I’m doing something wrong or if you need me to do something else. I would really appreciate the help!

Alex

aschoijett · December 27, 2019, 2:31pm

Hi,
I think I found exactly when this bug occurs and a also what looks like a workaround for it.
This is what I observed:

The problem occurs when you insert a date range picker in a form or convert a text input in a form into a date range picker
The problem does not occur if you insert a date range picker before the form (did not try inserting after a form)
Once a date picker is inserted outside the form, you can insert a date picker inside and the problem does not occur. This will be my workaround in the meantime.

The reasons why all this happens are beyond me (or the time I have to look into it) but I trust the findings may help quash this one.

Alex

PS: This may explain why I could not reproduce it initially. In all likelihood I did not have the date picker inside a form.

George · December 27, 2019, 3:37pm

Thanks for the extensive report. We will investigate

George · December 27, 2019, 3:37pm

aschoijett · January 1, 2020, 12:03am

Much appreciated.
While you guys are at it, can you please look into why the style of the date picker element looks so different from the style of other form elements? It makes it look odd in a form that uses Select and an Input elements.

For example:

Its size is fixed, i.e. it does not expand to occupy the width of the column, like a Select or Input.
Its border is of a different colour.
Its border is not rounded
Its background colour is different when disabled.

I imagine that there might be ways for a user to make a Date Picker element look like the others but, needless to say, I have no idea of how to make that happen on my own.

Many thanks!

Alex

PS: The Input element defined as a “date” does not have those problems, but it does not have the functionality offered by the Date Picker that I need.

Teodor · January 1, 2020, 10:14am

Hello,
When you convert a bootstrap 4 text field to a date picker, then it has the same style as all the other form inputs on your page.

aschoijett · January 1, 2020, 10:28pm

Thank you Teodor.
I also found today that if I add the statement
class=“form control”

to the Date Picker in a form, then it blends in great, and expands to the size of the column.

Is doing that OK too?

Alex

web-works · January 4, 2020, 10:41am

Thought I did something wrong. Luckily not. I run into the same problem.

webmaster · July 18, 2020, 8:32pm

Hey Everyone,

I am also facing the same issue. Page is going blank after inserting Moment.js date picker to it.
I am using Node.js with latest version of Wappler, and I am receiving the following errors on the console :

I have tried using the workaround mentioned above by @aschoijett but it didn’t work for me. As soon as I have a datepicker on my page no matter where I have it (inside/or out of a form) the page breaks, and doesn’t show anything.

Was this issue fixed, am I missing anything that I should do to get it working?

George · July 19, 2020, 7:12am

Just make sure you save the page and refresh the design view first.

webmaster · July 19, 2020, 8:21am

Got it working now. For some reason I didn’t have moment.js framework added to the template I am using on the content page. I think I removed it by mistake after working on it, or Wappler didn’t added it to the template page from the start.

Teodor · July 19, 2020, 8:21am

Teodor · July 19, 2020, 8:21am