owsolutions / amazing-time-picker Goto Github PK
View Code? Open in Web Editor NEWTimepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material
Timepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material
it woul be so powerfull to disable range of times
Hi, nice timepicker. I would wondering how to implements the interface IDisplayPreference in the open method to set labels titles. In the doc i can't find one clear explanation.
export interface IDisplayPreference {
minute?: Function;
hour?: Function;
separator?: string;
labels?: {
ok?: string;
cancel?: string;
};
period?(period: 'AM' | 'PM');
clockMinute?(minute: any);
clockHour?(hour: any);
}
Is there an option of displaying the timepicker inline
Is it possible to have let's say an inner circle that displays another set of 12 hours instead of using AM and PM, so a 24 hour system like for example: 13 - 24 inside a inner circle?
I'd very much like my users to use a 24 hour system instead of AM and PM
Implement limited time selection
I need to set the time picker format (12 or 24 hour format) using a configuration. Is there any option available?
Hi there, could you explain how this package is supposed to work with angular 2.X please? Looking through the package.json file you have only ever depended on angular version 4.2.4 and above...?
Is there any solution to remove the cancel button from the time picker is yes please share the information.
Thanks in advance.
how to fetch time from the input field and show in the time picker, if the time is already exist in the input field. I am using form control and here is my code snippet:
<ion-input atp-time-picker formControlName="delivery_date" (click)="open()">
Let's say for example that I'm going to use this in conjunction with some other functionality in my code.
Can I somehow programatically add a title to the window?
For example, I have a calendar in which I want to set a start and end time of an activity, can I programatically show the window saying start time and end time so that the user knows what kind of time he/she is setting?
Also, is angular material a required dependency that I need to install in order to get this time picker to work? I'd like to keep my project small by not having to add extra frameworks that I'm barely going to use...
Hi,
Nice work on the timepicker.
Is support for Angular 5.2+ currently in the works? At the moment I get an error when compiling:
webpack: Compiled with warnings.
webpack: Compiling...
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/amazing-time-picker/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
How to set required validation in Timepicker because I have tried but It didn't work. I have show you my code. If you any changes required on my code then you may let me know
** HTML Code **
<input type="text" atp-time-picker placeholder="Time" formControlName="time" readonly required/>
<mat-icon matSuffix><i class="material-icons" (click)="openTimePicker()">query_builder</i></mat-icon>
** Validation Code **
<div *ngIf="formControlName.hasError('required') && formControlName.untouched">Error msg</div>
** Typescript Code **
openTimePicker() {
const amazingTimePicker = this.atp.open({
theme: 'material-blue',
});
amazingTimePicker.afterClose().subscribe(time => {
this.selectedTime = time;
});
}
I want to be able to restrict my users to only select hour and not selecting the minute.
I want the result of the dialog be a time HH:MM format.
One of our users would like to automatically transition to minutes after the hour has been selected.
I tried just
<input type="time" atp-time-picker value="19:00" />
but the popup wasn't displaying. When i tried to implement the button/service to open the popup, I got the following message.
ERROR in ./node_modules/amazing-time-picker/amazing-time-picker.es5.js
Module not found: Error: Can't resolve 'rxjs/Subject' in 'C:\devl\js\xxxxx-dashboard\node_modules\amazing-time-picker'
Angular 6
Node 8.9
package.json
{
"name": "xxxxxxx-dashboard",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^6.0.1",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.0.1",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"amazing-time-picker": "^1.5.3",
"aws-sdk": "^2.235.1",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.0",
"@angular/cli": "~6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.9.5",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
Hi, my app uses the order 'OK' and 'Cancel' left to right. ATP uses 'Cancel', 'OK'. Is it possible for me to swap the order of the buttons?
Thanks
I want to have a material theme as well as dark
and light
We need to use circleci to build the project and make sure commit changes are not breaking anything.
I need to close the time picker once the input that uses it loses focus.
I haven't found a way to do it yet.
Have you found a solution?
Thanks in advance
When i'm use time picker in boostrap modal, it appear under the modal box.
How can i bring it in front of dialog ?
Hi,
I installed version 1.5.3 via npm and realized that the TimePickerConfig interface does not have the animation option. So the version installed via npm is different from the version found in github.
Is this really a problem? or was another form of animation adopted?
thank you.
Show current time button in active mode
Upon trying to load the demo page in IE11, you'd get the following error message:
SCRIPT438: Object doesn't support property or method 'assign'
You could easily polyfill Object.assign to fix this with something like this
Thanks for the excellent time picker.
We have some users with low resolution monitor, so the buttons are not visible for them. We would like to have the option to drag the picker so the user could see the buttons.
Or if you have any other sugestion for our problem, we would be very grateful.
Not sure if this is even possible but currently this is not working due to breaking changes Angular 6 brought in. Trying to use amazing-time-picker
will throw:
ERROR in ./node_modules/amazing-time-picker/amazing-time-picker.es5.js
Module not found: Error: Can't resolve 'rxjs/Subject' in '/media/Data/workspace/mobile/node_modules/amazing-time-picker'
I am installing it for angular6, there was a failure on compilation
ERROR in ./node_modules/amazing-time-picker/amazing-time-picker.es5.js
Module not found: Error: Can't resolve 'rxjs/Subject' in '/home/administrator/ang_flask/angular6/hrt.v6/hrt-mat/node_modules/amazing-time-picker'
To solve it change in:
node_modules/amazing-time-picker/amazing-time-picker.es5.js
import { Subject as Subject$1 } from 'rxjs/Subject' (doesn't compile)
import { Subject as Subject$1 } from 'rxjs' (does compile)
-Still I haven't use it in the component to test it fully.
Is there a plan to add 15-minute (or other) increments feature so it only allows to select time in quarter hours?
As per the lack of time picker in angular/material i decided to use this library, however i just notice that validations are not being trigger in the input
how to reproduce it?
using angular material (matInput) add the required validator to a formControl, then clean the input field (deal with the modal). As you may notice the required error is never triggered, if it help you i'm using a custom validator to check the min time
After following the instructions from the REAME you ge this error
ERROR Error: StaticInjectorError[ViewContainerRef]:
StaticInjectorError[ViewContainerRef]:
NullInjectorError: No provider for ViewContainerRef!
Here's a minimal reproduction:
https://stackblitz.com/edit/angular-gitter-q8vmmw?file=app%2Fapp.component.html
I set the flag changeToMinutes="true" and it works perfect, but I think it could be more smoothly, because it jumps hard after I've chosen an hour. Please have a look at the android time picker when you set a clock for yourself. There you can see, how smooth it switches to the minutes.
Cheers
Chris
Currently, I have to select hour then click to minutes then select minutes.
Is it possible to automatically switch to minutes after selected hour?
Is there any way to enable the mouse wheel scroll on input to change the values without having to interact with the keyboard as well as opening the clock?
Webpack does not allow app to be compiled stating
Can't resolve 'rxjs/Subject'
I had to change in /node_modules/amazing-time-picker.js
import { Subject as Subject$1 } from 'rxjs/Subject';
with
import { Subject as Subject$1 } from 'rxjs';
When I want to run this project, since we are using >=2.0.0 in packages, it will break.
Active class not taken after id="time-picker-wrapper" in angular 5
In the function CalcDegrees, line 103-105:
if (degMod === 0) {
return;
}
You should instead return degrees here, otherwise we get an undefined return value.
Is there any way to override or extend internationalization for the component?
Regards,
Can you give 24 format time selection instead of select AM and PM
I used time-picker inside Reactive form control ,Issue I faced after changing the time picker view value not updated in component
Would be very nice
Is it possible to position the time picker under the input control rather than central to the screen?
when we select a time with PM e.g 2 PM then it shows 14 instead of 2PM in IE browser.
i am using angular 2
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.