francescoborzi / ngx-duration-picker Goto Github PK
View Code? Open in Web Editor NEWAngular component for ISO_8601 durations
Home Page: https://francescoborzi.github.io/ngx-duration-picker/index.html
License: MIT License
Angular component for ISO_8601 durations
Home Page: https://francescoborzi.github.io/ngx-duration-picker/index.html
License: MIT License
Is it possible to disable the control? We have an issue that only an user with a special role is able to change the duration. So, if the user does not have the right permission it must be possible to make the control readonly.
One solution is to render only a Tag when the permission is not give but maybe it can although be possible to disable the control.
Actually is not handled in get valueInSeconds()
function.
Currently there is option to show letters above unit controls but it would be nice to be able to put there some custom labels.
I'll work on that later.
It would be nice to allow negative timeshift. At leaste the ISO8601 allows a negative notation.
I understand that current format is a default, ISO-consistent format, but it would be nice to have possibility to pass some text (probably translatable) as preview, so it can show labels like
5 hours 0 minutes 15 seconds
Thanks for that lib, regards!
It want to be able to set the duration to 0 (PT0S)
I set all values in the widget to 0.
Expected behaviour: Value is set to PT0S or PT0D...
Current behavior: Value is set to null.
ngx-duration-picker version: 3.3.1
ERROR in node_modules/ngx-duration-picker/lib/duration-picker.component.d.ts:60:21 - error TS2694: Namespace '"/home/chris/Desktop/current/Clients/WebUI9/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
I usually see this type of error because of a package version mismatch with the Angular version. But I can't seem to find the correct version for ngx-duration-picker
Here I attached the code snippets of project, I am using only minutes in my project. I want to set max value of the picker to be 999 and min value to 0.
@FrancescoBorzi can you help to guide how can I set this?
<ngx-duration-picker [(value)]="timeToHome" [options]="durationPickerOptions" required></ngx-duration-picker>
durationPickerOptions : any = {
showPreview: false,
showNegative: false,
showLetters: false,
showYears: false,
showMonths: false,
showWeeks: false,
showDays: false,
showHours: false,
showSeconds: false,
};
The widgets currently allow entering chars as input. According to the input widget this doesn't make sense and seems to result in a null value for the duration.
Maybe it is possible to restrict the user input to numbers to increase the user experience.
Hi,
I just tried this component in my project but when I try it I get the following error:
ERROR Error: StaticInjectorError(MystaffAppModule)[NgIf -> ViewContainerRef]:
StaticInjectorError(Platform: core)[NgIf -> ViewContainerRef]:
NullInjectorError: No provider for ViewContainerRef!
Apprently the error is here:
<tr *ngIf="config.showLetters"> <<===== Error
<td *ngIf="config.showNegative"></td>
<td *ngIf="config.showYears">Y</td>
<td *ngIf="config.showMonths">M</td>
<td *ngIf="config.showWeeks">W</td>
<td *ngIf="config.showDays">D</td>
<td *ngIf="config.showHours">H</td>
<td *ngIf="config.showMinutes">M</td>
<td *ngIf="config.showSeconds">S</td>
</tr>
The package has successfully installed and is perfectly running but when i try to add previewFormat
in the options i get below error
core.js:4197 ERROR Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
- JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
- Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
- Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at getCompilerFacade (core.js:562)
at Function.get (core.js:26205)
at getComponentDef (core.js:1826)
at extractDirectiveDef (core.js:1650)
at Array.map ()
at def.directiveDefs (core.js:1633)
at createTView (core.js:7406)
at getOrCreateTComponentView (core.js:7355)
at createRootComponentView (core.js:13413)
at ComponentFactory$1.create (core.js:22149)
My Code looks like below
<ngx-duration-picker
formControlName="period"
[options]="{ previewFormat: '{{ H }}', customOutputFormat: 'H', showMonths: false, showSeconds: false, showYears: false, showWeeks: false }"></ngx-duration-picker>
We store durations on our APIs in terms of seconds/minutes/etc and not ISO durations. It would be nice if the component would allow something like "seconds in, seconds out". Example:
<app-duration-picker [(ngModel)]="durationInSeconds" type="seconds/ISO/minutes/etc"></app-duration-picker>
Also, it would be nice to change the prefix of this project from app-duration-picker
to something like ngx-duration-picker
to avoid confusion with first and third party components.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | tslint |
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@angular/animations
, @angular/common
, @angular/compiler
, @angular/compiler-cli
, @angular/forms
, @angular/language-service
, @angular/platform-browser
, @angular/platform-browser-dynamic
, @angular/router
, zone.js
)@angular-devkit/build-angular
, @angular-devkit/core
, @angular/cli
)@angular/animations
, @angular/common
, @angular/compiler
, @angular/compiler-cli
, @angular/forms
, @angular/language-service
, @angular/platform-browser
, @angular/platform-browser-dynamic
, @angular/router
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.github/workflows/main.yml
actions/checkout v2
actions/setup-node v2
actions/cache v2
nick-invision/retry v2
nick-invision/retry v2
nick-invision/retry v2
nick-invision/retry v2
package.json
@angular/animations 12.2.11
@angular/common 12.2.11
@angular/compiler 12.2.11
@angular/core 12.2.11
@angular/forms 12.2.11
@angular/platform-browser 12.2.11
@angular/platform-browser-dynamic 12.2.11
@angular/router 12.2.11
rxjs 6.6.7
tslib 2.3.1
zone.js 0.11.4
@angular-devkit/build-angular 12.2.18
@angular-devkit/core 12.2.18
@angular/cli 12.2.18
@angular/compiler-cli 12.2.11
@angular/language-service 12.2.11
@types/jasmine 3.10.1
@types/jasminewd2 2.0.10
@types/node 14.18.48
bootstrap 4.6.2
codelyzer 6.0.2
jasmine-core 3.10.1
jasmine-spec-reporter 7.0.0
karma 6.3.6
karma-chrome-launcher 3.1.0
karma-coverage-istanbul-reporter 3.0.3
karma-firefox-launcher 2.1.1
karma-jasmine 4.0.1
karma-jasmine-html-reporter 1.7.0
ng-packagr 12.2.4
ts-node 10.4.0
tslint 6.1.3
typescript 4.3.5
projects/ngx-duration-picker/package.json
tslib 2.3.1
@angular/common *
@angular/core *
It would be nice to provide the component with step value on each time unit increment / decrement.
For example, in options, pass:
options = {
...,
hourStep: 10,
minuteStep: 5,
...
}
So, when the user click on Up / Down arrows,
update the time unit value according to time step value
Could you please add LICENSE file? I can see here that license is MIT, but such a file is sometimes needed for formal verification of libraries used in project. I can submit PR if you don't have time for that.
Thanks for that lib, regards!
Currently only possible output format is default ISO. It would be nice to be able to configure that and get number or custom string as output.
It can go even further and since duration picker default use is to determine duration of some event / annotation etc. it would be great to pass startTime to ngx-duration-picker and get endTime as Date or moment object.
I'll try to work on that later.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.