{"id":21177428,"url":"https://github.com/betsol/ng-time-counter","last_synced_at":"2026-03-06T18:03:55.171Z","repository":{"id":58219038,"uuid":"54479965","full_name":"betsol/ng-time-counter","owner":"betsol","description":"Minimalistic time-counter for Angular.js","archived":false,"fork":false,"pushed_at":"2016-03-30T23:55:29.000Z","size":1072,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-10T00:38:35.963Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/betsol.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-22T14:06:00.000Z","updated_at":"2019-07-16T09:46:06.000Z","dependencies_parsed_at":"2022-08-31T00:20:32.381Z","dependency_job_id":null,"html_url":"https://github.com/betsol/ng-time-counter","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/betsol/ng-time-counter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fng-time-counter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fng-time-counter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fng-time-counter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fng-time-counter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/betsol","download_url":"https://codeload.github.com/betsol/ng-time-counter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fng-time-counter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265575495,"owners_count":23790778,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T17:16:01.977Z","updated_at":"2026-03-06T18:03:50.137Z","avatar_url":"https://github.com/betsol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# betsol-ng-time-counter\n\n[![Bower version](https://badge.fury.io/bo/betsol-ng-time-counter.svg)](http://badge.fury.io/bo/betsol-ng-time-counter)\n[![npm version](https://badge.fury.io/js/betsol-ng-time-counter.svg)](http://badge.fury.io/js/betsol-ng-time-counter)\n\n\nA very minimalistic time-counter directive for Angular.js (`^1.2.29`).\n\nIt will do it's work and will not stand in your way!\n\n\u003e —» [DEMO][demo] «—\n\n\n## Features\n\n- Can be used as a countdown timer as well as forward-counting one\n- It transcludes a part of your own HTML, so the view could be fully customized\n- Update interval is configurable\n- It doesn't contain any national strings, so you could fully internationalize it,\n  using approach, selected in your own application\n- Finish callback for countdown timers is available\n- Target date and counting direction could be changed dynamically,\n  the component will update itself accordingly\n\n\n## Installation\n\n### Install library with *npm*\n\n`npm i -S betsol-ng-time-counter`\n\n\n### Install library with *Bower*\n\n`bower install --save betsol-ng-time-counter`\n\n\n### Add library to your page\n\n``` html\n\u003cscript src=\"/node_modules/betsol-ng-time-counter/dist/betsol-ng-time-counter.js\"\u003e\u003c/script\u003e\n```\n\nYou should use minified version (`betsol-ng-time-counter.min.js`) in production.\n\n\n### Add dependency in your application's module definition\n\n``` javascript\nvar application = angular.module('application', [\n  // ...\n  'betsol.timeCounter'\n]);\n```\n\n\n## Usage\n\nAdd `bs-time-counter` directive to one of your container elements.\n\nProvide reference to a `Date` object instance using `date` attribute of the same element.\n\nOptionally, provide the counting direction using `direction` attribute, which could be set to either `up` or `down`.\nSkip this attribute to use auto-detection mechanism, i.e. future date will make the timer a countdown one,\nwhile past date will make it a forward-counting one.\n\nUse scope properties from [this table](#exposed-scope-properties) to display time unit values inside of your container.\n\n\n### Example\n\n```html\n\u003cdiv ng-controller=\"MyCtrl as vm\"\u003e\n    \u003cul bs-time-counter date=\"vm.futureDate\" direction=\"'down'\"\u003e\n        \u003cli\u003e{{ hours }} hours\u003c/li\u003e\n        \u003cli\u003e{{ minutes }} minutes\u003c/li\u003e\n        \u003cli\u003e{{ seconds }} seconds\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n```js\nangular\n  .module('application', [\n    'betsol.timeCounter'\n  ])\n  .controller('MyCtrl', function () {\n    var vm = this;\n    vm.futureDate = new Date('2026-08-16T06:17:00');\n  })\n;\n```\n\nPlease see [the demo][demo] for more examples and features.\n\n\n## API\n\n### Directive options\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eOption\u003c/th\u003e\n        \u003cth\u003eDynamic\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edate\u003c/td\u003e\n        \u003ctd\u003eYes\u003c/td\u003e\n        \u003ctd\u003e\n            Current date\n        \u003c/td\u003e\n        \u003ctd\u003e\n            A reference to the \u003ccode\u003eDate\u003c/code\u003e object instance, current date is used when skipped.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edirection\u003c/td\u003e\n        \u003ctd\u003eYes\u003c/td\u003e\n        \u003ctd\u003e\n            Auto-detect\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Counter direction, either \u003ccode\u003eup\u003c/code\u003e or \u003ccode\u003edown\u003c/code\u003e. Will be inferred from the date if not set.\n            Please see the \u003ca href=\"#usage\"\u003eusage\u003c/a\u003e section.\n            If you want to pass it as a string in your template, make sure to surround it with single quotes.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003einterval\u003c/td\u003e\n        \u003ctd\u003eNo\u003c/td\u003e\n        \u003ctd\u003e\n            One second\n        \u003c/td\u003e\n        \u003ctd\u003eHow often to update the counter? In milliseconds.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonFinish\u003c/td\u003e\n        \u003ctd\u003eYes\u003c/td\u003e\n        \u003ctd\u003e\n            Do nothing\n        \u003c/td\u003e\n        \u003ctd\u003eAn expression that will be evaluated when the countdown timer reaches zero.\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e Dynamic properties are watched by the directive, therefore the directive\n\u003e will update itself when their value will change.\n\n\u003e If you want to pass a constant directly to a dynamic property from the template\n\u003e you will have to surround the value in single quotes.\n\n\n### Exposed scope properties\n\n| Scope Property | Description\n| -------------- | -----------------------------------\n| years          | Time unit value for *years*\n| months         | Time unit value for *months*\n| days           | Time unit value for *days*\n| hours          | Time unit value for *hours*\n| minutes        | Time unit value for *minutes*\n| seconds        | Time unit value for *seconds*\n| milliseconds   | Time unit value for *milliseconds*\n\n\n## FAQ\n\n### How do I add leading zeroes to time unit values?\n\nYou could easily write your own filter for this or use some third-party module.\n\n```html\n\u003cul bs-time-counter date=\"vm.someDate\"\u003e\n    \u003c!-- Just apply your filter to a time unit scope property --\u003e\n    \u003cli\u003e{{ hours|addLeadingZeroes }} hours\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nPlease see [this question](http://stackoverflow.com/q/17648014/1056679) on Stack Overflow\nabout padding filters.\n\n\n### How do I pluralize/localize time unit labels?\n\nThis module doesn't provide any national strings for time unit labels, so you could use\nyour own labels with pluralization and internationalization, it's totally up to you!\n\n\u003e @todo: provide an example\n\n\n### Why «X» feature is not provided?\n\nWe've specifically tried to make this module as minimalistic as possible.\nIt will do it's work and will not stand in your way!\n\nHowever, if you think some feature DOES belong to this module,\nplease [create an issue][new-issue] for this. We will look into it.\n\n\n## Changelog\n\nPlease see the [changelog][changelog] for list of changes.\n\n\n## Feedback\n\nIf you have found a bug or have another issue with the library —\nplease [create an issue][new-issue].\n\nIf you have a question regarding the library or it's integration with your project —\nconsider asking a question at [StackOverflow][so-ask] and sending me a\nlink via [E-Mail][email]. I will be glad to help.\n\nHave any ideas or propositions? Feel free to contact me by [E-Mail][email].\n\nCheers!\n\n\n## Developer guide\n\nFork, clone, create a feature branch, implement your feature, cover it with tests, commit, create a PR.\n\nRun:\n\n- `npm i` to initialize the project\n- `gulp build` to re-build the dist files\n- `gulp test` or `karma start` to test the code\n\nDo not add dist files to the PR itself.\nWe will re-compile the module manually each time before releasing.\n\n\n## Support\n\nIf you like this library consider to add star on [GitHub repository][repo-gh].\n\nThank you!\n\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2016 Slava Fomin II, BETTER SOLUTIONS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n  [changelog]: changelog.md\n  [so-ask]:    http://stackoverflow.com/questions/ask?tags=angularjs,javascript\n  [email]:     mailto:s.fomin@betsol.ru\n  [new-issue]: https://github.com/betsol/ng-time-counter/issues/new\n  [gulp]:      http://gulpjs.com/\n  [repo-gh]:   https://github.com/betsol/ng-time-counter\n  [demo]:      http://betsol.github.io/ng-time-counter/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetsol%2Fng-time-counter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetsol%2Fng-time-counter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetsol%2Fng-time-counter/lists"}