Angular Clock
show digital

Angular Clock Widget

Responsive, beautiful clocks for AngularJS built using SVG

Code on Github Download (latest)

Getting started

Dependencies

This repository contains native AngularJS directives to render a clock face. The only required dependencies are:

Files to download

The easiest is to download with bower:

bower install angular-ui-clock --save

Alternatively files can be downloaded downloaded from Github.

Whichever method you choose the good news is that the overall size is very small: <4kb for all directives (~1kb with gzip compression!)

Installation

<script src="bower_components/dist/angular-clock.js"></script>

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ds.clock module: 

angular.module('myModule', ['ds.clock']);

CSS

You need to include a link to the css file in your page.

<link rel="stylesheet" href="bower_components/dist/angular-clock.css">

If you need the default digital clock font Syncopate, include this. Else check styling section to use your own font

<link href="//fonts.googleapis.com/css?family=Syncopate:400,700" rel="stylesheet" type="text/css">

Options

There are several options that you can set as attributes on the directive element(can use other angular flavors like data-*, ng-attr-*, x-* also)

  1. start-time : init clock with specific time in milliseconds, (default: undefined)
  2. digital-format : digital clock format in angular date filter format (default: 'HH-mm-ss'). Pass as string enclosed in single quote or bound to a scope variable
  3. gmt-offset : shows time for the given GMT offset in clock, (default: false, shows local time) example: India -> 5.30, Singapore -> 8 , venezula -> -4.30, Nepal -> 5.45
  4. show-digital: shows digital clock, (default: true if both show-analog &show-digital are not set)
  5. show-analog : shows analog clock, (default: true if both show-analog &show-digital are not set)
  6. show-gmt-info : shows GMT offset value, (default: false) shows only if gmt-offset attribute is set
  7. theme : analog clockface theme, (default: light)

All clocks are responsive and reactive and will update automatically when data changes. start-time, digital-format, and gmt-offset are bound attributes and hence need to be set in the scope or using gmt-offset="'5.3'" format with extra single quotes.

show-digital, show-analog and theme can be used as bound attributes or as normal attributes

Directives

Default Clock
<ds-widget-clock></ds-widget-clock>
 
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

});
Clock with Start Time
<ds-widget-clock start-time="startTimeValue"></ds-widget-clock>
 
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {
        $scope.startTimeValue = 1430990693334;

});
Clock with Timezone Offset
<ds-widget-clock gmt-offset="gmtValue" show-gmt-info></ds-widget-clock>
 
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {
        $scope.gmtValue = 5.3;
});
Clock with AM/PM in Dark theme
<ds-widget-clock theme="dark" digital-format="'hh:mm:ss a'"></ds-widget-clock>
or 
<ds-widget-clock theme="theme" digital-format="'hh:mm:ss a'"></ds-widget-clock>
 
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

        $scope.theme = 'dark';

});
Digital clocks

<ds-widget-clock data-show-digital digital-format="'HH:mm'"></ds-widget-clock>
<hr>
<ds-widget-clock data-show-digital></ds-widget-clock>
<hr>
<ds-widget-clock show-digital digital-format="'hh:mm:ss a'">></ds-widget-clock>
<hr>
<ds-widget-clock show-digital digital-format="'hh:mm:ss a'"> gmt-offset="5.3" show-gmt-info></ds-widget-clock>
<hr>
<ds-widget-clock show-digital digital-format="format">></ds-widget-clock>
<hr>
<ds-widget-clock show-digital digital-format="'EEEE MMMM d,yyyy hh:mm:ss a Z'">></ds-widget-clock>

angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {
        $scope.format = 'dd-MMM-yyyy hh:mm:ss a';
});
Analog clock
<ds-widget-clock show-analog></ds-widget-clock>
 
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

});

Styling

All clock styles can be overridden using CSS, additional themes can be easily defined and applied using the theme attribute. Inspect the generated html for more advance css styling

Custom Analog Clock Theme

<!-- Theme blue-light is defined is css -->
<ds-widget-clock show-analog theme="blue-light"></ds-widget-clock>
 

.widget-clock.blue-light .clock-face {
  stroke: #153b6f;
  fill: #0e2434;
}
.widget-clock.blue-light .minor {
  stroke: #0089ff;
  stroke-width: 0.5;
}
.widget-clock.blue-light .major {
  stroke: rgba(119, 176, 242, 0.97);
  stroke-width: 0.5;
}
.widget-clock.blue-light .hour {
  stroke: rgba(119, 176, 242, 0.97);
  stroke-width: 1;
}
.widget-clock.blue-light .minute {
  stroke: #0089ff;
  stroke-width: 0.75;
}
.widget-clock.blue-light .second,
.widget-clock.blue-light .second-counterweight {
  stroke: rgb(234, 31, 54);
  stroke-width: 0.5;
}
.widget-clock.blue-light .second-counterweight {
  stroke-width: 1.5;
}
              
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

});
Custom Digital Clock Theme

<!-- Theme blue-light is defined is css -->
<ds-widget-clock show-digital theme="blue-light" digital-format="'hh:mm:ss a'"></ds-widget-clock>
 

@import url('http://fonts.googleapis.com/css?family=Rationale');
/* this import should be first line in css file else add as <link> in html*/
.widget-clock.blue-light .digital {
  text-align: center;
}
.widget-clock.blue-light .time {
  font-family: 'Rationale', sans-serif;
  font-size: 3.0em;
  color: #1da4eb;
}
              
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

});