rome-angular

:date: AngularJS wrapper for rome, a customizable date (and time) picker, no jQuery

Angular Core Dependency: 1.4.9

Module License: MIT

Added by: Sam Deering

GitHub

Repository

e-krebs/rome-angular

Stats

Stars: 2

Watchers: 2

Forks: 0

Module Description

rome-angular

Build status bitHound Overall Score Bower version

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 :

npm install

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

karma start
gulp test

Build

Install dependencies and run build :

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

guild watch

License

MIT

Module stats last updated: 2016-10-29 03:16:44

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!