Ultipicker: moment based datepicker
Demo
https://romko775.github.io/ng2-ultipicker/ to see how pickers look
FollowLog of changes
https://github.com/Romko775/ng2-ultipicker/blob/master/projects/ultipicker/LOGS.md to see changes
FollowGetting started
Step 1: Install
NPM
npm i ultipicker --save
Step 2: Import the UltipickerModule
;; ;; //add this @
Step 3: Add in component html picker
Dual picker
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
ranges: Array<Range> = ;
Output
Works with Reactive Forms. Just add [formControlName]
.
Mono picker
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
defaultSets: Array<DefaultSet> = ;
Output
Works with Reactive Forms. Just add [formControlName]
.