https://github.com/raphaelm-sudo/ngx-simple-datepicker
Simple and lightweight, yet customizable date picker for Angular
https://github.com/raphaelm-sudo/ngx-simple-datepicker
angular date datepicker ngx picker
Last synced: 3 months ago
JSON representation
Simple and lightweight, yet customizable date picker for Angular
- Host: GitHub
- URL: https://github.com/raphaelm-sudo/ngx-simple-datepicker
- Owner: raphaelM-sudo
- License: mit
- Created: 2020-02-02T01:05:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T22:08:39.000Z (about 2 years ago)
- Last Synced: 2025-02-08T12:47:02.224Z (4 months ago)
- Topics: angular, date, datepicker, ngx, picker
- Language: TypeScript
- Homepage:
- Size: 1.65 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ngx Simple Datepicker
Simple and lightweight, yet customizable date picker for Angular
[Demo](https://ngx-simple-datepicker.netlify.com/)
This is a simple datepicker component for Angular, fully supporting template driven forms and form validation.
It uses [@nutrify/ngx-simple-select](https://www.npmjs.com/package/@nutrify/ngx-simple-select/) as the select control.
## Installation
Note: Ngx Simple Datepicker requires Angular 9.
```sh
npm install @nutrify/ngx-simple-datepicker --save
```
For styling import @nutrify/ngx-simple-select/scss/styles.scss or @nutrify/ngx-simple-select/css/styles.css
## Usage
**app.module.ts:**
```typescript
import { SimpleDatepickerModule } from 'projects/simple-datepicker/src/public-api';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SimpleDatepickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
**component.ts:**
```typescript
// ...
export class Component {
date: Date = null;
}
```
**component.html:**
```html
```
Check out the [source code](https://github.com/raphaelM-sudo/ngx-simple-datepicker/tree/master/src/app) for an example.
#### Datepicker
##### Inputs
| Property | Default | Type | Description |
| ---------------- | ------- | ---------------------------------------- | -------------------------------------------------------- |
| min | | `Date \| string` | Optional min date value * |
| max | | `Date \| string` | Optional max date value * |
| dayPlaceholder | | `string` | Optional placeholder for the day select control |
| monthPlaceholder | | `string` | Optional placeholder for the month select control |
| yearPlaceholder | | `string` | Optional placeholder for the year select control |
| months | | `[string, ...string[]] & { length: 12 }` | Optional array of month names for multi language support |
*) If no value is entered the date wont be validated by default, but the select dropdown for the year will show a range of (-115) - (-16) from the current year.
## Styling
You can use SCSS or CSS from @nutrify/ngx-simple-select for styling.
Just import the stylesheet and apply changes to it.
### CSS / SASS
```scss
@import '~@nutrify/ngx-simple-select/scss/styles';
```
### Angular
**angular-cli.json:**
```json
"styles": [
"styles.css",
"../node_modules/@nutrify/ngx-simple-select/css/styles.css"
]
```