AngularJS datetime picker element directive with a circular interface for time
Switch branches/tags
Nothing to show
Clone or download
sidaudhi Updated readme.md
Corrected module name for reference
Latest commit 158228d Jun 8, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Added fixes for landscape orientation Jun 5, 2016
source Added fixes for landscape orientation Jun 5, 2016
tests v0.1.6 Feb 5, 2016
.gitignore v0.1.0 Feb 3, 2016
LICENSE Initial commit Feb 3, 2016
README.md Updated readme.md Jun 8, 2016
bower.json v0.1.6 Feb 5, 2016
gulpfile.js v0.1.0 Feb 3, 2016
karma.conf.js v0.1.6 Feb 5, 2016
package.json Added fixes for landscape orientation Jun 5, 2016

README.md

AngularJS Circular Time Picker

Native AngularJS datetime picker element directive with a circular interface for time

Home / demo page

Dependencies

Requires:

  • AngularJS 1.4.x or higher (1.0.x will not work)
  • MomentJS

Usage

We use bower and npm for dependency management, run

bower install --save angular-circular-timepicker
npm install --save angular-circular-timepicker

This will copy the angular-circular-timepicker files into your components folder, along with its dependencies.

Add the css:

bower

<link rel="stylesheet" href="bower_components/angular-circular-timepicker/dist/stylesheets/angular.circular.timepicker.css"/>

npm

<link rel="stylesheet" href="node_modules/angular-circular-timepicker/dist/stylesheets/angular.circular.timepicker.css"/>

Load the script files in your application:

bower

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/angular-circular-timepicker/dist/javascript/angular.circular.timepicker.js"></script>

npm

<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/moment/moment.js"></script>
<script type="text/javascript" src="node_modules/angular-circular-timepicker/dist/javascript/angular.circular.timepicker.js"></script>

Add the date module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['angular.circular.timepicker'])

Apply the directive to your form elements:

<circulartimepicker model="data.date"></circulartimepicker>