AngularJS Simple Datepicker Directive Example Tutorial

By Hardik Savani October 20, 2023 Category : Angular

In this example you implement datepicker directive simply. In this example i used ngDatepicker plugin. It is very simple way to use and integrate. It is very flexible you can set format and other option. So If you also want to add datepicker then can do like as bellow example.

In this example i include /css/ngDatepicker.css path on link so you can download css file from here : Click Here and Also i include /js/ngDatepicker.min.js script tag so you can download js file from here : Click Here

Example:

Read Also: How to Render HTML Value in Ng-repeat in AngularJS?
<html lang="en-US">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/ngDatepicker.css">

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js"></script>
<script src="/js/ngDatepicker.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">

  <h2 class="text-center">Angularjs Simple Datepicker directive example code with Demo
</h2>

  <div>
      <ng-datepicker  ng-model="ctrl.date2" view-format="DD-MM-YYYY">
      </ng-datepicker>
  </div>

</div>

<script>
  var app = angular.module('myApp', ['jkuri.datepicker']);
  app.controller('customersCtrl', function($scope, $http) { 
  });
</script>

</body>
</html>

I hope it can help you...

Tags :
Previous

How to Drop Foreign Key Constraint in Laravel Migration?
Next

Laravel - This cache store does not support tagging - Solved

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares