Wolf-picker NPM

Wolf Picker

Description

Simple and lightweight date time picker for angular applications with no dependencies.

A date picker for your Angular app.

No dependencies needed.
Pick days, months, years.
Pick hours, minutes, seconds.
Very easy to modify the date and time format .

Tech Stack

Client: Angular, HTML5, SCSS, TS, JS.

Getting started

Compatibility

Your project needs to use Angular 13.1.0 or later. We will release wolf-picker for older version of Angular also . | Angular Version | Newest compatible wolf-picker version | | :------------ | --------: | | >= 13.1.0 | latest | | < 13.1.0 | Coming Soon...|

Installation

Add wolf-picker to your project by executing

  $ npm i wolf-picker

Usage

Here's an example of basic usage:

Import WolfPickerModule in app.module.ts

import { AppComponent } from './app.component';
import { WolfPickerModule } from 'wolf-picker';

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

### Options and Config

Use wolf-picker element in your html file along with wolfConfig object.

```html
  <wolf-picker [wolfTransform]="wolfConfig" (setDateTime)="getDateTime($event)"><wolf-picker>

Use wolfConfig object to access and modify the options.

  wolfConfig = {
    "seconds": boolean,
    "isMilitaryTime": boolean,
    "steps": number,
    "disablePicker": string
  }

Use wolfConfig object to access and modify the options.

Options	Value	Description
`seconds`	`true, false`	User can enable and disable seconds input field.
`isMilitaryTime`	`true, false`	User can set true for 24 hours format and false for 12 hours format.
`steps`	`1,2,3,4,5....60`	User can set the steps for minutes .
`disablePicker`	`"date","time"`	User can disable any one picker.

Use getDateTime function to get the setDateTime event.

  dateTime = "";
  getDateTime(event: Event) {
    this.dateTime = event;
  }

Based on your wolfConfig object setDateTime event brings an object of date and time.

  {
    "date": {
        "year": 2022,
        "month": "04",
        "day": 19
    },
    "time": {
        "hour": "09",
        "minute": 55,
        "second": 36,
        "ampm": "pm"
    }
}