Get started with angular-ui-date CDN

MIT licensed

AngularUI-Date: Directive for date-time input in AngularJS.

Tags:
  • AngularJS
  • directive
  • datepicker

Stable version

Copied!

How to start using angular-ui-date CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with angular-ui-date CDN - cdnhub.io</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://cdn.cdnhub.io/angular-ui-date/1.0.1/date.min.js"></script>
  <link rel="stylesheet" href="https://cdn.cdnhub.io/angular-ui-date/1.0.1/date.min.css">
</head>
<body ng-app="myApp">
  <div ng-controller="MyController">
    <label>Choose a date:</label>
    <input type="text" ng-model="selectedDate" datepicker-popup="dd-MM-yyyy" is-open="showCalendar" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
    <button ng-click="openCalendar()">Open Calendar</button>
  </div>

  <script>
    angular.module('myApp', ['angularUtils.directives.datapicker'])
      .controller('MyController', ['$scope', function($scope) {
        $scope.minDate = new Date();
        $scope.maxDate = new Date(2025, 5, 22);
        $scope.dateOptions = {
          formatYear: 'yy',
          startingDay: 1
        };
        $scope.showCalendar = false;
        $scope.openCalendar = function() {
          $scope.showCalendar = true;
        };
      }]);
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions