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.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Date picker is not working -need help


  • I am using mango 3.1.1 and angularjs 1.6.4.I'm creating custom pages under which i am not able to select Dates from DatePicker.I am getting error regarding date format.;I have attached screenshot for the same.Please let me know if anyone has some idea about it.!
    0_1503544733211_Screen Shot 2017-08-24 at 8.45.13 AM.png
    0_1503544748546_Screen Shot 2017-08-24 at 8.45.00 AM.png


  • @ganeshvarahade Have you tried clearing the cache? (or switch to the network tab of dev tools and select "disable cache").

    You haven't overridden any files?

    Can you share the content of your custom page so I can see how you are using the date pickers?


  • Hello, Jared, I have tried your solutions but it's not working. I have attached index.html and my date picker code. Please let me know what I need to change.```
    Index.html
    //your code here

    <html lang="en" class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!-- Rename adminTemplate to the name of the folder you create in overrides -->
        <base href="/user-ui/dcim-new/">
    
        <link rel="icon" type="image/png" sizes="192x192" href="../img/icon192.png">
        <link rel="icon" type="image/png" sizes="128x128" href="../img/icon128.png">
        <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="../img/icon128.png">
        <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="../img/icon128.png">
        <link rel="manifest" href="manifest.json">
    
        <link rel="stylesheet" href="/modules/mangoUI/web/vendor/angular/angular-csp.css"></link>
        <link rel="stylesheet" href="/modules/mangoUI/web/vendor/angular-material/angular-material.css">
        <link rel="stylesheet" href="/modules/mangoUI/web/vendor/angular-loading-bar/loading-bar.css">
        <link rel="stylesheet" href="/modules/mangoUI/web/vendor/material-design-icons/iconfont/material-icons.css">
        <link rel="stylesheet" href="/modules/mangoUI/web/vendor/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="/modules/mangoUI/web/vendor/mdPickers/mdPickers.css">
        <link rel="stylesheet" href="/modules/mangoUI/web/vendor/angular-material-data-table/md-data-table.css">
        <link rel="stylesheet" href="styles/main.css">
        <style>
    .dashboard-footer{z-index: 99; border: 0 none;}
    md-card.md-default-theme, md-card{color: #fff;}
    md-card.md-default-theme, md-card{background:rgba(80, 80, 80, 0.25);}
        </style>
    </head>
    
    <body layout="column" ng-class="{'api-down': !mangoWatchdog.apiUp, 'logged-out': !mangoWatchdog.loggedIn}">
    	<div ng-if="appLoading" class="app-loading">
    		<i class="fa fa-cog fa-spin"></i>
    	</div>
    
        <div ui-view ng-cloak layout="column" flex class="main-application"></div>
        <script src="/modules/mangoUI/web/vendor/requirejs/require.js"></script>
        <script src="/modules/mangoUI/web/loaderConfig.js"></script>
        <!-- Rename adminTemplate to the name of the folder you create in overrides -->
        <script>require(['mangoUIModule/dcim-new/app']);</script>
    </body>```
    <html>
    

    date picker code

     <md-card>
                <md-card-content>
                    <div layout="row">
                      <md-input-container flex style="margin-top: 0px;">
                            <label style="color:#fff;bottom: 77%;font-size: larger;">Preset</label>
                            <ma-date-range-picker style="color:#fff" from="from" to="to" preset="LAST_1_DAYS" update-interval="5 seconds" ></ma-date-range-picker>
                        </md-input-container>
                        <md-input-container flex>
                            <label style="color:#fff">From date</label>
                            <ma-date-picker style="color:#fff" ng-model="from" ng-click="showPicker($event)"></ma-date-picker>
                        </md-input-container>
                        <md-input-container flex>
                            <label style="color:#fff">To date</label>
                            <ma-date-picker style="color:#fff" ng-model="to"></ma-date-picker>
                        </md-input-container>
                    </div>
    
                </md-card-content>
            </md-card>
    

  • @ganeshvarahade good catch, it's a problem with the mdPickers library and AngularJS 1.6.x. I had enabled a workaround in the main UI app.js but didn't add it to the adminTemplate.

    You will need to edit your app.js, find the line $compileProvider.debugInfoEnabled(false); and add this line before or after it - $compileProvider.preAssignBindingsEnabled(true);