Handylib ngx-datepicker

SIMPLE AND COOL LOOKING DATEPICKER FOR ANGULAR 13+

Install

momentjs is a peer dependency and must also be installed

npm i @handylib/ngx-datepicker moment

Now import the NgxDatepickerModule to your module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDatepickerModule } from '@handylib/ngx-datepicker';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgxDatepickerModule,
    FormsModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Make sure you have also loaded FormsModule along with NgxDatepickerModule otherwise it will throw error cannot bind ngModel since its not known property of input or any element.

To you any type of picker you just have to add directive to that element

DATETIME, DATE, MONTH, YEAR PICKER DIRECTIVES

| Directives | | | -------------------- | --------- | | datetimepicker | To pick Date and Time | | datepicker | To pick only Date | | timepicker | To pick only Time | | monthpicker | To pick only month | | yearpicker | To pick only year |

add any directive to any input or element for example datetimepicker

<input type="text" datetimepicker placeholder="select date & time" [(ngModel)]="myDateTime" >

default date and time format is "YYYY-MM-DD HH:mm:ss" which is same as mysql default datetime format.

To change format just give your format to [format] input.

<input type="text" datetimepicker [format]="'DD MMMM, YYYY hh:mm A'" placeholder="select date & time" [(ngModel)]="myDateTime" >

output 4 April, 2022 12:45 AM

DATE AND TIME

<input type="text" datetimepicker placeholder="select date & time" [(ngModel)]="myDateTime" >

DATE ONLY

<input type="text" datepicker placeholder="select a date" [(ngModel)]="myDate" >

TIME ONLY

<input type="text" timepicker placeholder="select time" [(ngModel)]="myTime" >

MONTH ONLY

<input type="text" monthpicker placeholder="select month" [(ngModel)]="myMonth" >

YEAR ONLY

<input type="text" yearpicker placeholder="select year" [(ngModel)]="myYear" >

| NOT REQUIRED
| -------------------- | Angular Material
| Angular CDK
| Jquery
| Bootstrap

For more information visit https://handylib.github.io/

Any issues or bugs or source code - https://github.com/handylib/handylib.github.io