{"id":19138260,"url":"https://github.com/francescoborzi/ngx-duration-picker","last_synced_at":"2025-04-07T13:08:34.267Z","repository":{"id":33959640,"uuid":"106551851","full_name":"FrancescoBorzi/ngx-duration-picker","owner":"FrancescoBorzi","description":"Angular component for ISO_8601 durations","archived":false,"fork":false,"pushed_at":"2024-10-10T14:45:20.000Z","size":2571,"stargazers_count":27,"open_issues_count":37,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-14T09:05:20.239Z","etag":null,"topics":["angular","component","duration-picker","iso8601"],"latest_commit_sha":null,"homepage":"https://francescoborzi.github.io/ngx-duration-picker/index.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FrancescoBorzi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"www.paypal.me/francesco92dev"}},"created_at":"2017-10-11T12:34:18.000Z","updated_at":"2024-07-18T09:16:16.000Z","dependencies_parsed_at":"2023-12-21T18:30:35.141Z","dependency_job_id":"ee00411a-b41d-49a5-b944-956857fdfb7e","html_url":"https://github.com/FrancescoBorzi/ngx-duration-picker","commit_stats":{"total_commits":384,"total_committers":8,"mean_commits":48.0,"dds":"0.23177083333333337","last_synced_commit":"6dfeadcb2342785303f738c9a55f8ac043657e7c"},"previous_names":["shindarth/ngx-duration-picker"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrancescoBorzi%2Fngx-duration-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrancescoBorzi%2Fngx-duration-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrancescoBorzi%2Fngx-duration-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrancescoBorzi%2Fngx-duration-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FrancescoBorzi","download_url":"https://codeload.github.com/FrancescoBorzi/ngx-duration-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657281,"owners_count":20974345,"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":["angular","component","duration-picker","iso8601"],"created_at":"2024-11-09T06:42:12.878Z","updated_at":"2025-04-07T13:08:34.248Z","avatar_url":"https://github.com/FrancescoBorzi.png","language":"TypeScript","funding_links":["www.paypal.me/francesco92dev","https://www.paypal.com/paypalme/francesco92dev"],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/FrancescoBorzi/ngx-duration-picker.svg?branch=master)](https://travis-ci.org/FrancescoBorzi/ngx-duration-picker)\n[![npm version](https://badge.fury.io/js/ngx-duration-picker.svg)](https://badge.fury.io/js/ngx-duration-picker)\n[![dependencies Status](https://david-dm.org/francescoborzi/ngx-duration-picker/status.svg)](https://david-dm.org/francescoborzi/ngx-duration-picker)\n[![devDependencies Status](https://david-dm.org/francescoborzi/ngx-duration-picker/dev-status.svg)](https://david-dm.org/francescoborzi/ngx-duration-picker?type=dev)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n# ngx-duration-picker \n\n![ngx-duration-picker screenshot](https://i.postimg.cc/fRM3Y0z3/Screenshot_from_2018-09-18_17-01-28.png)\n\nA reusable [Angular](https://angular.io/) duration-picker component that works with [ISO_8601 durations](https://en.wikipedia.org/wiki/ISO_8601#Durations).\n\nRequires [Bootstrap](https://getbootstrap.com/), css only (no Bootstrap JS or jQuery needed).\n\n## Live demo\n\nYou can check a live demo of this library and all its features **[here](https://francescoborzi.github.io/ngx-duration-picker/index.html)**\n\n## Installation\n\n- Run:\n\n`npm install --save ngx-duration-picker`\n\n- Then in your `app.module.ts` add `DurationPickerModule` between your `imports`:\n\n```\n@NgModule({\n  declarations: [...],\n  imports: [\n    DurationPickerModule,\n    ...\n  ],\n  providers: [...],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Usage\n\n```\u003cngx-duration-picker [(value)]=\"myDuration\"\u003e\u003c/ngx-duration-picker\u003e```\n\nwhere **myDuration** will be the variable where the output is stored, you can also pass an initial value.\n\n### Watch for changes\n\nif you need to perform some operations each time the bound variable changes, you can use `(valueChange)`:\n\n```\u003cngx-duration-picker [(value)]=\"myDuration\" (valueChange)=\"doSomeStuff()\"\u003e```\n\n### Passing options\n\nyou can pass specify some options by binding `[options]` to your configuration object:\n\n```\u003cngx-duration-picker [(value)]=\"myDuration\" [options]=\"{ showWeeks: false }\"\u003e```\n\n### Available options\n\n#### zeroValue\nString or Null, default `'PT0S'`.\n\nValue to be used when the duration is 0. Since [the specification](https://en.wikipedia.org/wiki/ISO_8601#Durations) says that `'PT0S'` or `'P0D'` are both valid, you are allowed to change this value. You can also pass just `null`.\n\n#### showNegative\nBoolean, default `false`. Sets up the option for negative and positive durations.\n\n#### showButtons\nBoolean, default `true`. Shows the up and down buttons.\n\n#### showPreview\nBoolean, default `true`. Shows a preview of the value.\n\n#### previewFormat\nString, default `ISO`.\n\nYou can optionally specify a date format using:\n- `{{Y}}` for years\n- `{{M}}` for months\n- `{{W}}` for weeks\n- `{{D}}` for days\n- `{{h}}` for hours\n- `{{m}}` for minutes\n- `{{s}}` for seconds\n\nExample string: `{{h}} hours : {{m}} minutes : {{s}} seconds`\n\n#### customOutputFormat\nString, default `ISO`.\n\nYou can optionally specify:\n- `timestamp` for duration in milliseconds\n- `seconds` for duration in seconds\n- custom string as described in `previewFormat` option\n\nChosen value will be emitted by `customOutput`.\n\n#### showLetters\nBoolean, default `true`. Shows the letters on top (Y, M, W, D, H, M, S)\n\n#### labels\nObject, accepting labels that should be shown above the fields instead of default letters (`showLetters` has to be set to true).\n\nAvailable fields (with default labels):\n- years (`Y`)\n- months (`M`)\n- weeks (`W`)\n- days (`D`)\n- hours (`H`)\n- minutes (`M`)\n- seconds (`S`)\n\nExample object which is overwriting `weeks` and `hours` properties:\n```angular2\n{\n    weeks: 'tyg',\n    hours: 'godz'\n}\n```\n\n#### unitSteps\nObject, accepting numbers representing increment/decrement step size for each unit. Non-positive values will be replaced with default value: 1.\n\nAvailable fields:\n- years\n- months\n- weeks\n- days\n- hours\n- minutes\n- seconds\n\nExample object which is overwriting `weeks` and `hours` properties:\n```angular2\n{\n    weeks: 4,\n    hours: 2\n}\n```\n\n#### showYears\nBoolean, default `true`. Shows the years, when hidden it will be always considered as 0.\n\n#### showMonths\nBoolean, default `true`. Shows the months, when hidden it will be always considered as 0.\n\n#### showWeeks\nBoolean, default `true`. Shows the weeks, when hidden it will be always considered as 0.\n\n#### showDays\nBoolean, default `true`. Shows the days, when hidden it will be always considered as 0.\n\n#### showHours\nBoolean, default `true`. Shows the hours, when hidden it will be always considered as 0.\n\n#### showMinutes\nBoolean, default `true`. Shows the minutes, when hidden it will be always considered as 0.\n\n#### showSeconds\nBoolean, default `true`. Shows the seconds, when hidden it will be always considered as 0.\n\n## Local development\n\n### Run the application\n\n- On one terminal tab run `ng build ngx-duration-picker --watch`. This will build the library sources (`projects/ngx-duration-picker/*`) and watch for changes.\n\n- On another terminal tab run `ng serve` to serve the demo app (`src/*`) and play with it.\n\n### Run the tests\n\n- Unit tests are located in `projects/ngx-duration-picker/src/lib/*.spec.ts` and you can run them using `npm run test:unit`\n- Integration tests are located in `src/app/integration-tests/*.spec.ts` and you can run them using `npm run test:integration`\n\nThe default browser is Chrome.  You can also append `:ci` to run them in Headless mode, and `:ci:firefox` to run them with Firefox.\n\n### Update Demo website (GitHub pages)\n\n- Run `npm run build:demo` and commit the `docs/` directory\n\n\n## Donate\n\nYou can [support me with a donation](https://www.paypal.com/paypalme/francesco92dev).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrancescoborzi%2Fngx-duration-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrancescoborzi%2Fngx-duration-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrancescoborzi%2Fngx-duration-picker/lists"}