Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/e73b025/ngx-simple-date-picker
A simple-to-use date picker component for use in Angular (ngx) projects.
https://github.com/e73b025/ngx-simple-date-picker
angular angular2 date-picker ngx typescript
Last synced: 24 days ago
JSON representation
A simple-to-use date picker component for use in Angular (ngx) projects.
- Host: GitHub
- URL: https://github.com/e73b025/ngx-simple-date-picker
- Owner: e73b025
- License: mit
- Created: 2023-10-19T16:08:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-26T10:58:13.000Z (about 1 year ago)
- Last Synced: 2024-11-18T05:18:33.530Z (about 1 month ago)
- Topics: angular, angular2, date-picker, ngx, typescript
- Language: TypeScript
- Homepage:
- Size: 890 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NGX Date Picker
A simple-to-use date picker component for use in Angular (ngx) projects. This component provides your users the ability
to select a date or a date range using a clean, sharp looking popup user interface.
## Features
- No external dependencies
- Provides either the ability to use the picker UI directly or via a date picker input field
- Built in light/dark mode
- Easy to override configuration
- Easy to override styling
## Demo
[Click here to view available demos](https://e73b025.github.io/ngx-simple-date-picker/)
## Using the Input Component (easiest)
### How To Use
If you wish to show an input component that will allow your uses to select a date or date range, use the following
code:
**In your template:**
```html
{{dateSelection | json}}
```
**In your component:**
```typescript
@Component({
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
dateSelection: DateSelection | undefined
onDateChanges() {
console.log(this.dateSelection);
}
}
```
The `dateSelection` property uses a two-way binding, so you can either bind it directly to your template
or perform an action within the `onDateChanges()` method above.
### Configuration
You can configure both the date input and also the date picker using the `NgxDatePickerInputConfig` interface. For example,
you can use the following code to enable `dark-mode`:
```typescript
datePickerConfig: NgxDatePickerInputConfig = Object.assign(getInputConfigDefaults(), {
darkMode: false
});
```
You then just need to pass that config to the `ngx-date-picker-input` using the `[config]="datePickerConfig"` attribute.
**Full options are listed below:**
```typescript
{
minDate: Date;
maxDate: Date;
initialView: ViewMode;
rangeMode: boolean;
darkMode: boolean;
datePresentationFormat: string;
datePresentationLocale: string;
datePresentationValue: any;
}
```
## Using the Picker Directory
If you do not wish to use the input component, you can instead use the picker directly.
### How To Use
```html
{{dateSelection | json}}
```
**In your component:**
```typescript
@Component({
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
dateSelection: DateSelection | undefined
onDateChanges() {
console.log(this.dateSelection);
}
}
```
## Styling
If you would like to override styling, you can use the following (as an example):
**Change the date selector day color:**
```css
::ng-deep ngx-date-picker {
--ngx-date-picker-highlight-background-color: red !important;
}
```
**Change the date picker input width and background color:**
```css
::ng-deep ngx-date-picker-input {
width: 450px;
}
::ng-deep ngx-date-picker-input input {
background-color: #efefef;
}
```
## Contributing
Feel free to fire off a PR if you have any improvements.
## Support
Please contact me if you need any help.