❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Deprecating all project

ultipicker
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Ultipicker: moment based datepicker

NPM

npm version

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

Input Type Default Required Description
minStartDate moment.Moment null no The minimal start date that user can select
maxEndDate moment.Moment null no The maximal end date that user can select
defaultStartDate moment.Moment moment() no The date of start date picker
defaultEndDate moment.Moment moment() no The date of end date picker
inputDayFormat string MM-DD-YYYY no The date format in which moment time transforms
separator string ' - ' no The separator for readonly input between dates
dayNames Array ['Su', ... 'St'] no Can set local day names. Order only when first day is Sunday. Auto shifts to Monday if isoWeekConfig = 1
isoWeekConfig number 0 no 0 - first day Sunday. 1 - first day Monday
showCalendarWeeks boolean false no Show or hide calendar weeks numbers
monthNames Array ['January', ... 'December'] no Can set local names for months
ranges Array See ranges no Can set predetermined ranges

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

Input Type Default Required Description
minDate moment.Moment null no The minimal start date that user can select
maxDate moment.Moment null no The maximal end date that user can select
defaultDate moment.Moment moment() no The default date of picker
inputDayFormat string MM-DD-YYYY no The date format in which moment time transforms
dayNames Array ['Su', ... 'St'] no Can set local day names. Order only when first day is Sunday. Auto shifts to Monday if isoWeekConfig = 1
isoWeekConfig number 0 no 0 - first day Sunday. 1 - first day Monday
showCalendarWeeks boolean false no Show or hide calendar weeks numbers
monthNames Array ['January', ... 'December'] no Can set local names for months
autoClose boolean false no If true closes the picker when user selected the date
defaultSets Array See defaultSets no Can set predetermined date sets

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

Inspired by

Readme

Keywords

Package Sidebar

Install

npm i ultipicker

Repository

github.com/Romko775/ng2-ultipicker

Homepage

github.com/Romko775/ng2-ultipicker#readme

Weekly Downloads

3

Version

1.1.0

License

MIT

Unpacked Size

627 kB

Total Files

29

Last publish

Collaborators

  • paper_yoyo
Try on RunKit
Report malware