Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
AngularJS date-range-picker gives an error
-
I just started trying out the new AngularJS libraries and so far it looks extremely satisfying. However, I ran into a problem when trying to copy an example code that had a date-range-picker that uses a preset. I copied the page template first, and had the example code inside of it. I only have css associated with page template, although they aren't working right now, but that shouldn't cause any problems related to the angular code.
Here is the error message that chrome gives:
And here is the code I copied:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Angular Material Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/resources/angular-csp.css"></link> <link rel="stylesheet" href="../vendor/angular-material/angular-material.css"> <link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css"> </head> <body layout="column"> <div ng-if="appLoading"> <span>App is loading..</span> </div> <div ng-cloak layout="column" flex> <!-- Your content here --> </div> <script src="/resources/require.js"></script> <script src="/resources/loaderConfig.js"></script> <script type="text/javascript">require(['mango-3.0/bootstrap']);</script> <div layout="row"> <md-input-container class="no-errors-spacer"> <label>Preset</label> <ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="5 seconds"></ma-date-range-picker> </md-input-container> <md-input-container class="no-errors-spacer"> <label>From date</label> <ma-date-picker ng-model="from"></ma-date-picker> </md-input-container> <md-input-container class="no-errors-spacer"> <label>To date</label> <ma-date-picker ng-model="to"></ma-date-picker> </md-input-container> </div> <p>Alternatively use the date and time pickers individually</p> <div layout="row"> <mdp-date-picker mdp-placeholder="From date" mdp-open-on-click="" mdp-format="ll" ng-model="from" class="no-errors-spacer"></mdp-date-picker> <mdp-time-picker mdp-placeholder="From time" mdp-open-on-click="" mdp-auto-switch="true" ng-model="from" mdp-format="LTS" class="no-errors-spacer"></mdp-time-picker> </div> <div layout="row"> <mdp-date-picker mdp-placeholder="To date" mdp-open-on-click="" mdp-format="ll" ng-model="to" class="no-errors-spacer"></mdp-date-picker> <mdp-time-picker mdp-placeholder="To time" mdp-open-on-click="" mdp-auto-switch="true" ng-model="to" mdp-format="LTS" class="no-errors-spacer"></mdp-time-picker> </div> <p> You have chosen a date range of {{ from | moment:'format':'ll LTS' }} to {{ to | moment:'format':'ll LTS' }}. </p> </body> </html> -
Hello Nyoa,
I see a few problems to talk about but first let me get an understanding of where this code lives. Are you just playing the in the play area or are you attempting to create a dashboard outside of the play area in your file system?
Thanks,
-
This code is in my filesystem, outside play area
-
As Woody said, I see a couple problems, one of which is your <script> tags should be moved down to right before your closing </body> tags. This is generally best practice on most html pages. The real issue is that the page template you started with isn't quite ready. We will be releasing an updated dashboard module that will have working page templates in a day or so.
You might be able to get it to work by trying this page template code but I am not sure if it will work without the module update.
<!DOCTYPE html> <html lang="en" ma-app="maMaterialDashboards"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Angular Material Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/resources/angular-csp.css"></link> <link rel="stylesheet" href="../vendor/angular-material/angular-material.css"> <link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="../vendor/mdPickers/mdPickers.css"> </head> <body layout="column"> <div ng-if="appLoading"> <span>App is loading..</span> </div> <div ng-cloak layout="column" flex> <!-- Your content here --> <h1>Demo Angular Materialz</h1> <div layout="row"> <md-card flex="50"> <div layout="row"> <md-input-container class="no-errors-spacer"> <label>Preset</label> <ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="5 seconds"></ma-date-range-picker> </md-input-container> <md-input-container class="no-errors-spacer"> <label>From date</label> <ma-date-picker ng-model="from"></ma-date-picker> </md-input-container> <md-input-container class="no-errors-spacer"> <label>To date</label> <ma-date-picker ng-model="to"></ma-date-picker> </md-input-container> </div> <p>Alternatively use the date and time pickers individually</p> <div layout="row"> <mdp-date-picker mdp-placeholder="From date" mdp-open-on-click="" mdp-format="ll" ng-model="from" class="no-errors-spacer"></mdp-date-picker> <mdp-time-picker mdp-placeholder="From time" mdp-open-on-click="" mdp-auto-switch="true" ng-model="from" mdp-format="LTS" class="no-errors-spacer"></mdp-time-picker> </div> <div layout="row"> <mdp-date-picker mdp-placeholder="To date" mdp-open-on-click="" mdp-format="ll" ng-model="to" class="no-errors-spacer"></mdp-date-picker> <mdp-time-picker mdp-placeholder="To time" mdp-open-on-click="" mdp-auto-switch="true" ng-model="to" mdp-format="LTS" class="no-errors-spacer"></mdp-time-picker> </div> <p> You have chosen a date range of {{ from | moment:'format':'ll LTS' }} to {{ to | moment:'format':'ll LTS' }}. </p> </md-card> <md-card flex="50"> <md-card-title> <md-card-title-text> Your card 2 </md-card-title-text> </md-card-title> <md-card-content layout="column"> Card content </md-card-content> </md-card> </div> </div> <script src="/resources/require.js"></script> <script src="/resources/loaderConfig.js"></script> <script src="../js/loaderConfig.js"></script> <script type="text/javascript">require(['mango-3.0/bootstrap']);</script> </body> </html> -
Thank you. Since the code in the example above this post didn't work I'll just need to wait for the update that is coming today or tomorrow to be able to use an available template easily? I'm a bit curious, what would be required to make things work like they are working in the example page?
-
Yes the update should be coming out in the next day or so, just needs some internal testing. The reason things are not working in a standalone dashboard page is the JS dependencies are not linked up properly. This will be resolved with the new page templates in the coming release.
In the mean time you should be able to play around and combine components within the demo area panes of the examples dashboard.
-
Hey nyoa the error you posted was actually a bug which was only being triggered when angular-material wasn't loaded. If you update to 3.0.1 and use ma-app="maMaterialDashboards" on your HTML element as Will suggested you shouldn't have a problem. I've fixed the bug for 3.0.2.
-
Thank you a lot, everything is running just like it should right now! It's a good thing you are able to fix these hiccups fast.
