wolf-picker
v1.0.7
Published
Simple Angular date time picker. This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices.
Downloads
34
Maintainers
Readme
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.
<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"
}
}
User guide
Each input field behaves as drop down , user can click on input field and can scroll to select the option.
License & Copyright
© Dikshyant Dash
Licensed under the MIT License.