SPA: Date Range Picker Breaks Show Model Button

Wappler General Bugs
#1

OS info

  • Operating System : Windows 10.0.17763
  • Wappler Version : 2.1.5

Problem description

I have a page with an a table list of database entries with an additional column with an update button.

The update button is set to open the update modal when clicked and retrieve the details of the update form.

The button works as expected and opens the modal with the update form without the date range picker.

When the date range picker is added to a field within the update form, the button no longer functions.

NOTE: The functionality works within Wappler using Preview, but not on a live site.

Code to include the components appear on the parent page

date%20picker1
date picker1.PNG707×129 9.1 KB

Code on the child page includes references to the components on the parent page.

date%20picker2
date picker2.PNG1456×54 6.92 KB

Live server shows component files already uploaded

date%20picker3
date picker3.PNG266×670 8.53 KB

Steps to reproduce

  1. Create an SPA with a routed page.
  2. On the routed page, create a container with a button inside the container.
  3. Create a second container below the first container with a dynamic modal inside it.
  4. Add a form to the dynamic modal with a simple text input.
  5. Add a Dynamic Event to the button in the first container. (Click > Show Modal)
  6. Test. Modal opens as expected.
  7. Open form inside the modal and change text input to a date ranger picker.
  8. Test. Modal no longer opens as expected when clicking on the button.

NOTE: The functionality works within Wappler using Preview, but not on a live site.

#2

Hi, do you see any errors in the browser console? Can you send a link to your page?

#3

This is what I see in the browser console

date%20picker4

#4

Are you sure the moment.js framework is included on yourb page and it is before the date picker js files?

1 Like
#5

@Teodor, no I don’t see any file named moment.js listed anywhere.

What is the path for the file?

#6

I found the path in an older file where I had used the date range picker.

Not sure why it was not added automatically though, but that solved the issue.

#7

It can be added through the frameworks menu :slight_smile:

1 Like