timeless-picker v1.0.65

Timeless Picker

About

Timeless Picker is an out-of-the-box, highly-customizable, infinite wheel (time) picker for Angular applications.

Demo can be found here: insert link

The main goal of this project is to provide a general-purpose infinite-scroll wheel picker (ios-style), with a larger focus on time-pickers. I couldn't find any free infinite-scroll time pickers for Angular, so I decided to create one. And although there already exist general infinite-scroll packages, they however use lazy-loading techniques, which keep dynamically adding new elements to the DOM. This has many possible downsides, among which is decreased performance.

This project, on the other hand, mocks scrolling mathematically and programmatically, without adding any dynamically adding any new elements.

Getting started

Install the package:

npm i --save timeless-picker

And this dependency:

npm i --save hammerjs

You may have to also install the following (you will get Type errors if you have "noImplicityAny: true" set under "compilerOptions" in your project's tsconfig.json):

npm i --save-dev @types/hammerjs

Import the package's styles by adding the following to your global/main styles file:

@import "../node_modules/timeless-picker/src/scss/global";

Import TimelessPickerModule into your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TimelessPickerModule } from 'timeless-picker';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    TimelessPickerModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Components

1) Base-picker: can be used in any situation where you need to display options for selection in a scrollable wheel style.

2) Time-picker: you can build with it any time-selection component with any format and several built-in styling options. It can also be flexibly customized beyond what's provided.

How to use?

Base-Picker:

Usage:

Required parameters:

• displayData
• newSelectedIndex

<timeless-base-picker
 [displayData]=yourInputDataArray
 (newSelectedIndex)=newSelectionEvent($event)>
</timeless-base-picker>

You must provide an array of data to display as options. And you have to handle the event of new selection. For all the possible properties and settings, see the table below.

Input Properties

Output Events

Time-picker:

Usage:

Required parameters: todo

<timeless-time-picker
 [hourFormat]=chooseHourFormat
 [startTime]=specifyStartTime
 (timeChangeIso)=newTimeEvent($event)>
</timeless-time-picker>

This is just one simple example of how to use the time picker. Consult the table below for a more detailed overview of all the possible properties and customizations. Note that there are two events for changes in time selection (ISO or simple string), you can use whatever suits you best.

Input Properties

Output Events

A deeper insight into customizations

Selection highlight

The default picker has a gradient opacity effect applied to the elements before and after the middle (or selected) one. This serves to highlight the selected element and to produce an effect of a curved wheel.

Additionally, the package includes two different styles of selections boxes, as shown below: 1) Separate style: individual boxes around each picker's selection:*

2) Spanning style: one rectangular shape that spans over multiple pickers (this doesn't apply if you're using one base-picker. This option is available for the time-picker or if you're using the timeless-container template REFERENCE NEEDED to host multiple base-picker):*

*The examples aren't comprehensive with regard to available styling.

Custom selection highlight component:

It's also possible to provide your own custom selection box/highlight component.

If you're using the out-of-box timeless-time-picker, you can provide a custom component as a child by annotating it with the selector custom-selection-highlight. Here's an example:

<timeless-time-picker [hourFormat]="'hours12'" [visibleItemsCount]="7" [theme]="'dark'">
      <div class="custom-selection" custom-selection-highlight></div> 
</timeless-time-picker>

.custom-selection {
  z-index: 10;
  position: absolute;
  height: calc(100% / 8);
  width: 100%;
  border-radius: 12px;
  border-width: 3px;
  border-style: dashed;
  border-color: yellow;
}

*make sure to add z-index: 10 to stack the box below the time-picker component in order not to interfere with the scroll/pan recognition and position: absolute to allow stacking.

The above code will give the produce the following result: