ultipicker v1.1.0

Ultipicker: moment based datepicker

Demo

Follow https://romko775.github.io/ng2-ultipicker/ to see how pickers look

Log of changes

Follow https://github.com/Romko775/ng2-ultipicker/blob/master/projects/ultipicker/LOGS.md to see changes

Getting started

Step 1: Install

NPM

npm i ultipicker --save

Step 2: Import the UltipickerModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UltipickerModule } from 'ultipicker'; //add this

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UltipickerModule //add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Add in component html picker

Dual picker

<ng2-ultipicker-dual [defaultStartDate]="yourDefaultStartDate"
                     [defaultEndDate]="yourDefaultEndDate">
</ng2-ultipicker-dual>

Inputs

ranges

@Input() ranges: Array<Range> = [
    {
      key: 'Today',
      start: moment(),
      end: moment()
    },
    {
      key: 'Yesterday',
      start: moment().subtract(1, 'days'),
      end: moment().subtract(1, 'days')
    },
    {
      key: 'This week',
      start: moment().startOf('week'),
      end: moment()
    },
    {
      key: 'This month',
      start: moment().startOf('month'),
      end: moment()
    },
    {
      key: 'This year',
      start: moment().startOf('year'),
      end: moment()
    },
    {
      key: 'Last week',
      start: moment().subtract(1, 'week').startOf('week'),
      end: moment().subtract(1, 'week').endOf('week')
    },
    {
      key: 'Last month',
      start: moment().subtract(1, 'month').startOf('month'),
      end: moment().subtract(1, 'month').endOf('month')
    },
    {
      key: 'Last year',
      start: moment().subtract(1, 'year').startOf('year'),
      end: moment().subtract(1, 'year').endOf('year')
    }
  ];

Output

Works with Reactive Forms. Just add [formControlName].

Mono picker

<ng2-ultipicker-mono   [defaultDate]="yourDefaultDate">
</ng2-ultipicker-mono>

Inputs

defaultSets

@Input() defaultSets: Array<DefaultSet> = [
    {
      key: 'Today',
      value: moment().startOf('day')
    },
    {
      key: 'Yesterday',
      value: moment().subtract(1, 'day').startOf('day')
    },
    {
      key: 'Start of week',
      value: moment().startOf('week')
    },
    {
      key: 'Start of month',
      value: moment().startOf('month')
    }
  ];

Output

Works with Reactive Forms. Just add [formControlName].

Contributor

• Roman Yanush

Inspired by

• Vlad Ioffe
• Dan Grossman