agranom / ngx-material-timepicker Goto Github PK
View Code? Open in Web Editor NEWMaterial desing timepicker for Angular 6.0+
Home Page: https://agranom.github.io/ngx-material-timepicker/
License: MIT License
Material desing timepicker for Angular 6.0+
Home Page: https://agranom.github.io/ngx-material-timepicker/
License: MIT License
My users expect to be able to edit the time within the input control itself to support full keyboard accessibility without having to enter the timepicker itself. In other components, the timepicker/datepicker either had this functionality natively, usually also only allowing open by provided icon, or was exposed as a service, which allowed for the developer to combine timepicker access with a native component, usually by adding an icon button.
If it's possible, if it needs to be bound to an input, it would help to be able to be combined with input type="time", or to provide a directive that acts as a time mask over a standard input, but neither of these are strictly needed.
It is possible to constrain the picker only in exact minutes (0, 5, 10, 15, 20, and so on...) instead every minute?
Thanks
Timepicker is not able to pick time when I input datetime value.
Now that we have the ability to Edit the time via keyboard, it would be nice to implement these enhancements:
Thanks in advance.
Touch/click time selection does not work on mobile, only works when using a sliding gesture.
Submits form auto on template driven forms. How can I disable it?
Thank you for this nice time picker.
Is there a way to implement full 24 hour format ?
This is almost perfect! But a serious issue I've found is that if you choose a time within range, you can then switch from AM to PM (or vice versa) to take the time out of range.
The simplest way to deal with this might be to disable AM or PM switching when doing so would take whatever time is currently displaying out of range.
When I try to include timepicker to shared.module.ts I get this error:
compiler.js:485 Uncaught Error: Unexpected value '[object Object]' exported by the module 'SharedModule' at syntaxError (compiler.js:485) at eval (compiler.js:15247) at Array.forEach (<anonymous>) at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15245) at CompileMetadataResolver.getNgModuleSummary (compiler.js:15132) at eval (compiler.js:15230) at Array.forEach (<anonymous>) at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15208) at JitCompiler._loadModules (compiler.js:34404) at JitCompiler._compileModuleAndComponents (compiler.js:34365)
There is no problem when I import it to app.module and use in app.component, but this error occurs every time I try to "share" it. Could you please tell me what I'm doing wrong or fix it?
Actually I'm getting a string (9:18) using it with ngModel. It would be great if it could returns a Date object with the time inserted
we need the user to choose only x:00, x:15, x:30, x:45... so 15 min steps kind of.
is it hard to implement?
thanks
Hello,
When the timepicker open, it focus on the minute input directly and the keyboard appears.
The issue is only on iphone/ipad. I test it on https://app.crossbrowsertesting.com(trial version ). for my clients, it's an ipad simulator.
Can you change the focus when the timepicker open please ?
If input tag does not have value set, it will work just fine and selecting clock time sets input tag value to 24 hour format. However if input tag is associated with value for example 13:00, the value gets displayed as 01:00 pm, and selecting clock value set's input values to am/pm (clock is still 24 hours)
I need the input to display nothing when my ngmodel exist but it is empty.
right now the display is 'invalid Date'
can be another parameter to add, doesn't matter how you implement it.
can you do that?
I'm not sure wether this is a bug or what to do about it.
As you can see the complete menu side is not part of the overlayed section as i would wish it to be.
I use the Angular Material Design "<mat-sidenav>", "<mat-sidenav-content>" and etc. The overlay seems to be limited by the "<mat-sidenav-content>" container.
How can this be fixed?
Thank you very much!
support hour:minute:second ?
I am having this issue in angular 6.
ERROR TypeError: this._timepicker.registerInput is not a function
at TimepickerDirective.push../node_modules/ngx-material-timepicker/esm5/ngx-material-timepicker.js.TimepickerDirective.registerTimepicker (ngx-material-timepicker.js:660)
at TimepickerDirective.set [as timepicker] (ngx-material-timepicker.js:555)
at updateProp (core.js:9456)
at checkAndUpdateDirectiveInline (core.js:9207)
at checkAndUpdateNodeInline (core.js:10514)
at checkAndUpdateNode (core.js:10476)
at debugCheckAndUpdateNode (core.js:11109)
at debugCheckDirectivesFn (core.js:11069)
at Object.eval [as updateDirectives] (TriggerNewComponent.html:28)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061)
Hello
I'm using the ngx-material-timepicker with semantic-ui, it seems like the styling is failing. Related image:
https://i.imgur.com/HcYqcpn.png
Is there anyway to disable the top? If so how?
If not, is there anyway to see the right selectors?
Thanks a lot.
When I add ngx-material-timepicker to one of my component, it overrides my entire application font styles to a bolder font.
And I could figure out it is someway related to @import "~@angular/material/prebuilt-themes/indigo-pink.css";
which is a global setting in my styles.scss
My timepicker is in a mat-form-field with <input matInput.....
I get this error when the timepicker pops up
ExpressionChangedAfterItHasBeenChcekedError;
any ideas ?
Thx
Is there any way I can control the pop up of the time picker dialog. It gets pop up every time when I click the input box. I am planning to add an icon beside the input box to show/ hide the dialog. ( just like the basic angular material date picker. https://material.angular.io/components/datepicker/overview)
I wanted to use the component in the version of angular 5, is there documentation for the component for version 1.1.2?
Hey,
can u add to possibility to use the current color theme? I think that would be really nice
See : https://stackblitz.com/edit/angular-nhjmvd
When using Reactive Forms for the inputs:
When I try to bind [format]="24" there is no change and I still get 12h format with AM/PM.
I have an ngfor to display different shecdule event in each day of the week, all the display has the last info inside but when I change one of them the value is save properly in the model.
so it is only at the initialization where the error occur..if I use value instead of ngmodel, the initial value is correct for all input others then the ngmodel one...but I need the 2way binding.
<ng-container class="location-list-item" *ngFor="let schedule of day.schedule">
<div *ngIf="(schedule.time <= 1500)" class="location-list-item">
i'm using angular 6.0.9
I have [value]="myTime" on the input element for the timepicker. However that time is not used for the initial value for the picker. Am I doing it wrong or is something broken?
We found a bug that occurs after you edit a Time, and click Cancel, then Re-Edit the same time again. This is also reproducible on your Demo site.
Steps:
I've installed [email protected]
.
Added:
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
@NgModule({
imports: [
// ...
NgxMaterialTimepickerModule.forRoot()
],
And then added:
<form class="example-form">
<mat-form-field>
<input [ngxTimepicker]="picker">
<ngx-material-timepicker #picker></ngx-material-timepicker>
</mat-form-field>
I get this error in the console upon opening the page where the timepicker would show up:
ERROR TypeError: Object(...) is not a function
at new NgxMaterialTimepickerComponent (ngx-material-timepicker.js:152)
at createClass (core.js:12483)
at createDirectiveInstance (core.js:12326)
at createViewNodes (core.js:13784)
at callViewAction (core.js:14218)
at execComponentViewsAction (core.js:14127)
at createViewNodes (core.js:13812)
at createRootView (core.js:13673)
at callWithDebugContext (core.js:15098)
at Object.debugCreateRootView [as createRootView] (core.js:14381)
ngx-material-timepicker.js:152
refers to this line (this is the compiled version vendor.bundle.js
):
this.subscriptions.push(Object(__WEBPACK_IMPORTED_MODULE_1_rxjs__["merge"])(this.eventService.backdropClick, this.eventService.keydownEvent.pipe(Object(__WEBPACK_IMPORTED_MODULE_4_rxjs_operators__["a" /* filter */])(function (e) { return e.keyCode === ESCAPE && _this.isEsc; })))
.subscribe(function () { return _this.close(); }));
Which was compiled from this: ngx-material-timepicker.component.ts#L60
My theory:
I think the issue may be related to the fact that angular 5.2.11 uses [email protected] and this library and angular@6
uses rxjs@6
. The behaviour of merge
might be different or might be missing completely in the version used by [email protected]
.
Am I using this library correctly? Is angular5 still supported?
After I upgraded to angular 7.0.2 and your package to 2.8.3 on ng build --prod
I get
ERROR in : Template parse errors:
The pipe 'timeFormatter' could not be found (" <header class="timepicker__header">
<ngx-material-timepicker-dial [format]="format" [ERROR ->][hour]="selectedHour?.time | timeFormatter: timeUnit.HOUR"
"): node_modules/ngx-material-timepicker/ngx-material-timepicker.d.ts.ɵb.html@4:60
The pipe 'timeFormatter' could not be found ("hour]="selectedHour?.time | timeFormatter: timeUnit.HOUR"
[ERROR ->][minute]="selectedMinute?.time | timeFormatter: timeUnit.MINUTE"
"): node_modules/ngx-material-timepicker/ngx-material-timepicker.d.ts.ɵb.html@5:42
Is there any easy fix for it?
please include the possibility of using all colors of angular material.
thank you.
Could you please tell me how can I set the theme color from (sky blue) #00bfff to a custom color.
Thank you in advance!
Some of our clients have requested the ability to click on the actual numbers that display the Time and directly edit them via keyboard (so they don't have to move the clock hands).
Would this be possible to add as an optional feature?
Thanks for your consideration.
Is there a way to define min and max for timepicker?
<mat-form-field>
<input matInput name="interview_time" [(ngModel)]="input.interview_time" placeholder="Time" [ngxTimepicker]="interview_time" [format]="24">
<ngx-material-timepicker #interview_time></ngx-material-timepicker>
</mat-form-field>
Setting 11:30 PM using the timepicker UI would set the value of the <input>
to 23:30
on the UI.
Setting 11:30 PM using the timepicker UI sets the value of the <input>
to 11:30
on the UI. It simply removes the "am/pm" part, making it impossible for the user to tell the difference between them afterwards.
It correctly sets the ngModel to string 11:30 PM
in both cases.
It seems if one define more than one ngx-material-timepicker, it shows what i set last for both the controls. Below is the HTML i am using, can you help?
<input matInput placeholder="Start Time" [ngxTimepicker]="startpicker" value={{startTime}}>
<ngx-material-timepicker id="myone" #startpicker></ngx-material-timepicker>
</mat-form-field>
</div>
<br>
<div style="flex: 1">
<mat-form-field fxFlexFill>
<input matInput placeholder="End Time" [ngxTimepicker]="endpicker" value="{{endTime}}" >
<ngx-material-timepicker id="mytwo" #endpicker></ngx-material-timepicker>
</mat-form-field>
</div>
</div>
Hi ,
Am working on angular cli side this is my code
<input class="page-preferences__form__input" [ngxTimepicker]="picker1" matInput name="From" [(ngModel)]="formData.contact_until" readonly placeholder="Until">
<ngx-material-timepicker #picker1>
Am getting error first time click. Second time click its working properly. If u remove ngModel working proper.
ERROR
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.
Stack trace:
viewDebugError@http://**.com:4200/vendor.js:63366:15
Hi,
When 'format' is set to 24 and we click on 12h, the value is 00h.
We're using ngx-material-timepicker in our project and came across an issue in range time selection.
Here is input element for time-picker.
<input matInput type="text" [ngClass]="{'time myInput': true, smallFont: popupView}" formControlName="time" [ngxTimepicker]="picker" placeholder="Add time" min="09:00 am" max="03:00 pm" readonly>
<ngx-material-timepicker [ngClass]="{'timePicker': true}" (timeSet)="onTimeSet($event)" #picker></ngx-material-timepicker>
Expected:
It should allow to select anytime between 09:00 am to 03:00 pm.
Problem:
12:00 pm to 12:59 pm can't be selected. Event though it lies within the above range.
Two screenshots are attached to support above argument.
Thanks in advance for any help!
I am integrating the component in my application.
I have added a button that opens the popup and I want that when clicking on the input it does not open the popup but it allows to add the hour with keyboard.
I have tried to stop the propagation of the click event but it does not work. Any suggestions?
CampaignComponent.html:160 ERROR TypeError: Object(...) is not a function
at new NgxMaterialTimepickerComponent (ngx-material-timepicker.js:152)
use https://stackblitz.com/edit/angular-e2b8fw?file=src%2Fapp%2Fapp.component.html
put in html... [value]="'00:15 AM'" it display 00:15..thats perfect but when you click on it to change it...boum it crash...
preview-fe7237b13d780dbf847da.js:1 ERROR TypeError: Cannot read property 'time' of undefined
at NgxMaterialTimepickerFaceComponent.setClockHandPosition (ngx-material-timepicker-face.component.ts:157)
at NgxMaterialTimepickerFaceComponent.ngOnChanges (ngx-material-timepicker-face.component.ts:95)
at checkAndUpdateDirectiveInline (provider.ts:201)
at checkAndUpdateNodeInline (view.ts:429)
at checkAndUpdateNode (view.ts:389)
at debugCheckAndUpdateNode (services.ts:429)
at debugCheckDirectivesFn (services.ts:390)
at Object.eval [as updateDirectives] (VM1711 NgxMaterialTimepicker24HoursFaceComponent.ngfactory.js:54)
at Object.debugUpdateDirectives [as updateDirectives] (services.ts:384)
at checkAndUpdateView (view.ts:359)
ERROR in node_modules/ngx-material-timepicker/src/app/material-timepicker/ngx-material-timepicker.component.d.ts(4,10): error TS2305: Module '"%mypath%/node_modules/rxjs/Observable"' has no exported member 'Observable'. node_modules/ngx-material-timepicker/src/app/material-timepicker/services/ngx-material-timepicker-event.service.d.ts(1,10): error TS2305: Module '"%mypath%node_modules/rxjs/Subject"' has no exported member 'Subject'. node_modules/ngx-material-timepicker/src/app/material-timepicker/services/ngx-material-timepicker-event.service.d.ts(2,10): error TS2305: Module '"%mypath%/node_modules/rxjs/Observable"' has no exported member 'Observable'. node_modules/ngx-material-timepicker/src/app/material-timepicker/services/ngx-material-timepicker.service.d.ts(2,10): error TS2305: Module '"%mypath%node_modules/rxjs/Observable"' has no exported member 'Observable'. node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
After installing I got this error.
What would be the best way to change de styles, colors, etc. of the component?
I've tried to redefine
.timepicker__header {
background-color: #212529 !important;
}
without success.
Any clues?
Thanks
master
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
semantic-release cannot push the version tag to the branch master
on remote Git repository.
Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.
Good luck with your project ✨
Your semantic-release bot 📦🚀
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.