rome-angular

rome-angular is a simple yet powerfull angular directive for rome.

rome is a customizable date (and time) picker, no jQuery !

Demo

Live demo here http://e-krebs.github.io/rome-angular/

Install

From bower

bower install --save rome-angular

Setup

Both minified and non-minified version are provided.

Rome having a dependency on moment, you can use your own distribution of moment, using rome.standelone.js

	<script type="text/javascript" src="moment.min.js"></script>
	<script type="text/javascript" src="rome.standalone.min.js"></script>
	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript" src="rome-angular.min.js"></script>

Or you can use the bundled rome.js distribution, which comes with moment in it.

	<script type="text/javascript" src="rome.min.js"></script>
	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript" src="rome-angular.min.js"></script>

If you need to do anything regarding internationalization, refer to moment for that. Basically, this will look like :

	<script type="text/javascript" src="moment.min.js"></script>
	<script type="text/javascript" src="moment-locale-fr.js"></script>
	<script type="text/javascript" src="rome.standalone.min.js"></script>
	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript" src="rome-angular.min.js"></script>

Usage

See the example/ folder for a fully functional implementation/demo

Inject it into your angular module, and use it on either a div or a text input :

    <script>
		angular.module('testApp', ['rome-angular'])
            .controller('testController', TestController);
		function TestController() {
			var vm = this;
			vm.mydate = new Date();
		}
    </script>
    <div rome="testCtrl.mydate"></div>
    <input type="text" rome="testCtrl.mydate">

You can provide a function to execute when the underlying value changes :

    <div rome="testCtrl.mydate" rome-change="testCtrl.doSomething()"></div>

rome-angular supports rome options, as defined by rome.

You can specify these options using a configprovider :

    <script>
		angular.module('testApp', ['rome-angular'])
            .config(romeConfig)
            .controller('testController', TestController);
            
		function romeConfig(romeConfigProvider) {
			romeConfigProvider.setDefaults({
				weekStart: 1,
				inputFormat: 'DD/MM/YYYY HH:mm:ss'
			});
		}
    </script>

Or you can sepecify these options on a specific element (they will override the configprovider's options)

    <div rome="testCtrl.mydate" rome-options="{ inputFormat: 'DD-MM-YYYY, HH:mm', weekStart: 0}"></div>

Build and tests

Test

First, install dependencies, then run karma :

yarn // npm install

You can then run test either with karma or through gulp :

karma start

gulp test

Build

Install dependencies and run build :

yarn // npm install
gulp build

Files are output in dist/ :

• rome-angular.js
• rome-angular.min.js
• rome-angular.min.js.map

Gulp watch

A gulp watch task is also available, running both test and build tasks

gulp watch

License

MIT