Download this file. Extract it’s contents onto your web root folder (or your directory). Open the directory in a web browser and you will see something similar to this.
To use this directive (Angular’s very own HTML 5 web components), you can use the following HTML tag in any forms after initializing the Angular Application.
<body ng-app="bdayApp"> .... <bday-form/> ... </body>
Few browsers do not handle the self closing tags all that well, so using the following syntax might help in that case.
<body ng-app="bdayApp"> .... <bday-form></bday-form> ... </body>
Also make sure you include the following lines anywhere on the page where you want to use the date picker. Note that it is not necessary to include the Javascript files before you use the date tag, it works even if the code is loaded after the contact tag is loaded. Bootstrap 3 is also being used to render the UI, so it has to be included before the tag is placed in the web page.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <script src="Angular/bdayApp.js"></script>
Usage:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body ng-app="bdayApp"> <bday-form/> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <script src="Angular/bdayApp.js"></script> </html>