Skip to content

NEXOES/angular-datetime-picker

This branch is 4 commits ahead of, 4 commits behind sidaudhi/angular-circular-timepicker:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2aedd22 · May 25, 2016

History

21 Commits
May 25, 2016
May 16, 2016
Feb 5, 2016
Feb 3, 2016
Feb 3, 2016
Feb 5, 2016
Feb 5, 2016
May 16, 2016
Feb 5, 2016
May 16, 2016

Repository files navigation

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.js'])

Apply the directive to your form elements:

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

About

AngularJS datetime picker element directive with a circular interface for time

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 71.1%
  • JavaScript 28.9%