owsolutions / amazing-time-picker Goto Github PK

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;
    });
  }

@yinyanlv @torabian Please help me guys

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.

Hi.
Great repo! Thanks

Size is too big for android. We cannot reach/click on the buttons. We cannot scroll the dialog.

Thanks

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.

When choosing a single digit value on the clock, the digital clock display for the time-picker-minute isn't showing a leading zero. Example: 6:03 looks like 6:3

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

I'm getting extra popup in edge browser.
Working fine with other browsers.

Angular 5.2
Microsoft Edge 38.14393.2068.0

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