Rim Bejaoui Rim Bejaoui - 2 months ago 37
AngularJS Question

How to add a datepicker in ionic angularjs?

I installed

ionic-datepicker
using bower with this command:

bower install ionic-datepicker --save


After I put the path of
ionic-datepicker.bundle.min.js
in my
index.html
file:

<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>


In my application module I injected the dependency ionic-datepicker in order to work with the
ionic-timepicker
.

angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
//
}


Now I am receiving this error :

!JavaScript ERROR: Error: [$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module ionic-datepicker due to:
[$injector:nomod] Module 'ionic-datepicker' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.25/$injector/nomod?p0=ionic-datepicker
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=ionic-datepicker&p1=%5B%24injector%3Anomod%5D%20Module%20'ionic-datepicker'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3Dionic-datepicker
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=starter&p1=%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20ionic-datepicker%20due%20to%3A%0A%5B%24injector%3Anomod%5D%20Module%20'ionic-datepicker'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3Dionic-datepicker%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3Dionic-datepicker%26p1%3D%255B%2524injector%253Anomod%255D%2520Module%2520'ionic-datepicker'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttp%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%253Fp0%253Dionic-datepicker on line 11532 for http://localhost:40820/lib/ionic/js/ionic.bundle.js


ionic-datepicker.bundle.min.js:
enter image description here

my index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above -->
<link href="css/ionic.app.css" rel="stylesheet">


<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/ngStorage.min.js"></script>


<!--your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>

<script src="js/Controllers/inscription.js"></script>
<script src="js/Controllers/Categories.js"></script>
<script src="js/Controllers/SousCategories.js"></script>
<script src="js/Controllers/Evenement.js"></script>
<script src="js/Controllers/RechercheEvent.js"></script>

<script src="js/service/services.js"></script>

</head>

Answer

Just uninstall ionic datepicker and install again.