https://github.com/maryland09/angular-wheel-date-picker
Angular wheel date picker
https://github.com/maryland09/angular-wheel-date-picker
Last synced: 10 days ago
JSON representation
Angular wheel date picker
- Host: GitHub
- URL: https://github.com/maryland09/angular-wheel-date-picker
- Owner: maryland09
- License: mit
- Created: 2025-04-11T10:46:48.000Z (17 days ago)
- Default Branch: main
- Last Pushed: 2025-04-11T14:34:04.000Z (17 days ago)
- Last Synced: 2025-04-11T15:48:50.092Z (17 days ago)
- Size: 164 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-wheel-date-picker - A date picker component for Angular applications that features a scrollable wheel interface similar to native mobile date pickers. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-wheel-date-picker - A date picker component for Angular applications that features a scrollable wheel interface similar to native mobile date pickers. (Table of contents / Third Party Components)
README
# Angular Wheel Date Picker
A date picker component for Angular applications that features a scrollable wheel interface similar to native mobile date pickers.
## Features
- Intuitive wheel-style date selection
- Smooth scrolling experience
- Mobile-friendly touch interface
- Customizable year range
## Installation
npm install angular-wheel-date-picker --save
## Basic Usage
```typescript
import {Component} from '@angular/core';
import {AngularWheelDatePicker} from "angular-wheel-date-picker";
import {DatePipe} from "@angular/common";
@Component({
selector: 'app-root',
standalone: true,
imports: [
AngularWheelDatePicker,
DatePipe
],
template: `
Selected date: {{ myDate | date: 'dd/MM/yyyy' }}
`,
styleUrl: './app.component.css'
})
export class AppComponent {
myDate?: Date;
selectDate(date: Date) {
this.myDate = date;
}
}
```
## Inputs
| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `minYear` | number | Current year - 50 | Minimum year displayed in the year wheel |
| `maxYear` | number | Current year + 10 | Maximum year displayed in the year wheel |
## Outputs
| Output | Type | Description |
|--------|--------------------|-------------|
| `dateChange` | EventEmitter<Date> | Emits the selected date when the user changes it |
# Requirements
- Angular 15.0.0 or higher
- dayjs
# Browser Support
This component supports all modern browsers.
# Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
# License
MIT