@nutrify/ngx-simple-datepicker
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

Ngx Simple Datepicker

Simple and lightweight, yet customizable date picker for Angular

Demo

This is a simple datepicker component for Angular, fully supporting template driven forms and form validation. It uses @nutrify/ngx-simple-select as the select control.

Installation

Note: Ngx Simple Datepicker requires Angular 9.

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:

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:

// ...

export class Component {
  date: Date = null;
}

component.html:

<!-- ... -->

<simple-datepicker min="1910-01-01" max="2020-01-01" [(ngModel)]="date" required></simple-datepicker>

<!-- ... -->

Check out the source code 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

@import '~@nutrify/ngx-simple-select/scss/styles';

Angular

angular-cli.json:

"styles": [
  "styles.css",

  "../node_modules/@nutrify/ngx-simple-select/css/styles.css"
]

Package Sidebar

Install

npm i @nutrify/ngx-simple-datepicker

Weekly Downloads

0

Version

1.1.4

License

MIT

Unpacked Size

212 kB

Total Files

22

Last publish

Collaborators

  • raphael.michl