Date Range Picker

A versatile JavaScript component for selecting date ranges, single dates, and times with ease. Perfect for forms and dashboards, it supports calendar views, time pickers, and predefined ranges.

Date Range Picker on View Official Website
Date Range

Select a custom date range from the calendar.

Date Range Picker With Times

Includes both start and end time selection.

Single Date Picker

Select a single date (e.g., birthday).

Predefined Date Ranges

Choose from common ranges like "Last 7 Days", etc.

Flatpickr

Lightweight, powerful javascript datetimepicker with no dependencies

Flatpickr on View Official Website

Datepicker

Basic

Set [options]="dateFormat: 'd M, Y'"

DateTime

Set [options]="dateFormat: 'd M, Y H:i;,enableTime:true"

Human-Friendly Dates

Set [options]="dateFormat: 'F d, Y'"

MinDate and MaxDate

Set [options]="minDate: '...',maxDate:'...'"

Disabling Dates

Set [options]="dateFormat: 'd M, Y',disable:'[...]'"

Selecting Multiple Dates

Set [options]="{dateFormat: 'd M, Y',mode:'multiple'}"

Range

Set [options]="{dateFormat: 'd M, Y',mode:'range'}".

Inline

Set [options]="{dateFormat: 'd M, Y',inline:true}"

Timepicker

Timepicker

Set [options]="{noCalendar: true,enableTime:true}"

24-hour Time Picker

Set [options]="{noCalendar: true,enableTime:true,time24hr:true}"

Time Picker w/ Limits

Set [options]="{noCalendar: true,enableTime:true,maxTime:'...',minTime:'...'}"

Preloading Time

Set [options]="{noCalendar: true,enableTime:true,dateFormat:'H:i'}"

Inline

Set [options]="{noCalendar: true,enableTime:true,inline:true}"

Colorpicker

ngx-color - A simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!

ngx-color Colorpicker on View Official Website

Example

Sketch Demo

Use <color-sketch color="color"/> colorpicker.

Chrome Color Picker

Use <color-chrome color="color"/> colorpicker.

Slider

Use <color-slider color="color"/> colorpicker.

Color Format

Use <color-twitter color="color"/>