Angular 5 DatePicker

Last Updated On Monday 30th May 2022

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 Javascript Date() 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>
	
angular 5 calendar
angular datepicker