LC DatePicker : AngularJS Date Time Picker Component


AngularJS Date Time Picker

AngularJS Date Time Picker LC DatePicker is a pure Angular date and time picker component.

Angular datepicker is an angularjs directive that generates a datepicker calendar on your input element.

The Angularjs Datepicker is developed by 720kb.

Requirements

AngularJS v1.3+

Browser support

ChromeFirefoxIEOperaSafari
IE9 +

Load

To use the directive, include the Angular Datepicker’s javascript and css files in your web page:

<!DOCTYPE HTML>
<html>
<head>
  <link href=src/css/angular-datepicker.css rel=stylesheet type=text/css />
</head>
<body ng-app=app>
 //…..
  <script src=src/js/angular-datepicker.js></script> 
</body>
</html>
  • LC DatePicker is an Angular component that generates a datepicker calendar on your input element
  • Compatible with Angular 2 and Angular 4 versions
  • Only dependency is MomentJS and Font Awesome
  • Customizable date format and language
  • Can be configured as time, date-time, date, month or year picker

Tested with

  • Firefox (latest)
  • Chrome (latest)
  • Chromium (latest)
  • Edge
  • IE11

Installing / Getting started

npm install @libusoftcicom/lc-datepicker

skip this if SystemJS is not used as module loader:

System.config({
  paths: {
    'npm:': 'node_modules/'
  },
  map: {
    '@libusoftcicom/lc-datepicker' : 'npm:@libusoftcicom/lc-datepicker/bundles/lc-datepicker.umd'
  }
})
import {LcDatePickerModule} from '@libusoftcicom/lc-datepicker';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    ,LcDatePickerModule
  ],
  providers: [
    ...
  ],
  bootstrap: [...]
})
export class AppModule {}

Use the following snippet inside your component:

import {DatePickerConfig, ECalendarType} from '@libusoftcicom/lc-datepicker';


@Component({
  ...
})
export class AppComponent {

  private dateValue: string = null;
  public config = new DatePickerConfig();
  public CalendarOpened: boolean = false;

  constructor() {

    // configuration is optional
    this.config.CalendarType = ECalendarType.Date;
    this.config.Localization = 'en';
    ...
  }

  public get Date() {
    return this.dateValue;
  }

  public set Date(value: string) {
    this.dateValue = value;
  }

}
<lc-datepicker [(opened)]="CalendarOpened" [config]="config" [(date)]="Date"></lc-datepicker>
<lc-date-range-picker [(opened)]="CalendarOpened" [config]="config" [(date)]="Date"></lc-date-range-picker>

AngularJS Date Time Picker

  • CalendarType: ECalendarType
  • Localization: String
  • MaxYear: Number
  • MinYear: Number
  • MaxMonth: Number
  • MinMonth: Number
  • MaxDay: Number
  • MinDay: Number
  • ConfirmLabel: String
  • PrimaryColor: String
  • FontColor: String
  • Format: Moment.MomentInput
  • setDisabledDates( Array<Moment.MomentInput> )
  • addDisabledTimeRange( start<Moment.MomentInput>, stop<Moment.MomentInput> )

Developing

Built With:

  • Angular
  • MomentJS
  • Font Awesome

Setting up Dev

This project was generated with Angular CLI version 6.0.2.

Angular CLI must be installed before building LC DatePicker component.

npm install -g @angular/cli
git clone https://github.com/LibusoftCicom/lc-datepicker.git
cd lc-datepicker/
npm install
npm run start

Building

This project was generated with Angular CLI version 6.0.2.

Angular CLI must be installed before building LC DatePicker component.

npm install -g @angular/cli
git clone https://github.com/LibusoftCicom/lc-datepicker.git
cd lc-datepicker/
npm install
npm run build

Custom titles

You can set the titles for the month and year selectors with the date-year-title=”” and date-month-title=”” data attributes (default to is “select month” and “select year”)

<datepicker date-month-title=selected year>
  <input ng-model=date/>
</datepicker>
 
<datepicker date-year-title=selected title>
  <input ng-model=date/>
</datepicker>

Highlight today day in calendar

To highlight or style the today day in the calendar just use its own CSS class (._720kb-datepicker-today) like this:

._720kb-datepicker-calendar-day._720kb-datepicker-today {
  background:red;
  color:white;
}

Custom buttons

You can customize the calendar navigation buttons content, let’s make an example while using FontAwesome

<datepicker button-prev=<i class=’fa fa-arrow-left’></i> button-next=<i class=’fa fa-arrow-right’></i>>
  <input ng-model=date type=text/>
</datepicker>

Custom buttons titles for arrows

You can also set the titles for the left and right arrows with button-next-title=”” for the right and button-prev-title=”” for the left. By default they are labeled “next” and “prev”.

<datepicker button-prev-title=previous month>
  <input ng-model=date/>
</datepicker>
 
<datepicker button-next-title=next month>
  <input ng-model=date type=text/>
</datepicker>

For More Angular Calendar plugins Click


 

Leave a Reply

Your email address will not be published. Required fields are marked *