Angular 5 DatePicker
Angular DatePicker is an angularjs directive that generates a datepicker calendar on your input element.
To use the directive, include the Angular Datepicker's javascript and css files in your web page.
<!DOCTYPE HTML> <html> <head> <link href="src/css/angular-datepicker.css" rel="stylesheet" type="text/css" /> </head> <body ng-app="app"> //..... <script src="src/js/angular-datepicker.js"></script> </body> </html>
You Can install using
npm
or
bower
Using npm
npm install angularjs-datepicker --save
Using bower
bower install angularjs-datepicker --save
Then load the
js
files in your html.
Add the datepicker module dependency.
angular.module('app', [ '720kb.datepicker' ]);
Call the directive wherever you want in your html page
<datepicker> <input ng-model="date" type="text"/> </datepicker>
-
ng-model
will show a JavascriptDate()
Object inside your input.
You can set the titles for the month and year selectors with the
date-year-title=""
and
date-month-title=""
<datepicker date-month-title="selected year"> <input ng-model="date"/> </datepicker> <datepicker date-year-title="selected title"> <input ng-model="date"/> </datepicker>
You can also set the titles for the left and right arrows with
button-next-title=""
for the right and
button-prev-title=""
for the left. By default they are labeled
next
and
prev
.
<datepicker button-prev-title="previous month"> <input ng-model="date"/> </datepicker> <datepicker button-next-title="next month"> <input ng-model="date" type="text"/> </datepicker>