Ct-ngx-datepicker-custom NPM

ct-ngx-datepticker

Introduction

A single and dual date picker, written for angular 2+ projects.

Code Samples

Setup

import { DatePickerUtil, DatePickerConfig } from 'ct-ngx-datepicker';

...

class MyDatePickerConfig extends DatePickerConfig {
	
}

...

DatePickerUtil.forRoot(new MyDatePickerConfig())

Config is optional, more details to come on what options are configurable.

Usage Example

<ct-date-picker [(date)]="date1" zIndex="100" formControlName="singlePicker">
    <input #date class="form-control" />
</ct-date-picker>

<ct-dual-picker [(dateFrom)]="date2" [(dateTo)]="date3" zIndex="100" formControlName="dualPicker">
    <input #dateFrom class="form-control" />
    <input #dateTo class="form-control" />
 </ct-dual-picker>

Installation

npm install --save ct-ngx-datepicker

Usage

Single datepicker

<ct-date-picker [(date)]="date1" zIndex="100" formControlName="singlePicker">
    <input #date class="form-control" />
</ct-date-picker>

Wrap a input field in the element. Mark the input field with #date

Single datepicker parameters

date - date model
dateChange - Event emitter for notification of date changes
zIndex - Allows specification of a custom z-index for the picker.
minDate - Minimum allowed date.
maxDate - Maximum allowed date.
match - Optional regex for properly parsing typed in dates, e.g. mm/dd/yyyy
globalMode - Sets the starting mode for selecting a date, e.g. Calendar, Year. If no value is specified, Calendar mode is implied.

Dual Date Picker

<ct-dual-picker [(dateFrom)]="date2" [(dateTo)]="date3" zIndex="100" formControlName="dualPicker">
    <input #dateFrom class="form-control" />
    <input #dateTo class="form-control" />
 </ct-dual-picker>

Wrap two input fields in the element. Mark each input #dateFrom and #dateTo respectively.

Dual datepicker parameters

dateFrom - date model
dateTo - date model
dateFromChange - Event emitter for notification of date changes
dateToChange - Event emitter for notification of date changes
zIndex - Allows specification of a custom z-index for the picker.
minDate - Minimum allowed date.
maxDate - Maximum allowed date.
match - Optional regex for properly parsing typed in dates, e.g. mm/dd/yyyy
globalMode - Sets the starting mode for selecting a date, e.g. Calendar, Year. If no value is specified, Calendar mode is implied.

Requirements

Angular 2+ (common, core, forms)
jQuery 3+ (see note below)
moment 2

Why jQuery?

I have already implemented the datepicker using the renderer class to support Angular Universal Apps, and avoid needing jQuery. However at this time renderer is experimental. When it is no longer experimental the code will be updated.

Why moment?

Because the datepicker returns a moment date, not a string.

Release Notes

3.0.3 -- Fix bug with changeDate being called more than once
3.0.0-3.0.2 -- Don't ask
2.5.0 -- Ability to specify a minDate without a maxDate for validation
2.4.0 -- Add ability to specify calendar default mode (globalMode), e.g. month/year.
2.2.3 -- Remove sourcemap from dist build.
2.2.2 -- Fixed bug where dates weren't invalid when cleared
2.2.1 -- Fixed bug with validation on dual date picker.
2.2.0 -- Added regex matching for date validation
2.1.0 -- Added ability to validate dates on range, and moment.isValid
2.0.0 -- Removed unused api parameters. Added basic validation for reactive forms.
1.0.2 -- Notice about new repo.
1.0.1 -- Unspecified bug fixes (sorry, just starting to do this right)
1.0.0 -- Initial Release
Migration Notes